Superstore allows you to make both global and precise changes to font size, letter spacing, and capitalization, as well as select from a wide variety of custom fonts—all without customizations to the theme files.
In this article:
- Headings
- Section headings
- Body text
- Buttons
- Footer
- Global
- Headings
- Highlights banner
- Main menu
- Prices
- Product cards
- Section headings
- Vendors
Global
Use the Base font size slider to modify the overall font size. Think of this as the foundation for all text sizes, so if you select 17px, all font sizes configured will use this as the baseline or minimum font size and build up from there.
To increase, slide to the right (max 18px). To decrease, slide to the left (min 15px).
Headings
These settings control the appearance of Headings used throughout the storefront, such as Page titles, Slideshow heading, and Collection page titles.
To select the Font, click Change and choose from the options provided. After selecting a font, you can select the font style by clicking the chevron beside “Regular”. This option may not appear if the font only contains the Regular option.
Use the Heading font size slider to increase or decrease the size of the Headings.
100% outputs the original heading size, which is computed using the base font size. For example, if titles have an original heading size of 40px. You can make it 20% larger (48px) by setting it to 120%, or 20% smaller (32px) by reducing it to 80%.
To change all characters to Upper case, select the checkbox beside this label.
Use the Letter spacing slider to increase or decrease the space between each character.
Section headings
These settings control the appearance of the Section headings, which introduce the home page sections. These are distinct from the Headings detailed above.
To select the Font, click Change and choose from the options provided. After selecting a font, you can select the font style by clicking the chevron beside “Regular”. This option may not appear if the font only contains the Regular option.
Use the Section heading font size slider to increase or decrease the size of the Section headings.
100% outputs the original heading size, which is computed using the base font size. For example, if titles have an original heading size of 40px. You can make it 20% larger (48px) by setting it to 120%, or 20% smaller (32px) by reducing it to 80%.
To change all characters to Upper case, select the checkbox beside this label.
Use the Letter spacing slider to increase or decrease the space between each character.
Body text
To select the Font, click Change and choose from the options provided. After selecting a font, you can select the font style by clicking the chevron beside “Regular”. This option may not appear if the font only contains the Regular option.
To increase the font weight of the body text, select Change under Bold body text font.
You can also configure a different font weight for this setting by using the Enable custom bold body font checkbox.
Main menu
To select the Font, click Change and choose from the options provided. After selecting a font, you can select the font style by clicking the chevron beside “Regular”. This option may not appear if the font only contains the Regular option.
Use the Main menu font size slider to increase or decrease the font size of the main menu items.
To change all characters to Upper case, select the checkbox beside this label.
Use the Letter spacing slider to increase or decrease the space between each character.
Highlights banners
These settings control the appearance of the text used in the Highlights banner home page section. If multiple highlights banners are used, they will all reflect the settings configured here.
To select the Banner heading font, click Change and choose from the options provided. After selecting a font, you can select the font style by clicking the chevron beside “Regular”. This option may not appear if the font only contains the Regular option.
Use the Banner heading font size slider to increase or decrease the font size of the banner headings.
To change all characters to Upper case, select the checkbox beside this label.
Use the Letter spacing slider to increase or decrease the space between each character.
Buttons
These settings control the appearance of the text used for buttons throughout the theme (ATC, CTA, primary, and secondary).
To select the Font, click Change and choose from the options provided. After selecting a font, you can select the font style by clicking the chevron beside “Regular”. This option may not appear if the font only contains the Regular option.
Use the Button font size slider to increase or decrease the font size of the button text.
To change all characters to Upper case, select the checkbox beside this label.
Use the Letter spacing slider to increase or decrease the space between each character.
Prices
These settings control the appearance of the text used to display product prices throughout the theme.
To select the Font, click Change and choose from the options provided. After selecting a font, you can select the font style by clicking the chevron beside “Regular”. This option may not appear if the font only contains the Regular option.
Vendors
These settings control the appearance of the text used for product vendor labels.
To select the Font, click Change and choose from the options provided. After selecting a font, you can select the font style by clicking the chevron beside “Regular”. This option may not appear if the font only contains the Regular option.
To change all characters to Upper case, select the checkbox beside this label.
Use the Letter spacing slider to increase or decrease the space between each character.
Product cards
These settings control the appearance of the text used for the products as they appear on collection pages and certain home page sections.
To select the Font, click Change and choose from the options provided. After selecting a font, you can select the font style by clicking the chevron beside “Regular”. This option may not appear if the font only contains the Regular option.
Use the Product name font size slider to increase or decrease the font size of the product name for product cards.
Footer
These settings control the appearance of the text used for elements of the theme’s footer.
To select the Footer headings font, click Change and choose from the options provided. After selecting a font, you can select the font style by clicking the chevron beside “Regular”. This option may not appear if the font only contains the Regular option.
Use the Footer heading font size slider to increase or decrease the font size of the footer headings.
To change all characters to Upper case, select the checkbox beside this label.
Use the Letter spacing slider to increase or decrease the space between each character.