This article will provide a helpful guide for the Flex theme's typography settings. Like other Shopify themes, Flex includes Typography settings in the theme editor under Theme Settings > Typography. These settings will apply theme-wide to your body text, headings, sub-headings, etc.
In addition the those, the Flex theme also includes a couple of per section typography settings. This means that in some of Flex's sections and features, you can update the typography for that specific area instead of the default typography settings getting applied.
Typography Theme Settings
If you head into Customize > Theme Settings > Typography, you'll see the following settings available.
Body text
Within the settings for the theme's Body text, you can select a Font using Shopify's Font Picker and determine the base size.
The body text applies to your paragraph text throughout the theme – this includes:
- product descriptions
- text entered into any 'text' fields within sections.
- product prices
- button labels
- announcement bar text
- breadcrumb links
- sort by/tag filter
- quick view button
- pagination
- icon bar
- product stickers
- product info for collection thumbnails
- footer menus
Logo
If you do not wish to upload an image for your Logo in the Header or Footer, the name of your shop will display as the logo instead. Within the settings for the logo you can select a font using Shopify's Font Picker, determine the base size and choose a capitalization option (none, lowercase, uppercase).
Main Menu
Within the settings for the main menu, you can select a font using Shopify's Font Picker, determine the base size, letter spacing and choose a capitalization option (none, lowercase, uppercase).
The main menu settings apply to:
- main menu in the header
- drop-down menu items
- all text within mega menus (including bottom bar)
Drop-down and Mega Menu
Within the settings for drop-down and menu menu, you can select the heading base size, regular base size, letter spacing, and choose a capitalization option (none, lowercase, uppercase). This will apply to your drop-down menu items and text within any mega menus.
Buttons
Within the settings for the theme's buttons, you can select a font using Shopify's Font Picker, determine the letter spacing and choose a capitalization option (none, lowercase, uppercase). The button typography settings not apply to dynamic checkout buttons (buy it now).
The button settings apply to:
- add to cart button
- quick view button
- buttons within sections/content blocks
- form buttons
Headings
Within the settings for the theme's headings, you can select a font using Shopify's Font Picker, determine the base size, letter spacing and choose a capitalization option (none, lowercase, uppercase).
The heading settings apply to:
- any "heading" fields within sections (except for headings on banner images)
- page titles
- product titles on product pages
- headings within sidebars
- headings of footer columns
Preheading
Within the settings for the theme's preheadings, you can select a font using Shopify's Font Picker, determine the base size, letter spacing and choose a capitalization option (none, lowercase, uppercase). Note: these do not apply to sections that have preheadings on banner images (ex: image with text overlay).
The preheading settings apply to:
- 'preheading' field in the Section Heading section
Subheading
Within the settings for the theme's subheadings, you can select a font using Shopify's Font Picker, determine the base size, letter spacing and choose a capitalization option (none, lowercase, uppercase). Note: these do not apply to sections that have subheadings on banner images (ex: image with text overlay).
The subheading settings apply to:
- 'subheading' field in the Section Heading section
Banner headings
Within the settings for the theme's banner headings, you can select a font using Shopify's Font Picker, determine the base size and choose a capitalization option (none, lowercase, uppercase).
The banner headings settings apply to:
- any heading fields within sections that include banner images (ex: image with text overlay, video)
- page titles when if and when a banner image is enabled at the top of the page
Banner text
Within the settings for the theme's banner text you can select a font using Shopify's Font Picker, determine the base size and letter spacing.
The banner text settings apply to:
- preheading and subheading text within sections that include banner images (ex: image with text overlay, video)
Footer
Within the settings for the footer you can determine the base size for the headings and the text.
Section Typography
If you're looking to have more control over the typography options in some of your sections, you're in luck! In some of Flex's sections and features, you can update the typography for that specific area right within the section settings:
The sections/features that have their own typography settings include:
- Top bar
- Rich text section