Common settings
Many settings are found in several sections and blocks across the theme. On this page, we go into detail about the settings you might see across many sections.
Last updated
Many settings are found in several sections and blocks across the theme. On this page, we go into detail about the settings you might see across many sections.
Last updated
This setting allows you to select one of the common font styles in the theme: heading (levels 1-6), subheading, caption (normal and XS) and body (XS-XL). These base styles can be customized under Settings > Typography.
Also known as an ‘eyebrow’ text, this appears above headings in smaller font. The style of subheading can be adjusted under Settings > Typography. To omit a subheading, delete all the text within this text field or, if it's a block, delete the block.
When accompanied by a heading size setting, the style of the heading can be visually displayed to match any one of the theme’s typographic styles. To omit a heading, delete all the text within this field or delete the block.
For accessibility and SEO purposes, it is important to have one h1 heading per page. This heading should represent the main title of page, for example, ‘Contact Us’, ‘All products’, etc. Checking this box will make the corresponding heading be an <h1>tag.
This has no effect on the visual styles of the heading, it only controls the underlying code.
Choose a button style (primary, secondary or text), button label and button link.
In some sections/blocks, you might find an enable banner click toggle. When enabled, it makes the whole section or block clickable. Note that if other buttons exist in the same section/block, only the first button with this option enabled will actually display.
Some sections feature a section header by default. You can always remove the section header by deleting the text content within a header.
Find out more about section header settings on the dedicated section page.
For media banners and background images meant to take up the majority of the screen width, you can choose to use the image’s default aspect ratio (adapt) or a variety of preset sizes.
For other images, you can choose between the image’s default aspect ratio (adapt) or another preset aspect ratio (portrait, landscape or square).
The container type allows you to select full to create full-bleed layouts, padded to apply the global horizontal gap setting to a full bleed section, or max to constrain the content to the maximum container size.
Choose between different maximum container widths on desktop. On mobile, this setting has no effect. Generally speaking, the ideal container width depends on the properties of your font.
Some sections allow you to choose different horizontal and vertical alignments. Setting the horizontal alignment will align the content's position in three different places on the horizontal axis, and vertical alignment will do the same on the vertical axis.
If the vertical alignment appears to make no difference, it's likely because the section is not tall enough, making it so that there isn't enough room to change the vertical alignment.
A color scheme can be applied to any section in the theme. Use different complementary color schemes in order to break up blocks of interest, or stick to a single color scheme throughout the theme, it’s up to you!
The color scheme transition setting allows you to create a section that changes color scheme as it scrolls into view. For best results, we recommend using this setting on a few key sections below the fold.
Removing the top and bottom settings for a section can allow you to combine sections in unique ways. For example, if your slideshow needs a heading above it, you could use the section header standalone setting.
To avoid the need for multiple settings for desktop and mobile, your padding selection will apply to desktop and when XLarge, XXLarge or XXXLarge are selected, they are adjusted to ¾ of the desktop value on mobile.
By default, the section padding defined in will be applied to every section, but you can override default padding using these settings. Select default to use the default padding, or use any of the preset spacing tokens.
Most sections have show top border and show bottom border settings. This applies the border color of the selected color scheme at the .
