Convert tabs HTML to Liquid for Shopify

HTML structure

<div class="tabs">
  <button data-tab="desc">Description</button>
  <div id="desc">Product details here.</div>
</div>

Tab triggers paired with panel divs map to block.settings.label and block.settings.content.

Liquid output

"{% for block in section.blocks %}"
  <button>{{ block.settings.label }}</button>
  <div>{{ block.settings.content }}</div>
{% endfor %}

Each tab panel renders from block settings inside a loop merchants control.

Block schema

"type": "tab_panel",
"settings": [
  { "type": "text", "id": "label", "label": "Tab label" },
  { "type": "richtext", "id": "content", "label": "Content" }
]

Block types define per-tab label and body fields in the theme editor.

Section settings

"settings": [
  { "type": "text", "id": "heading", "label": "Section heading" },
  { "type": "select", "id": "style", "label": "Tab style",
    "options": [{"value":"underline","label":"Underline"}] }
]

Section-level settings control heading and visual style across all tabs.