Shopify Sections and Blocks: Build Flexible, Drag-and-Drop Layouts

Sections and blocks are the foundation of modern Shopify theme development. They let developers build reusable layout modules and let merchants customize content in the theme editor without touching code.

What Are Sections?

A section is a Liquid file in the sections directory. It can contain HTML, Liquid, settings, blocks, schema, JavaScript, and styles. Common examples include hero banners, image-with-text areas, product information, featured collections, testimonials, and FAQ sections.

Sections vs. Snippets

A section is merchant-editable and appears in the theme editor. A snippet is reusable internal code rendered from another file. Use sections for page modules and snippets for repeated implementation details.

The Section File Structure

<section class="custom-hero">
  <h1>{{ section.settings.heading }}</h1>
  <p>{{ section.settings.text }}</p>
</section>

{% schema %}
{
  "name": "Custom hero",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading" },
    { "type": "textarea", "id": "text", "label": "Text" }
  ],
  "presets": [
    { "name": "Custom hero" }
  ]
}
{% endschema %}

Section Settings

Settings make content editable. Common setting types include text, textarea, rich text, image picker, color, select, checkbox, range, URL, product, and collection.

What Are Blocks?

Blocks are repeatable child items inside a section. A slideshow has slide blocks. A testimonial section has testimonial blocks. An FAQ section has question-and-answer blocks.

{% for block in section.blocks %}
  <div {{ block.shopify_attributes }}>
    <h3>{{ block.settings.title }}</h3>
    <p>{{ block.settings.text }}</p>
  </div>
{% endfor %}

Rendering Block Types

If a section supports multiple block types, use case to render each type clearly.

{% for block in section.blocks %}
  {% case block.type %}
    {% when 'testimonial' %}
      <figure {{ block.shopify_attributes }}>
        <blockquote>{{ block.settings.quote }}</blockquote>
        <figcaption>{{ block.settings.author }}</figcaption>
      </figure>
  {% endcase %}
{% endfor %}

Presets

Presets make a section available in the theme editor for JSON templates. Without a preset, a section can still be manually referenced in JSON, but merchants cannot freely add it from the editor.

JSON Templates

JSON templates connect sections to page types. They store section instances and an order array. Shopify JSON templates can render up to 25 sections, and each section can contain up to 50 blocks.

Best Practices

• Keep settings useful, not overwhelming.
• Group related block settings together.
• Use responsive CSS by default.
• Add block.shopify_attributes for editor support.
• Test inside the theme editor, not only on the storefront.
• Avoid relying on a fixed block order unless necessary.

Next Steps

Build a testimonials section, then an FAQ section, then a product feature section. Those three projects will teach the most important section and block patterns.

Build real Shopify sections in the hands-on Shopify theme development course on codewith Mehedi.