Free FAQ Accordion Section for ShopifyNo app. Copy, paste, done.

{%- liquid
  assign faq_group = 'sf-faq-' | append: section.id
  assign has_items = false
  for block in section.blocks
    if block.settings.question != blank
      assign has_items = true
      break
    endif
  endfor
-%}

{%- if has_items or request.design_mode -%}
  <sf-faq-accordion
    class="sf-faq"
    style="--sf-faq-text: {{ section.settings.text_color }}; --sf-faq-accent: {{ section.settings.accent_color }}; --sf-faq-bg: {{ section.settings.background_color }}; --sf-faq-pt: {{ section.settings.padding_top }}px; --sf-faq-pb: {{ section.settings.padding_bottom }}px;"
  >
    <div class="sf-faq__inner">
      {%- if section.settings.heading != blank -%}
        <h2 class="sf-faq__heading">{{ section.settings.heading | escape }}</h2>
      {%- endif -%}
      {%- if section.settings.intro != blank -%}
        <div class="sf-faq__intro">{{ section.settings.intro }}</div>
      {%- endif -%}

      {%- if has_items -%}
        <div class="sf-faq__list">
          {%- for block in section.blocks -%}
            {%- if block.settings.question == blank -%}{%- continue -%}{%- endif -%}
            <details
              class="sf-faq__item"
              {% if section.settings.single_open %}name="{{ faq_group }}"{% endif %}
              {% if forloop.first and section.settings.open_first %}open{% endif %}
              {{ block.shopify_attributes }}
            >
              <summary class="sf-faq__question">
                <span>{{ block.settings.question | escape }}</span>
                <svg class="sf-faq__icon" aria-hidden="true" focusable="false" viewBox="0 0 20 20" width="20" height="20">
                  <path d="M5 7.5 10 12.5 15 7.5" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </summary>
              <div class="sf-faq__answer">{{ block.settings.answer }}</div>
            </details>
          {%- endfor -%}
        </div>
      {%- else -%}
        <p class="sf-faq__empty">Add a question block to show your FAQ.</p>
      {%- endif -%}
    </div>
  </sf-faq-accordion>
{%- endif -%}

{%- if has_items and section.settings.output_schema -%}
  {%- assign ld_started = false -%}
  {%- capture ld_entries -%}
    {%- for block in section.blocks -%}
      {%- assign ld_question = block.settings.question | strip_html | strip -%}
      {%- assign ld_answer = block.settings.answer | replace: '</p>', '</p> ' | strip_html | strip -%}
      {%- if ld_question != blank and ld_answer != blank -%}
        {%- if ld_started -%},{%- endif -%}
        {
          "@type": "Question",
          "name": {{ ld_question | json }},
          "acceptedAnswer": { "@type": "Answer", "text": {{ ld_answer | json }} }
        }
        {%- assign ld_started = true -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endcapture -%}
  {%- if ld_started -%}
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [{{ ld_entries }}]
      }
    </script>
  {%- endif -%}
{%- endif -%}

{% stylesheet %}
.sf-faq { display: block; color: var(--sf-faq-text); background: var(--sf-faq-bg); padding: var(--sf-faq-pt) 20px var(--sf-faq-pb); }
.sf-faq__inner { max-width: 768px; margin: 0 auto; }
.sf-faq__heading { margin: 0 0 12px; font-size: clamp(24px, 19px + 1.2vw, 36px); line-height: 1.15; letter-spacing: -0.01em; }
.sf-faq__intro { margin: 0 0 24px; opacity: 0.8; }
.sf-faq__intro > :first-child { margin-top: 0; }
.sf-faq__intro > :last-child { margin-bottom: 0; }
.sf-faq__list { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.sf-faq__item { border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.sf-faq__question { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 1.1em 0; cursor: pointer; font-weight: 600; list-style: none; }
.sf-faq__question::-webkit-details-marker { display: none; }
.sf-faq__question:focus-visible { outline: 2px solid var(--sf-faq-accent); outline-offset: 4px; border-radius: 2px; }
.sf-faq__icon { flex: none; color: var(--sf-faq-accent); transition: transform 0.2s ease; }
.sf-faq__item[open] .sf-faq__icon { transform: rotate(180deg); }
.sf-faq__answer { padding: 0 0 20px; opacity: 0.85; }
.sf-faq__answer > :first-child { margin-top: 0; }
.sf-faq__answer > :last-child { margin-bottom: 0; }
.sf-faq__empty { margin: 0; padding: 24px; border: 1px dashed currentColor; border-radius: 8px; text-align: center; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .sf-faq__icon { transition: none; } }
{% endstylesheet %}

{% javascript %}
if (!customElements.get('sf-faq-accordion')) {
  class SfFaqAccordion extends HTMLElement {
    connectedCallback() {
      this.onBlockSelect = (event) => {
        if (!this.contains(event.target)) return;
        const item = event.target.closest('.sf-faq__item');
        if (item) item.open = true;
      };
      document.addEventListener('shopify:block:select', this.onBlockSelect);
    }

    disconnectedCallback() {
      document.removeEventListener('shopify:block:select', this.onBlockSelect);
    }
  }
  customElements.define('sf-faq-accordion', SfFaqAccordion);
}
{% endjavascript %}

{% schema %}
{
  "name": "SF FAQ accordion",
  "tag": "section",
  "class": "sf-faq-section",
  "disabled_on": { "groups": ["header", "footer"] },
  "max_blocks": 30,
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Frequently asked questions" },
    { "type": "richtext", "id": "intro", "label": "Intro text" },
    { "type": "checkbox", "id": "open_first", "label": "Open the first question", "default": true },
    { "type": "checkbox", "id": "single_open", "label": "Only one answer open at a time", "default": false },
    {
      "type": "checkbox",
      "id": "output_schema",
      "label": "Add FAQ structured data",
      "info": "Adds FAQPage JSON-LD for search engines. Turn this off if another section on the same page already adds FAQ structured data.",
      "default": true
    },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#121212" },
    { "type": "color", "id": "accent_color", "label": "Accent", "default": "#121212" },
    { "type": "color", "id": "background_color", "label": "Background", "default": "#ffffff" },
    { "type": "header", "content": "Spacing" },
    { "type": "range", "id": "padding_top", "label": "Top padding", "min": 0, "max": 100, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding", "min": 0, "max": 100, "step": 4, "unit": "px", "default": 48 }
  ],
  "blocks": [
    {
      "type": "question",
      "name": "Question",
      "settings": [
        { "type": "text", "id": "question", "label": "Question", "default": "Do you ship internationally?" },
        { "type": "richtext", "id": "answer", "label": "Answer", "default": "<p>Yes. We ship to most countries, and duties and taxes are shown at checkout.</p>" }
      ]
    }
  ],
  "presets": [
    {
      "name": "SF FAQ accordion",
      "blocks": [
        { "type": "question", "settings": { "question": "How long does shipping take?", "answer": "<p>Orders ship within 1–2 business days. Delivery usually takes 3–5 business days in the US.</p>" } },
        { "type": "question", "settings": { "question": "What is your return policy?", "answer": "<p>Unused items can be returned within 30 days for a full refund. Start a return from your order confirmation email.</p>" } },
        { "type": "question", "settings": { "question": "Do you ship internationally?", "answer": "<p>Yes. We ship to most countries, and duties and taxes are shown at checkout.</p>" } },
        { "type": "question", "settings": { "question": "How do I care for my product?", "answer": "<p>Wipe clean with a damp cloth and let it air dry. Avoid direct heat.</p>" } }
      ]
    }
  ]
}
{% endschema %}