Shopify FAQ Section Generator

{%- comment -%}
  FAQ accordion, built on native <details>/<summary> (no JavaScript needed for the basic open/close behavior).
{%- endcomment -%}
{%- if section.blocks.size > 0 -%}
  {%- style -%}
  .ea-faq{max-width:760px;margin:0 auto}
  .ea-faq__heading{font-size:1.5em;margin:0 0 1rem}
  .ea-faq__list{display:flex;flex-direction:column;gap:.5rem}
  .ea-faq__item{border:1px solid #e5e5e5;border-radius:8px;padding:0}
  .ea-faq__item>summary{cursor:pointer;padding:.9em 1.1em;font-weight:600;list-style:none}
  .ea-faq__item>summary::-webkit-details-marker{display:none}
  .ea-faq__item>summary::after{content:'+';float:right;font-weight:400}
  .ea-faq__item[open]>summary::after{content:'−'}
  .ea-faq__a{padding:0 1.1em 1em;color:#444;line-height:1.5}
  .ea-faq__a p{margin:0 0 .6em}
  {%- endstyle -%}
  <div class="ea-faq">
    <h2 class="ea-faq__heading">{{ section.settings.heading | escape }}</h2>
    <div class="ea-faq__list">
      {%- for block in section.blocks -%}
        <details class="ea-faq__item"{% if section.settings.open_first and forloop.first %} open{% endif %} {{ block.shopify_attributes }}>
          <summary class="ea-faq__q">{{ block.settings.question | escape }}</summary>
          <div class="ea-faq__a">{{ block.settings.answer }}</div>
        </details>
      {%- endfor -%}
    </div>
  </div>
  {%- if section.settings.add_schema -%}
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
        {%- for block in section.blocks -%}
          {
            "@type": "Question",
            "name": {{ block.settings.question | strip_newlines | strip_html | json }},
            "acceptedAnswer": { "@type": "Answer", "text": {{ block.settings.answer | strip_newlines | strip_html | json }} }
          }{% unless forloop.last %},{% endunless %}
        {%- endfor -%}
      ]
    }
    </script>
  {%- endif -%}
  {%- if section.settings.only_one_open -%}
    <script>
      document.querySelectorAll('.ea-faq').forEach(function (wrap) {
        wrap.querySelectorAll('.ea-faq__item').forEach(function (item) {
          item.addEventListener('toggle', function () {
            if (!item.open) return;
            wrap.querySelectorAll('.ea-faq__item').forEach(function (other) { if (other !== item) other.open = false; });
          });
        });
      });
    </script>
  {%- endif -%}
{%- endif -%}

{% schema %}
{
  "name": "FAQ section",
  "tag": "section",
  "class": "ea-faq-section",
  "max_blocks": 30,
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Frequently asked questions"
    },
    {
      "type": "checkbox",
      "id": "open_first",
      "label": "Open the first question by default",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "only_one_open",
      "label": "Close other questions when one opens",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "add_schema",
      "label": "Add FAQPage structured data",
      "default": true,
      "info": "Can make questions eligible for an expandable result in Google Search."
    }
  ],
  "blocks": [
    {
      "type": "question",
      "name": "Question",
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "Question",
          "default": "Question"
        },
        {
          "type": "richtext",
          "id": "answer",
          "label": "Answer",
          "default": "<p>Answer</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ section",
      "blocks": [
        {
          "type": "question",
          "settings": {
            "question": "Do you ship internationally?",
            "answer": "<p>Yes, we ship to over 30 countries. Rates are calculated at checkout.</p>"
          }
        },
        {
          "type": "question",
          "settings": {
            "question": "What's your return window?",
            "answer": "<p>30 days from delivery, unworn and with tags attached.</p>"
          }
        },
        {
          "type": "question",
          "settings": {
            "question": "How do I track my order?",
            "answer": "<p>You&#39;ll get a tracking link by email as soon as it ships.</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}