Dynamic Shopify blocks guide

What blocks solve

Section settings work for fixed content—one heading, one CTA, one background image. Blocks solve repeatable content: FAQ item seven, slide four, feature card twelve. Each block is a row merchants manage independently in the theme editor sidebar.

Block architecture in Liquid

Schema defines block types with names and per-block settings. Liquid loops over section.blocks, reads block.settings, and outputs block.shopify_attributes on wrappers for editor integration.

{% for block in section.blocks %}
  <div class="row" {{ block.shopify_attributes }}>
    {% case block.type %}
      {% when 'slide' %}
        {{ block.settings.image | image_tag }}
      {% when 'faq_item' %}
        <h3>{{ block.settings.question }}</h3>
    {% endcase %}
  </div>
{% endfor %}

FAQ blocks

FAQ blocks carry question (text) and answer (richtext) settings. Merchants add rows as support policies change. Convert FAQ HTML with /convert-faq-html-to-liquid or Block mode in /converter.

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

Slider blocks

Each slide is a block with image_picker, heading, body, and url settings. Section-level settings control autoplay and navigation. See /convert-slider-html-to-liquid for conversion patterns.

Tab blocks

Tab panels use blocks with label and richtext content. Merchants rename tabs and update policy copy without redeploying. /convert-tabs-html-to-liquid covers HTML conversion.

Accordion blocks

Accordion rows extend FAQ blocks with title and richtext content—common on product detail pages for materials and sizing. /convert-accordion-html-to-liquid explains the HTML workflow.

Merchant editing capabilities

• Add block — insert a new row from the sidebar.
• Remove block — delete without code changes.
• Reorder — drag blocks to change sequence.
• Duplicate — copy a configured row as a starting point.
• Per-block settings — edit only the selected row's fields.

Block schema best practices

• Name block types descriptively: slide, faq_item, tab_panel.
• Set max_blocks to prevent runaway row counts.
• Seed presets with two to four starter blocks.
• Use case block.type when one section mixes multiple block types.
• Keep per-block setting counts low for editor clarity.

Generating blocks from HTML

HTMLToLiquid Converter detects repeating DOM structures and exports Block mode output with schema and scoped CSS. Pair with /shopify-schema-guide for refinement and /shopify-liquid-examples for Liquid reference patterns.