Flat vs Block Sections in Shopify

Decision framework

Before you write schema, decide whether content is fixed or repeatable. In Shopify section work, we commonly mark modules at intake: one hero with fixed slots → flat; FAQ rows, logos, or slides merchants add over time → blocks. Retrofitting flat to blocks mid-project rewrites schema and merchant data.

Flat mode: indexed settings

Each content slot gets its own setting id: heading_1, heading_2, image_1. Data lives in section.settings only—no loop required.

• Best for: single-instance heroes, announcement bars, split banners with fixed columns
• Trade-off: merchants cannot add a fourth column without a schema change

Block mode: looped rows

One block type defines row structure; Liquid loops section.blocks. Merchants add, remove, and reorder rows in the editor.

{% for block in section.blocks %}
  <div class="column" {{ block.shopify_attributes }}>
    <h3>{{ block.settings.title | escape }}</h3>
  </div>
{% endfor %}

• Best for: FAQs, logo strips, testimonial grids, sliders
• Trade-off: more schema work; requires shopify_attributes and often max_blocks

Data structure comparison

• Flat: values stored on the section instance in template JSON under settings
• Blocks: values stored per row under blocks with unique ids and type
• Mixed: section-level heading + block rows below—common on feature bands

Module patterns (not one-size-fits-all)

• Homepage hero with one headline and one CTA → flat
• Press logo strip that grows weekly → blocks
• Compliance FAQ with reorderable rows → blocks
• Exactly-three-column feature band locked in design → flat if scope forbids a fourth column

Takeaway

Choose once at design intake and document in the PR. Toggle Flat or Block before export in the converter workspace. Deeper block patterns: Reusable Sections.

The decision you cannot defer to QA

Flat sections retrofitted to blocks mid-sprint double estimate. A logo strip modeled as twelve flat image settings cannot become draggable rows without rewriting schema and migrating merchant data. Decide at Figma intake: repeatable rows with identical structure → blocks; fixed layout → flat.

Trade-offs on client deadlines

Flat pros: faster first export, strict layout control, simpler QA on single-instance heroes.
Flat cons: merchants cannot add rows; empty columns when they delete content.
Block pros: drag-and-drop rows, scalable FAQs and sliders.
Block cons: more schema, requires shopify_attributes, needs max_blocks caps.

Real client scenarios

Fashion DTC hero: flat—one headline, one CTA, one media setting.
Press logo strip: blocks—marketing adds logos weekly.
B2B FAQ: blocks—legal adds compliance rows before launch.
Three-column features (exactly three forever): flat is acceptable if the SOW forbids a fourth column.

Converter workflow

Paste HTML into converter, toggle Flat or Block before export, then audit labels. Block mode detects sibling rows with matching structure—clean HTML exports convert more accurately. Read dynamic blocks guide and how to build blocks.

Troubleshooting

Merchant wants another row on a flat section: migrate to blocks or quote schema refactor.
Block detection merged unrelated rows: split HTML into separate conversion passes.
Too many block settings: group with header settings or split into two section types.