F12 Labs
EN
Contact
← All posts

How to make an FAQ page with accordions on Shopify

Shopify's page editor has no accordion, so FAQ pages end up as one long scroll. The native options (the HTML view, a theme's Collapsible content section on its own page template), where each stops, whether FAQ schema still matters, and how to build an FAQ page without theme code.

The Aedify builder with a palette of layout, text, media and product elements on the left, including Accordion and Tabs, and a two-column row on the canvas

Every store gets the same questions: how long shipping takes, whether returns are free, which size to pick. An FAQ page answers them before they reach your inbox. Shoppers scan it for their question, open the answer, and move on, which is why FAQ pages are usually built as an accordion: a list of questions that open and close.

Shopify's page editor doesn't have one. Here's what you can do natively, where each route stops, and how to build an FAQ page without editing theme code.

What the page editor gives you

Shopify pages use the rich text editor. It does paragraphs, headings, lists, links, images, tables and video (Rich text editor). There's no accordion, collapsible section or tabs among its options.

So the simplest FAQ page is a list: each question as a heading, its answer underneath. It works, it's easy to edit, and search engines read every word. With more than a dozen questions, though, shoppers scroll a long way to find theirs.

The HTML view

The editor has an HTML view, where Shopify says "you can make many changes to the content" (Rich text editor). Browsers have an accordion built in, the <details> and <summary> elements:

<details>
  <summary>How long does shipping take?</summary>
  <p>Most orders arrive in 3–5 business days.</p>
</details>

Each question needs that markup. The catches:

  • Every edit is in HTML. Adding a question or fixing a typo means editing code, and an easy place to break the page.
  • Styling is up to your theme. Most themes don't style <details> in page content, so you get the browser's plain triangle. Making it look like your store means CSS.
  • Test it. The editor doesn't offer these elements itself, so check the page on your store after saving, and again after editing in the visual view.

A theme section on its own page template

Many Online Store 2.0 themes have an accordion section. In Dawn it's Collapsible content: a heading, then Collapsible row blocks, each with a Heading, Row content, an optional icon, and an Open first row setting for the section. A row can also take its text from a page, with Row content from page (Dawn's section code).

Theme sections go on templates, not on single pages, and "when you edit a template, your changes apply to every page that uses the template" (Templates). So for an FAQ page:

  1. In the theme editor, create a new page template (for example faq) based on the default page template.
  2. Add the Collapsible content section to it and fill in a row per question.
  3. In Online Store → Pages, open your FAQ page and choose the new template under Theme template.

That gives you a styled accordion with no code. The limits:

  • The questions live in the theme, not the page. You edit them in the theme editor, not where you edit other pages, and when you switch themes, they stay behind in the old one.
  • The design is the theme's. One layout, the theme's styles, and whatever settings the section has. Not every theme has such a section, and they differ between themes.
  • One template per accordion page. A second accordion page, such as a shipping guide, needs its own template, or it shows the same questions.
  • Answers are text. A row holds formatted text; an image beside the answer, a button styled like your theme's or a product grid isn't part of it.

Templates also have their limits: up to 25 sections each (Sections and blocks) and a store can have 1,000 templates in total (Templates), plenty for an FAQ.

What about FAQ schema?

FAQ structured data used to put your questions under your page in Google's results. Google restricted that to "well-known, authoritative government and health websites" in 2023, and the feature "is no longer shown in Google Search results" as of June 2026 (FAQ structured data).

So don't build your FAQ page around rich results. What still matters is the page itself: clear questions as headings or titles, real answers in the page's HTML, and a page shoppers and search engines can read.

Where each one stops

You want Plain headings HTML view Theme section
Questions that open and close ✓ ✓
Styled like your store ✓ With CSS ✓
Edited where you edit the page ✓ In HTML In the theme editor
Images, buttons or products in an answer ✓ With HTML
Survives a theme switch ✓ ✓
No code ✓ ✓

What's missing is an accordion you place on the page itself: edited visually, styled by your theme, saved with the page.

Building an FAQ page in Aedify

That's how Aedify, our page builder, handles it. FAQ pages are ordinary Shopify pages, and the accordion is part of the page.

  • Start from the FAQ starter. Under Insert template, FAQ accordion adds a heading and four sample questions, set to open one at a time. Replace the text with your own.
  • Edit on the page. Type each question in its title bar and the answer underneath. Add item adds another, up to 50.
  • Put anything in an answer. Each answer holds rows like the rest of the page: text, an image, a button to your returns page, even a live product grid.
  • One open at a time, or several, and any item Open by default.
  • No script. The accordion is the browser's own <details> element, styled by Aedify. Each question is a button screen readers announce as expanded or collapsed, and every answer is in the page's HTML, where search engines read it.
  • Tabs, too. The same works as Tabs, for shipping, returns and sizing side by side.
  • It stays in Shopify. The page is a regular Shopify page. If you remove the app, the questions and answers stay, and the accordion keeps opening and closing, unstyled.

Setting it up

  1. Install Aedify and run through Storefront setup on its home page. The styles embed makes the accordion look right.
  2. Click Create → Page, title it "FAQ" (the title sets the address, /pages/faq), and click Create and open builder.
  3. Click Insert template and pick FAQ accordion, or drag an Accordion from the palette.
  4. Write your questions and answers, tick Visible on storefront, and save.
  5. Add the page to your menu under Online Store → Navigation.

Accordion and tabs covers every setting, and Creating pages and blog posts covers the page's title, address and SEO.

Tips for a better FAQ page

  • Write questions the way shoppers ask them. "Can I return a sale item?" beats "Returns policy (sale items)". Pull them from your support inbox.
  • Answer in the first sentence. "Yes, within 30 days." Then the detail.
  • Group long lists. Shipping, returns, sizing, payments: a heading per group, an accordion under each.
  • Keep it current. An FAQ with last year's shipping times does more harm than none. Review it when a policy changes.
  • Link out for the details. Answer briefly, then link to the full shipping or returns policy page.
  • Don't hide what everyone needs. If every shopper asks it, put it on the product page too.

Shopify behavior checked on 30 October 2026 against Shopify's documentation: Rich text editor, Templates and Sections and blocks; Dawn's Collapsible content section from its source on GitHub; Google's FAQ structured data page.