Shopify FAQ Accordion

About this module

A Shopify FAQ section using blocks — merchants add question/answer blocks from the customizer.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-faq, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-faq` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <section class="mh-faq">
     {% if section.settings.heading != blank %}
       <h2 class="mh-faq-title">{{ section.settings.heading }}</h2>
     {% endif %}
     <div class="mh-faq-list">
       {% for block in section.blocks %}
         <div class="mh-faq-item" {{ block.shopify_attributes }}>
           <button class="mh-faq-head" aria-expanded="false" aria-controls="mh-faq-{{ block.id }}">
             {{ block.settings.question }}
             <span class="mh-faq-plus">+</span>
           </button>
           <div id="mh-faq-{{ block.id }}" class="mh-faq-body" hidden>
             <div class="mh-faq-answer">{{ block.settings.answer }}</div>
           </div>
         </div>
       {% endfor %}
     </div>
   </section>
   
   <script>
     document.querySelectorAll('.mh-faq-head').forEach(function (btn) {
       btn.addEventListener('click', function () {
         var body = document.getElementById(btn.getAttribute('aria-controls'));
         var open = btn.getAttribute('aria-expanded') === 'true';
         btn.setAttribute('aria-expanded', String(!open));
         body.hidden = open;
       });
     });
   </script>
   
   {% schema %}
   {
     "name": "MH FAQ",
     "tag": "section",
     "settings": [
       { "type": "text", "id": "heading", "label": "Heading", "default": "Frequently asked questions" }
     ],
     "max_blocks": 12,
     "blocks": [
       {
         "type": "question",
         "name": "Question",
         "settings": [
           { "type": "text", "id": "question", "label": "Question", "default": "Shipping time?" },
           { "type": "richtext", "id": "answer", "label": "Answer", "default": "<p>Orders ship within 2 business days.</p>" }
         ]
       }
     ],
     "presets": [{ "name": "MH FAQ", "category": "ModuleHarbor", "blocks": [
       { "type": "question" }, { "type": "question" }
     ] }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.