Retina Templates: FAQ Page – Out of the Sandbox

List common customer questions and helpful answers using Retina's dynamic and engaging FAQ page template.

From your Online Store, create a new page and assign the template to it. Then use the theme editor to edit the question and answers, as well as customize the banner settings for your FAQ page.

customer_clicking_to_reveal_faq_answer_for_common_question.png

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 Page Blocks

Customize the Banner Settings

Click the FAQ section to open its settings.

click_faq_in_sidebar_to_open_retina_section_settings.png

Set up a banner image by adding the image, adjusting the banner layout, and configuring the overlay.

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).