Mastering Shopify 2.0: How to Build Custom Sections and Blocks

In the world of Shopify development, the release of Online Store 2.0 marked a paradigm shift. Gone are the days of rigid templates and hard-coded layouts. Today, merchants demand flexibility—they want to drag, drop, and customize every inch of their storefront without touching a single line of code. As a Shopify developer, your superpower lies in your ability to build Custom Sections and Blocks.

Whether you are a store owner looking to tweak your theme or a developer aiming to upskill, understanding the architecture of sections and blocks is non-negotiable. In this guide, we’ll dive deep into how to architect, code, and optimize custom sections that provide the ultimate editing experience.

Understanding the Architecture: Templates, Sections, and Blocks

Before we start coding, let's visualize the hierarchy. Shopify themes are structured like a set of nesting dolls:

1. Templates: The broad container for a page (e.g., product.json, index.json). In OS 2.0, these are JSON files that list which sections to render.
2. Sections: The modular components of a page (e.g., a Hero Banner, a Newsletter Signup). Sections render markup and contain settings.
3. Blocks: The granular elements inside a section (e.g., a heading, a button, an image inside a gallery). Blocks make sections repeatable and reorderable.

By breaking UI components into these units, we create a "Lego-like" experience for the merchant.

Step 1: Creating the Section File

To build a custom section, you create a new Liquid file in the /sections directory of your theme. Let's build a practical example: a "Featured Card Grid" section where merchants can add multiple cards with an icon, title, and text.

Create a file named featured-card-grid.liquid. Every section has three main parts: the HTML/Liquid markup, the CSS/JS, and the Schema.

Step 2: Defining the Schema

The {% schema %} tag is the brain of your section. It tells Shopify's Theme Editor how to display options to the merchant.

{% schema %}
{
  "name": "Featured Card Grid",
  "tag": "section",
  "class": "section-featured-cards",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Section Heading",
      "default": "Why Choose Us?"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#f4f4f4"
    }
  ],
  "blocks": [
    {
      "type": "card",
      "name": "Info Card",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icon"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Feature Title"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Description"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Featured Card Grid",
      "blocks": [
        {
          "type": "card"
        },
        {
          "type": "card"
        },
        {
          "type": "card"
        }
      ]
    }
  ]
}
{% endschema %}

Key Takeaways from the Schema:

• Settings: Global settings apply to the whole section (e.g., background color, section title).
• Blocks: We defined a block type called card. This allows the merchant to add as many cards as they need.
• Presets: This is crucial. Without a preset, your section won't appear in the "Add Section" menu in the Theme Editor. We also pre-loaded 3 blocks so the section looks good immediately when added.

Step 3: Writing the Liquid & HTML

Now, let's render the data defined in the schema. We loop through section.blocks to render the repeated elements.

<div class="card-grid-container" style="background-color: {{ section.settings.bg_color }};">
  {% if section.settings.heading != blank %}
    <h2 class="section-title">{{ section.settings.heading | escape }}</h2>
  {% endif %}

  <div class="card-grid">
    {% for block in section.blocks %}
      <div class="card-item" {{ block.shopify_attributes }}>
        {% if block.settings.icon != blank %}
          <div class="card-icon">
            {{ block.settings.icon | image_url: width: 100 | image_tag }}
          </div>
        {% endif %}
        
        <h3>{{ block.settings.title | escape }}</h3>
        <p>{{ block.settings.description | escape }}</p>
      </div>
    {% endfor %}
  </div>
</div>

Notice {{ block.shopify_attributes }}? Always include this on the container of your block loop. It enables the "click to select" interaction in the Theme Editor, allowing merchants to click the preview to open the specific settings panel.

Step 4: Styling and Scoping

To keep our theme clean, I recommend using Liquid to scope styles directly to this section or using Tailwind/utility classes if your theme supports it. Here is a simple scoped CSS approach:

{% style %}
  .section-featured-cards {
    padding: 40px 20px;
  }
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  .card-item {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
  }
{% endstyle %}

Best Practices for Professional Developers

1. Limit Block Counts: You can limit the number of blocks (e.g., "max_blocks": 4) in the schema to prevent merchants from breaking the layout.
2. Use `presets` Wisely: Always provide default content in your presets. A merchant should never add a section and see a blank white space.
3. Optimize Images: Always use image_url filters with appropriate width parameters to ensure high performance and Core Web Vitals scores.
4. Localize Your Schema: For themes sold on the store or used globally, use locales files for your schema labels instead of hardcoding strings.

Conclusion

Building custom sections is the bridge between a static design and a dynamic, user-friendly CMS. By mastering Liquid schemas and blocks, you give your clients the autonomy they crave while maintaining the design integrity you built.

Need a custom section built for your high-volume Shopify Plus store? Or perhaps a complete theme refactor? As a Shopify Expert, I help businesses turn complex requirements into elegant, manageable code. Let's discuss your project today.