Convert accordion HTML to Liquid for Shopify

HTML structure

<details class="accordion-item">
  <summary>Materials</summary>
  <p>100% organic cotton.</p>
</details>

details/summary rows are ideal accordion candidates—one block per collapsible panel.

Liquid output

"{% for block in section.blocks %}"
  <details class="accordion-item" {{ block.shopify_attributes }}>
    <summary>{{ block.settings.title }}</summary>
    <div>{{ block.settings.content }}</div>
  </details>
{% endfor %}

Static title and body become block.settings; shopify_attributes links editor to blocks.

Block schema

"type": "accordion_item",
"settings": [
  { "type": "text", "id": "title", "label": "Title" },
  { "type": "richtext", "id": "content", "label": "Content" }
]

Each panel exposes a title field and richtext body in the theme editor sidebar.

Section settings

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

Section settings control module heading and default open state for the first row.