Generate FAQ Accordion Section

Build an expandable FAQ accordion with smooth animations, Schema.org markup for SEO, rich text answers, and keyboard accessibility.

View as Markdown

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

Create an FAQ accordion block:

Features:

  Expandable/collapsible questions
  Smooth open/close animation
  Plus/minus or arrow icons
  Only one open at a time (optional setting)
  Rich text support for answers


Settings for each FAQ item:

  Question text
  Answer text (rich text)
  Default open state


Section settings:

  Section heading
  Heading alignment
  Background color
  Border style between items
  Icon style (plus/arrow/chevron)
  Allow multiple open toggle


Requirements:

  Support for up to 15 FAQ items
  Schema.org FAQ markup for SEO
  Accessible keyboard navigation
  Mobile optimized


Generate the complete Liquid, CSS, and JavaScript for this as a section I can paste into my own theme for my product and landing pages.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/faq-accordion.liquid), paste the generated code in, and save. Then open the theme editor on the product or landing page you want it on, and use “Add section” to place the FAQ accordion.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions