Mastering Shopify 2.0: How to Build Custom Sections and Blocks

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.

My Shopify review angle

When I would review this in a client Shopify store, I would start with the operational surface instead of the headline. Mastering Shopify 2.0: How to Build Custom Sections and Blocks only becomes useful when the reader can map it to a theme file, app setting, Admin API job, checkout rule, or storefront behavior they can actually test.

I would not leave this as theory. I would apply it to one actual page, integration, bug, or client decision and keep the evidence beside the recommendation.

Pre-launch Shopify checks

• Check the exact Shopify surface before changing code.
• Test with products that have missing images, long variants, empty metafields, and unusual prices.
• Confirm the change is visible in server-rendered HTML where SEO/AEO matters.
• Keep a rollback path for app or theme changes.
• Write a handoff note so the merchant team knows what can be edited safely.

Edge cases in the store

• The article sounds correct but does not explain what to edit in Shopify.
• The guidance ignores app conflicts, API versions, or messy product data.
• The change helps desktop screenshots but hurts mobile checkout.
• The page makes a claim that is not backed by visible content or schema.

Merchant handoff block

Implementation check for Mastering Shopify 2.0: How to Build Custom Sections and Blocks:
1. Confirm the Shopify surface involved: theme, Admin API, checkout, app, or storefront.
2. Test with messy catalog data, not only a demo product.
3. Verify permissions, API version, and rollback path.
4. Record the production edge case this change protects.

A short review block like this is often enough to catch the gap between a nice idea and a safe production change.

Where I would add more proof

I would keep improving this page by replacing any remaining abstraction with artifacts from actual work: test output, screenshots, metrics, source references, or before/after notes.