Collapsible tabs and FAQ header

Typically used for FAQs, enabling customers to see answers to common queries at a glance.

What is the collapsible tabs section?

The Collapsible tabs section is typically used with the FAQ header section for frequently asked questions (FAQs), enabling customers to see answers to common queries at a glance. A selection of questions, paragraphs and buttons can be used to provide additional support and guidance. It can be a time saver and reduce the post-purchase support customers may require. 

Collapsible tabs are a space efficient way to display information to customers. They can also be used to convey any content that would be preferable to reveal on click, rather than be immediately visible.

FAQ-no-sidebar.png

How to set up the collapsible tabs section

Steps

  1. Open the Theme Editor and add one or more Collapsible tabs sections.
  2. In the main Collapsible tabs settings add a Heading, for example 'Ordering'. 
  3. There are three types of blocks available:

    Question: The specific question, for example 'What size should I buy?' followed by the relevant answer which can include a metafield.

    Paragraph: More information that could include a metafield. 

    Button: This can be inserted to direct customers to any area of your store.

  4. Select Add block or choose one of the existing blocks available upon install.

Note

To add multiple headings and questions and answers of different types, add additional Collapsible tabs sections positioned directly underneath the first Collapsible tabs section.

What is the FAQ header section?

The FAQ header section is designed to be used in conjunction with Collapsible tabs sections. After a Collapsible tabs section, or sections, have been created, place the FAQ header section directly above them. This header section will then work together with the collapsible tabs positioned below, providing the customer with a search and index. 

FAQ-collapsible-inspire2.png

How to add an FAQ header section

Steps

  1. Open the Theme Editor and add the FAQ header section.
  2. Move the FAQ header directly above the Collapsible tabs section(s).
  3. In the main FAQ header settings, add a Title and choose whether this should be a primary heading (h1).
  4. Add a Description if needed to appear under the Title.
  5. Choose whether to Show search. This will search the Collapsible tabs section or sections immediately below the FAQ header section. 
  6. In the main FAQ header settings, an Index column can be added with it's own Heading. This extra index column is shown on larger screens. When selected, the FAQ content is moved to the right to make space for an Index column on the left. The index displays a list of each of the headings from the Collapsible tabs sections below it. 
Sign up for Shopify today for $1

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!

Contact us