FAQ
An accessible accordion with measured-height open and close animation. Each question block carries a question and an answer.
- Merchant-addable
- Yes
- Settings
- 22
- Block types
- 1
- Max blocks
- 12
- File
sections/faq.liquid
Used by default on: page.faq
Screenshots pending
Captures for FAQ at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
Product pages, a dedicated FAQ page, and anywhere a predictable objection needs answering.
Setting it up
- Add the section and write the heading and subheading. A new section starts with the FAQ page’s wording: Frequently asked questions, Care, considered, and seven sample questions about suitability, patch testing, layering, retinal, testing records, subscriptions, and shipping. Replace them with your own answers.
- Choose whether the first question opens by default — it is on by default, which helps people see the pattern.
- Add a Question block per entry, up to 12.
- To show a contact button, keep or change Link label (Contact the skin concierge by default) and choose a Link, such as your contact page. The button appears only once a link is set.
- With Show image on, upload an image. Mobile image ratio defaults to Square.
- Set Color and Padding.
Where the content comes from
Blocks own the questions and answers.
Notes and cautions
- Answer the objection, do not deflect it. An FAQ that avoids the shipping cost question makes the shipping cost look worse.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.
Content
Long answers show a short preview and a link that opens the full answer over the page.
Describes the questions for search engines. Only one FAQ section per page can supply it, so turn it off on a second section or when an app already adds it.
Media
4:5 aspect ratio recommended. A placeholder shows until you add an image.
Optional. Uses the desktop image when empty.
Appearance
Tints with the color scheme and sits behind the content.
Uses the theme's animation style and respects reduced motion.
Spacing
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.