How To Build Dynamic Shopify Blocks

What dynamic blocks solve

Twelve hardcoded FAQ rows break the day merchants need row thirteen. Blocks turn repeatable HTML into rows merchants add, remove, and reorder—each with its own settings and {% schema %} type.

Block schema design

Define block types in the blocks array inside {% schema %}. Each type needs a name merchants understand—FAQ item, Slide, Tab panel—and settings for that row's content.

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

Liquid block loops

{% for block in section.blocks %}
  <div {{ block.shopify_attributes }}>
    {{ block.settings.question }}
  </div>
{% endfor %}

Always include block.shopify_attributes on the wrapper element. Without it, the theme editor cannot highlight individual blocks.

Slider blocks

Each slide is a block with image_picker, heading, and url settings. Section-level settings control autoplay and arrows. Convert slider HTML with slider conversion guide.

FAQ and accordion blocks

FAQ and accordion patterns share block architecture—title plus body settings per row. Use details/summary for accessible accordions. See FAQ conversion and accordion conversion.

Tab blocks

Tab panels map to blocks with label and richtext content. Section settings control tab style. Merchants rename tabs and update policy copy without code changes.

max_blocks and performance

Set max_blocks to cap row count—especially on sliders with large images. Twenty blocks with full-resolution images slow the editor and storefront.

Generating blocks from HTML

HTML to Liquid Converter detects repeating DOM structures and exports Block mode with schema. Pair with Blocks Guide and Flat vs Block for mode selection.

Block architecture on client FAQ modules

Merchants reorder FAQ rows after legal review—blocks must survive drag-and-drop. Each row needs {{ block.shopify_attributes }} on the wrapper, stable block types, and merchant-readable labels in schema.

Filtering block types in Liquid

{% for block in section.blocks %}
  {% if block.type == 'faq_item' %}
    <details {{ block.shopify_attributes }}>
      <summary>{{ block.settings.question | escape }}</summary>
      <div class="rte">{{ block.settings.answer }}</div>
    </details>
  {% endif %}
{% endfor %}

Multiple block types in one section require type checks inside the loop.

Slider and tab specifics

Sliders: section-level autoplay settings + image block rows with max_blocks. Tabs: block per panel; avoid embedding unique scripts per block—use one section script reading data attributes.

QA before merge

1. Add block, delete block, reorder blocks in editor
2. Confirm storefront updates match editor order
3. Test empty block list state
4. Mobile tap targets on accordion handles

Converter Block mode: workspace. Agency framework: flat vs block framework.