Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the FAQ Page
The Flex theme includes an 'FAQ' page template that you can use to answer commonly asked or important questions about your company, products, policies etc. that you want your customers to know about and have easy access to read through! The FAQ page is a great place to put any shipping or order information as these are top questions from customers!
The 'FAQ' page template is completely configured in within the theme editor. The page content for the questions and answers is divided into two columns. Within the theme editor, you have options to configure the FAQ Column 1 and FAQ Column 2, here's where the frequently asked question, answer, section heading, and images can all get added as content blocks.
The 'FAQ' page includes an option to enable a banner image, layout and spacing settings, and custom CSS for further flexibility.
When adding a Page in your Shopify Admin (Online Store > Pages), the page.faq template is named page.faq and can be selected under Template > Template Suffix:
Once you've added your page content, you can head into the Theme Editor (Customize) > Select your FAQ page from the drop-down page selector. Your theme editor on the left will then update with the page settings.
FAQ Page Settings
The FAQ page template includes settings for the banner, page and columns (where you add the actual FAQ content blocks).
-
FAQ Banner Settings
The FAQ page banner image is completely optional in the FAQ page template! If you choose to enable the banner image, the settings include options for the layout and advanced CSS as well.
Show banner/Image
To enable the banner image, you'll need to check off the 'show banner' setting. The FAQ page title will then display on top of the banner image. A 1800 x 800px image size is recommended.
Darken banner image
You can enable the 'darken banner image' setting to add a subtle overlay on top of you banner image. This comes in handy if you have have a 'busy' banner image as it will improve legibility!
Subheading
If you'd like to include additional text on top of the banner image, below the page title, you can enter content in the 'subheading' field.
Width
The 'width' setting can be set to 'standard' or 'wide.' If you'd like your banner image to spread full-width, you can select 'wide.' If you'd like your banner image to be contained/not full-width, you can select 'standard.'
Banner height
You can select small, medium, or large for the banner image height.
Top/Bottom spacing
You can adjust the space above and below your banner image with the 'top spacing' and 'bottom spacing' settings.
CSS Class/Custom CSS
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the banner, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
-
FAQ Page Settings
Within the FAQ page settings, you can configure the layout and advanced CSS settings for the FAQ page content.
Width
The 'width' setting can be set to 'standard' or 'wide.' If you'd like your page content to spread full-width, you can select 'wide.' If you'd like your page content to be contained/not full-width, you can select 'standard.'
Top/Bottom spacing
You can adjust the space above and below your FAQ page content with the 'top spacing' and 'bottom spacing' settings.
CSS Class/Custom CSS
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the page, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
-
FAQ Columns Settings
The FAQ page template includes two columns which you can configure under the FAQ Column 1 and FAQ Column 2 settings. Within each column, you can add the frequently asked question and answer, section heading, and images for your actual FAQs. You can also configure spacing and advanced CSS settings.
In order to add the frequently asked question and answer, section headings, and images for your actual FAQs, under FAQ Column 1 or FAQ Column 2, scroll down to 'Add Content' and select one of the options.
Frequently asked question
The frequently asked question content block is where you can input the question and answer of your FAQ.
Heading
If you'd like to organize your FAQs into specific sections, you can add a 'heading' and input the title for the group of FAQs.
Image
You can add an image content block if you'd like to add images to your FAQ columns. The recommended image size is 1000px by 1000px.
Top/Bottom spacing
You can adjust the space above and below your FAQ Columns with the 'top spacing' and 'bottom spacing' settings.
CSS Class/Custom CSS
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the FAQ Column or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Examples
Example 1 - Studio demo shop
Example 2 - Nourish demo shop
