Convert FAQ HTML to Liquid for Shopify

HTML structure

<div class="faq-item">
  <button class="faq-q">Shipping times?</button>
  <div class="faq-a">3–5 business days.</div>
</div>

Repeating .faq-item rows signal block candidates—the converter counts identical structures to propose a block type.

Liquid output

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

Static text becomes block.settings references inside a loop merchants control from the editor.

Schema settings

"blocks": [{
  "type": "faq_item",
  "name": "FAQ item",
  "settings": [
    { "type": "text", "id": "question", "label": "Question" },
    { "type": "richtext", "id": "answer", "label": "Answer" }
  ]
}]

Each block type exposes typed settings the theme editor renders as form fields.

Section settings

"settings": [
  { "type": "text", "id": "heading", "label": "Heading" },
  { "type": "checkbox", "id": "open_first", "label": "Open first item" }
]

Section-level settings control the module heading and accordion behavior independent of block rows.