Flat vs Block Sections in Shopify
Understand the difference between Flat and Block architectures, and when you should use each approach for your theme.
Two Ways to Build
When creating a Shopify section with multiple repeated elements (like 3 feature columns), you have two choices: Flat Mode or Block Mode.
What is Flat Mode?
In Flat Mode, you define individual settings for every single piece of text. If you have 3 columns, you create settings for heading_1, heading_2, and heading_3.
- Pros: Extremely simple to code. Very strict layout control.
- Cons: Merchants cannot add a 4th column. Removing a column leaves awkward blank spaces.
What is Block Mode?
In Block Mode, you define one setting type (e.g., a "Column" block), and you use a for loop to render them. The merchant can click "Add Block" repeatedly.
- Pros: Infinite scalability. Easy to reorder items via drag-and-drop.
- Cons: Requires slightly more complex JSON schema and Liquid loops.
When to Use Which?
If you are building a strict UI component (like a split hero banner that must always have exactly one image and one text area), use Flat mode.
If you are building a gallery, a list of logos, or an FAQ, always use Block mode.
Real Example: Three-Column Features
Flat: heading_1, heading_2, heading_3 in schema—fast to build, painful when the client wants a fourth column.
Block: one "Column" block type looped with {% for block in section.blocks %}—slightly more code, unlimited columns.
Our Converter generates both Flat and Block modes from the same HTML—toggle before export.
Build faster with HTMLToLiquid Converter
Convert static HTML into dynamic Shopify sections.
Open converter