---
title: Add a FAQ Accordion Section to Any Shopify Theme with Liquid
siteUrl: https://logzly.com/shopifystylelab
author: shopifystylelab (Shopify Style Lab)
date: 2026-07-15T03:00:39.943522
tags: [shopify, liquid, faqaccordion]
url: https://logzly.com/shopifystylelab/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`.  

```liquid
<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.  

```liquid
{% 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.  

```css
.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.  

```liquid
<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:  

```liquid
{% 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.