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.
- 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.
- 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
Answers longer than a few lines are trimmed, with 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.