Add a FAQ Accordion Section to Any Shopify Theme with Liquid

Learn how to add a lightweight FAQ accordion to any Shopify theme using only Liquid, HTML, and CSS—no apps needed. This step‑by‑step guide shows you the exact add faq accordion section shopify liquid recipe you can drop into Dawn, Turbo, or any custom theme and start editing questions right from the theme editor.

Why Build Your Own FAQ Accordion?

Pre‑made apps often bloat your store with extra scripts, slow mobile performance, and lock you into recurring fees. By coding the accordion yourself you keep full control over design, maintain fast load times, and avoid costly subscriptions.

Step‑by‑Step: Create the Liquid Snippet

First, create a new snippet called faq-accordion.liquid. In Shopify admin go to Online Store > Themes > Actions > Edit code, click Add a new snippet, and name it exactly faq-accordion.

<div class="faq-accordion">
  {% for block in section.blocks %}
    <div class="faq-item">
      <button class="faq-question" type="button">
        {{ block.settings.question }}
      </button>
      <div class="faq-answer">
        {{ block.settings.answer }}
      </div>
    </div>
  {% endfor %}
</div>

This loop pulls each question and answer from the section’s blocks, so you can add as many FAQs as you need without hard‑coding.

Add Schema for Easy Editing

Right after the markup, insert the schema block so the editor displays a repeater for questions and answers.

{% schema %}
{
  "name": "FAQ Accordion",
  "settings": [],
  "blocks": [
    {
      "type": "faq",
      "name": "FAQ",
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "Question"
        },
        {
          "type": "textarea",
          "id": "answer",
          "label": "Answer"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ Accordion"
    }
  ]
}
{% endschema %}

This shopify faq accordion schema markup makes the section feel like a native Shopify component, not a hack.

Style with CSS

Create (or edit) faq-accordion.css in your theme’s assets folder and add these rules.

.faq-accordion .faq-item { margin-bottom: 1rem; }
.faq-accordion .faq-question {
  width: 100%;
  text-align: left;
  background: #f7f7f7;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  font-weight: bold;
}
.faq-accordion .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #fff;
  padding: 0 0.75rem;
}
.faq-accordion .faq-item.active .faq-answer {
  max-height: 500px; /* big enough for most answers */
  padding-top: 0.5rem;
}

The CSS handles the smooth hide/show effect, delivering the how to add faq accordion to shopify theme without app functionality with zero extra JavaScript weight.

Add the Tiny Toggle Script

Place this script just before the closing </div> in the snippet.

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.faq-question').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var item = btn.parentNode;
      item.classList.toggle('active');
    });
  });
});
</script>

Because the script runs only where the snippet appears, it won’t affect overall store speed.

Insert the Section into Your Theme

Return to the theme editor, add a new section, choose Custom liquid (or the section name you gave it), and paste:

{% render 'faq-accordion' %}

Save, and the accordion appears instantly. You can now start adding questions directly from the editor.

Customization Tips

• Open first item by default – add class="active" to the first .faq-item in the loop.
• Brand colors – adjust the background of .faq-question or the border of .faq-answer in the CSS file.
• SVG icons – insert a <span class="icon">▼</span> inside the button and rotate it with CSS when the item is active for a polished UI.

All tweaks stay within the single snippet, making reuse across stores or pages painless.

Final Testing & Launch

Test the accordion on a draft page, verify mobile collapsibility, and confirm no console errors. Once satisfied, publish to your live FAQ page. You’ll notice faster load times because you’ve eliminated bulky app scripts while retaining full design control.