FAQ

Accordion-style Q&A section with SEO-friendly schema markup.

📁 sections/faq.liquid

Quick Setup

  1. Add section → FAQ
  2. Add Question & Answer blocks
  3. Optionally add Category heading blocks to group related questions

Section Settings

Content

SettingTypeDefaultDescription
Headingtext-Optional section heading displayed above the FAQ list.

Colors — Default State

Customize the appearance of FAQ items in their collapsed (default) state:

SettingTypeDefaultDescription
Color schemecolor_schemeBackground 1Use a predefined color scheme from theme settings.
Item backgroundcolor_backgroundTransparentBackground color of collapsed FAQ items.
Textcolor#111111Text color for questions.
Arrow iconcolor#111111Color of the expand/collapse arrow.
Arrow backgroundcolor#ffffffBackground color of the arrow button.
Arrow bordercolor#e5e5e5Border color of the arrow button.

Colors — Open State

Customize the appearance of FAQ items when expanded:

SettingTypeDefaultDescription
Item backgroundcolor_backgroundTransparentBackground color of expanded FAQ items.
Textcolor#111111Text color when expanded.
Arrow iconcolor#111111Arrow color when expanded.
Arrow backgroundcolor#ffffffArrow button background when expanded.
Arrow bordercolor#111111Arrow button border when expanded.

Spacing

SettingTypeDefaultDescription
Desktop top/bottomrange0pxMargins on desktop screens.
Mobile top/bottomrange0pxMargins on mobile screens.
Include top paddingcheckboxfalseAdd padding above the FAQ content.

Block Types

Category Heading

Optional block to group related questions under a heading.

SettingTypeDefaultDescription
Titletext-Category name (e.g., 'Shipping', 'Returns', 'Product Care').

Question & Answer

The main FAQ item block.

SettingTypeDefaultDescription
Questiontext-The question text displayed in the accordion header.
Answerrichtext-The answer content revealed when expanded. Supports rich text formatting.
Default iconimage-Optional icon shown when the FAQ item is collapsed.
Open iconimage-Optional icon shown when the FAQ item is expanded.

Recommended Categories

Organize your FAQs into logical groups:

đŸ“Ļ

Shipping

How long does shipping take?, Do you ship internationally?

↩ī¸

Returns

What is your return policy?, How do I start a return?

📋

Orders

Can I modify my order?, How do I track my order?

🏷ī¸

Products

What materials do you use?, How do I care for this item?

đŸ’ŗ

Payments

What payment methods accepted?, Is my payment secure?

👤

Account

How do I create an account?, How do I reset my password?

Best Practices

Content Tips

  1. Keep questions conversational — Write as customers would ask
  2. Be concise in answers — Answer directly, then add details
  3. Use rich text — Add links, bullet points, and formatting for readability
  4. Order by importance — Put most common questions first
  5. Limit to 10-15 questions — Too many FAQs become overwhelming

Design Tips

  1. Use categories sparingly — 2-4 categories is ideal
  2. Match your brand colors — Customize the open/closed states
  3. Consider contrast — Ensure text is readable against backgrounds
  4. Use icons for visual interest — Custom icons can reinforce your brand

SEO Benefits

FAQ sections are excellent for SEO:

  • Questions often match search queries
  • Google may display FAQ content in search results
  • Helps target long-tail keywords

Accessibility Features

The FAQ section includes built-in accessibility:

  • ARIA attributes — Proper aria-expanded and aria-controls attributes
  • Keyboard navigation — Items can be expanded/collapsed via Enter or Space
  • Screen reader support — Questions and answers are properly associated
  • Focus management — Clear focus states for keyboard users

Troubleshooting

FAQ items not expanding

  • Ensure both Question and Answer fields are filled in
  • Check for JavaScript errors in the browser console
  • Verify no conflicting scripts are blocking the accordion

Icons not showing

  • Upload icons to both Default and Open icon fields for best results
  • Recommended size: 48×48px or 64×64px
  • Use PNG with transparency for best results

Colors not applying

  • Check that colors are actually set (not left empty)
  • Some color settings only apply when the item is in the corresponding state
  • Try refreshing the Theme Editor