List common customer questions and helpful answers using Retina's dynamic and engaging FAQ page template.
Publish Retina to Access the Template
First, confirm you have Retina published. The theme templates available for pages, collections, etc. are only accessible when the theme is published. If you are unable to currently publish your theme, we have instructions on how to access unpublished templates here.
Create a New Page
In your Online Store, open Pages to select Add Page.
Add some text for the page title, then locate the Template setting on the right side of the editor.
Select faq from the Theme template dropdown, then Save.
No more action is needed in the page editor—the questions and answers are added through the theme editor.
Edit the Question and Answers
In the Themes portion of the Online Store, open the theme editor by clicking Customize. Open the FAQ page with the page selector (Pages > faq).
Under FAQ in the left sidebar, click (+) Add block. There are blocks for Title and Frequently asked question.
Use the Title blocks to add a Heading and group the questions.
Then use the Frequently asked question blocks to add each Question and Answer pair using the provided fields.
Customize the Banner Settings
Click the FAQ section to open its settings.
Adjusting banner layout
Use the Wide display setting to expand the width of the banner image.
Select an option from the Section height dropdown to adjust the container size for the banner image.
Adding the image
Activate the Banner feature by clicking Select Image to locate your wide image.
Adjust the Image focal point using the provided dropdown. This setting moves the image within the container and allows merchants to fine-tune the focal point based on the image's subject(s).
Configuring the overlay
Add introductory Heading and Text using the provided fields. Adjust the position for the text using the Text position dropdown.
Choose your Overlay color and Text color by clicking the rounded-rectangle swatches.
Adjust the Overlay opacity using the provided slider.
0% would be fully transparent (disabled overlay), while 100% would be fully opaque (hidden image).