FAQ

An accessible accordion with measured-height open and close animation. Each question block carries a question and an answer.

Merchant-addable
Yes
Settings
10
Block types
1
File
sections/faq.liquid

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

  1. Add the section and write the heading and subheading.
  2. Choose whether the first question opens by default — it is on by default, which helps people see the pattern.
  3. Add a Question block per entry.
  4. 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.

HeadingText
ID
heading
Default
Frequently asked questions
Heading sizeDropdown
ID
heading_size
Default
Medium
  • Smallh2
  • Mediumh1
  • Largeh0
SubheadingText
ID
subheading
Header alignmentDropdown
ID
header_alignment
Default
Left
  • Leftleft
  • Centercenter
Open first question by defaultCheckbox
ID
open_first
Default
On

Color

Color schemeColor scheme
ID
color_scheme
Default
scheme-1

Padding

Top paddingSlider
ID
padding_top
Default
52
Range
0px to 100px, in steps of 4px
Bottom paddingSlider
ID
padding_bottom
Default
52
Range
0px to 100px, in steps of 4px

Blocks

Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.

Question question

QuestionText
ID
question
Default
How long does shipping take?
AnswerRich text
ID
answer
Default
<p>Share your shipping timelines, return policy, or any other information your customers may want to know.</p>