How To Build Dynamic Shopify Blocks

What dynamic blocks solve

Static sections with twelve hardcoded FAQ rows frustrate merchants. Dynamic blocks let them add row thirteen without a developer. Each block is a row in the theme editor—slides, FAQ items, feature cards, tab panels—with its own settings.

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

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