Custom Shopify Sections and Blocks Development

You open the Theme Editor, change text in a section, and on the site—nothing happens. Or blocks shift, or settings don't apply. Sound familiar? As developers with 8 years of Shopify experience, we know every pitfall. We'll show you how to properly configure Sections and Blocks so your content team can work without you, and the theme editor won't break the layout.

Online Store 2.0 brought a powerful tool—sections with blocks. But you need to use them wisely. An incorrect schema turns flexibility into a nightmare: blocks overlap, settings don't save, presets don't appear. Below is the practice that eliminates these issues.

How to Avoid Block Conflicts

Each block inside a section must have a unique type. If two blocks share the same type, they behave as one—settings overwrite each other. Use different type values or limit the count via max_blocks. Also, always add the {{ block.shopify_attributes }} attribute—it lets the Theme Editor correctly identify each block.

Why Static Sections Are Dangerous

Static sections are hardcoded in layout/theme.liquid. They cannot be moved or deleted from the editor—only via code. This increases edit time by 3 times compared to dynamic sections. For all new projects, we recommend dynamic sections: they are managed through the page's JSON template, giving the content manager full control without code access.

How Sections Work

A section is a file in /sections/ containing a Liquid template and a JSON schema in one file. The schema describes the section's settings and the block types it accepts. The key field is presets: without it, the section won't appear in the "Add section" list. More about Liquid can be found on Wikipedia.

Minimal section:

{%- comment -%} sections/text-banner.liquid {%- endcomment -%} <div class="text-banner text-banner--{{ section.settings.alignment }}"> <div class="container"> {% if section.settings.heading != blank %} <h2>{{ section.settings.heading }}</h2> {% endif %} {% if section.settings.text != blank %} <div class="text-banner__body">{{ section.settings.text }}</div> {% endif %} </div> </div> {% schema %} { "name": "Text Banner", "tag": "section", "class": "section-text-banner", "settings": [ { "type": "text", "id": "heading", "label": "Heading", "default": "Section Heading" }, { "type": "richtext", "id": "text", "label": "Text" }, { "type": "select", "id": "alignment", "label": "Alignment", "options": [ { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" } ], "default": "center" } ], "presets": [ { "name": "Text Banner" } ] } {% endschema %} 

Static vs Dynamic Sections: Comparison

Dynamic sections win by 3 times in speed of making edits. This is especially important for stores where content changes weekly.

Setting Types

Blocks Inside a Section

Blocks are dynamic repeatable elements of a section. Example—"Features Grid" section:

{%- comment -%} sections/features-grid.liquid {%- endcomment -%} <div class="features-grid features-grid--cols-{{ section.settings.columns }}"> {%- for block in section.blocks -%} {%- case block.type -%} {%- when 'feature_card' -%} <div class="feature-card" {{ block.shopify_attributes }}> {%- if block.settings.icon != blank -%} <img src="{{ block.settings.icon | image_url: width: 80 }}" alt="{{ block.settings.icon.alt | escape }}" width="80" height="80" loading="lazy" > {%- endif -%} <h3>{{ block.settings.title }}</h3> <p>{{ block.settings.description }}</p> </div> {%- endcase -%} {%- endfor -%} </div> {% schema %} { "name": "Features Grid", "tag": "section", "settings": [ { "type": "range", "id": "columns", "min": 2, "max": 4, "step": 1, "label": "Number of columns", "default": 3 } ], "blocks": [ { "type": "feature_card", "name": "Feature Card", "settings": [ { "type": "image_picker", "id": "icon", "label": "Icon" }, { "type": "text", "id": "title", "label": "Title", "default": "Feature" }, { "type": "textarea", "id": "description", "label": "Description" } ] } ], "max_blocks": 12, "presets": [ { "name": "Features Grid", "blocks": [ { "type": "feature_card" }, { "type": "feature_card" }, { "type": "feature_card" } ] } ] } {% endschema %} 

The {{ block.shopify_attributes }} attribute is mandatory—it adds data attributes for inline editing in the Theme Editor.

Step-by-Step Section Creation Process

1. Create a .liquid file in /sections/.
2. Write the Liquid markup using section.settings and block.settings.
3. Add {% schema %} with name, tag, settings, and optionally blocks.
4. Include at least one preset so the section appears in the editor.
5. Connect the section in the page's JSON template (e.g., templates/index.json).
6. Test in the Theme Editor: add the section, configure blocks, save.

Limits to Prevent Breakage

limit in section or block configuration prevents adding extra elements:

// Prevent duplication of hero section { "type": "hero-banner", "limit": 1 } // No more than 6 blocks in a slider "max_blocks": 6 

What Our Work Includes

• Audit of your current theme for hardcoded and inflexible sections.
• Architecture design of sections tailored to your store's requirements.
• Development of 5–8 custom sections with blocks according to mockups.
• Configuration of global color schemes and fonts.
• Integration of sections into page JSON templates.
• Documentation of created components and training for your content team.
• Guarantee that all blocks work in the Theme Editor (2 weeks of support after delivery).

Timeline and Estimation

Development of 5–8 custom sections with blocks for a specific project: 3–5 days. Refactoring an existing theme with moving hardcoded content into editable sections: 1–2 weeks. If you already have a theme but blocks behave unpredictably, drop us a note—we'll estimate the project in 1 day and propose a refactoring plan. We have migrated over 50 stores to Online Store 2.0—we have the experience and quality guarantee. Get a consultation for your tasks.