Ctrlk
Contact support
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Typography

Adjust Volume typography: use the Base size slider for quick scaling, or set individual heading sizes for desktop and mobile with granular controls.

Quick Adjustment

In addition to selecting fonts for Body and Headings, you can instantly increase or decrease the size of all headings and body text at once, using the Base size range slider. This allows you to quickly modify the overall look and feel of your store without adjusting individual text elements.

If you need more precise control over each heading style, proceed to the next section.

Granular Adjustment

For finer control, you can adjust each heading type separately. The theme allows you to set different sizes for desktop and mobile devices.

The Desktop font size scale setting is a percentage of the Base size.

In the screenshot above, the Page title size is set to 150% of the Base size (40px), which equals 60px.

Headings

We provide detailed customization options for three types of headings:

  • Page title

  • Section heading

  • Secondary heading

While the Base size setting affects all headings at once, you can scroll down to the individual heading settings to customize each one separately.

Subheading

In addition to heading settings, you can:

  • Choose whether to use the Heading or Body font.

  • Apply the Make font bolder option.

Caption

This is the smallest font used in the interface and captions. It should not be larger than the Body font size.

Buttons

The settings for button labels are similar to Subheading customization. You can individually adjust:

  • Main buttons — Larger buttons used in prominent sections.

  • Secondary buttons — Utility buttons for smaller interface elements.

lightbulb

In blocks or sections that include buttons, you can choose from three display styles: Solid, Outlined, Link.

Highlighted and Secondary heading feature

Secondary heading

In the Theme settings → Typography → Headings, you'll find a Secondary heading picker. It's used in two cases:

  1. If you wrap any word or phrase inside {curly brackets} in a section or block's Heading field, it will automatically pull the Secondary heading font.

  1. In Theme settings → Typography, you can switch the toggle from Main to Secondary for a specific type of heading.

hand-pointer

For example, you can pair a bold accent font with your Main heading, or choose the same font in an Italic style for the Secondary heading to create more contrast.

Highlighted heading

If you wrap any word or phrase inside [square brackets] in a section or block's Heading field, that part will be highlighted using the Highlighted background color. This color is set in Theme settings → Colors → Color scheme applied to the specific section.

You can also mix Secondary heading and Highlighted heading together to create unique and unexpected combinations.

Last updated

Was this helpful?