Ship product information tabs merchants can reorder

Tab structure sketch (ARIA-compliant)

{% assign first = true %}
<div class="product-tabs" role="tablist" aria-label="Product information">
  {% for block in section.blocks %}
    {% assign tab_id = 'Tab-' | append: section.id | append: '-' | append: block.id %}
    {% assign panel_id = 'Panel-' | append: section.id | append: '-' | append: block.id %}
    <button
      id="{{ tab_id }}"
      role="tab"
      aria-selected="{% if first %}true{% else %}false{% endif %}"
      aria-controls="{{ panel_id }}"
      tabindex="{% if first %}0{% else %}-1{% endif %}"
      data-tab-trigger
    >
      {{ block.settings.tab_label | escape }}
    </button>
    {% assign first = false %}
  {% endfor %}
</div>

{% assign first = true %}
{% for block in section.blocks %}
  {% assign panel_id = 'Panel-' | append: section.id | append: '-' | append: block.id %}
  <div
    id="{{ panel_id }}"
    role="tabpanel"
    {% unless first %}hidden{% endunless %}
    data-tab-panel
    {{ block.shopify_attributes }}
  >
    {{ block.settings.content }}
  </div>
  {% assign first = false %}
{% endfor %}

First tab selected by default. Panel visibility synced with aria-selected. Block attributes let merchants reorder.

Schema sketch — tab panel blocks

{
  "name': 'Product tabs",
  "settings": [
    {
      "type': 'select",
      "id': 'mobile_behavior",
      "label': 'Mobile display",
      "options": [
        { "value": "tabs", "label": "Scrollable tabs" },
        { "value": "accordion", "label": "Stacked accordion" }
      ],
      "default': 'tabs"
    }
  ],
  "blocks": [
    {
      "type': 'tab",
      "name': 'Tab panel",
      "settings": [
        {
          "type': 'text",
          "id': 'tab_label",
          "label': 'Tab label",
          "default': 'Description"
        },
        {
          "type': 'richtext",
          "id': 'content",
          "label': 'Panel content"
        }
      ]
    }
  ],
  "max_blocks": 6,
  "presets": [
    {
      "name': 'Product tabs",
      "blocks": [
        { "type": "tab", "settings": { "tab_label": "Description" } },
        { "type": "tab", "settings": { "tab_label": "Shipping & returns" } },
        { "type": "tab", "settings": { "tab_label": "Reviews" } }
      ]
    }
  ]
}

Three-tab preset teaches the pattern. mobile_behavior setting adapts UI. max_blocks prevents label overflow.