FAQ

The FAQ template groups common questions into expandable answers so customers can scan topics without leaving the page. Use it for shipping, product care, ordering, and other repeat questions that need a structured destination.

Open the FAQ template

1. From Shopify admin, go to Online Store > Themes > Customize.
2. Use the page selector to open the page using the FAQ template.
3. Select the FAQ section.
4. Review both a multi-group FAQ and a single-group FAQ before saving.

Template order

The current saved FAQ template contains one section:

1. FAQ

The saved fixture currently contains three FAQ groups, with question items nested inside each group. The section schema allows up to 12 FAQ group blocks.

Heading

Eyebrow

• Controls: Optional short label above the FAQ heading.

Heading

• Controls: Main FAQ heading. The current default is Frequently asked questions.

Text

• Controls: Supporting rich text below the heading.

Layout

Content width

• Controls: Sets the width of the FAQ content area.
• Options: Narrow, Medium, or Page width. The current default is Medium.

Colors

Background color

• Controls: Sets the FAQ surface color.

Text color

• Controls: Sets the primary FAQ text color.

Check the pair together rather than judging either color in isolation.

Spacing

Section spacing

• Controls: Sets the FAQ section spacing to None, Small, Medium, or Large. The current default is Medium.

Top spacing

• Controls: Adds or removes top spacing. The current default is on.

Bottom spacing

• Controls: Adds or removes bottom spacing. The current default is on.

Blocks

FAQ group

Groups organise related questions. The FAQ section allows up to 12 groups.

• Group heading: The category heading shown above the group's questions. The current default is General questions.
• FAQ drawer blocks: Add question items inside the group.

FAQ drawer

Each group can contain question items.

• Question: The visible question heading. The current default is Question.
• Answer: Rich text shown when the question is opened. The current default supplies a short answer placeholder.
• Open by default: Opens the answer initially. The current default is off.

Keep one question per drawer and use group headings that describe a topic rather than repeating the question text.

Desktop and mobile behavior

The current FAQ section uses a grouped layout when multiple groups are present and a single-group layout when there is one group. On mobile, category navigation can become horizontally scrollable. A final guide should verify:

• group selection and active state;
• question opening and closing;
• keyboard focus and focus visibility;
• long answers, links, and rich text wrapping;
• the single-group and multi-group layouts at desktop and mobile widths.

Exact breakpoints and animation timing are intentionally not stated here.

Media recommendations

The FAQ section has no media setting. Keep answers self-contained and link to a related guide when an image or video is genuinely required.

Accessibility and motion

Use descriptive group and question headings. Verify that every question can be opened by keyboard, that the expanded state is announced correctly, and that focus remains visible. Check reduced-motion behavior before documenting animated disclosure transitions.

Common checks

• If category navigation is absent, confirm that more than one FAQ group exists and that the page is using the FAQ template.
• If an answer is not visible initially, review Open by default for that FAQ drawer.
• If a question appears under the wrong category, reorder the nested FAQ drawer block within its FAQ group.

Related guides

• Pages overview
• Rich text
• Support

[!NOTE] The labels, group limit, nested block names, and current saved template order above come from the current FAQ section and template schemas. Final keyboard, responsive, and disclosure behavior remains pending accepted browser verification.