Development11 min read•Updated: Aug 14, 2026

How to Build Custom Sections in Shopify Using Liquid

Online Store 2.0 unlocked the ability to render dynamic sections on every page of a Shopify store, not just the homepage.

Building shopify custom sections allows developers to deliver tailored editorial layouts, interactive product comparisons, and dynamic testimonial sliders that non-technical marketing teams can effortlessly customize.

This tutorial breaks down the architecture of a custom Liquid section, explains schema syntax, and provides complete, production-ready code examples you can adapt for your store.

Implementation Paths

Shopify Development Shopify Design Shopify CRO

The Anatomy of a Shopify Liquid Section

Every section file inside the `/sections` directory combines three integrated layers into a single `.liquid` file:

1. Presentation Markup: Semantic HTML combined with Liquid tags and filters to output dynamic merchant data.

2. Scoped Styling & Behavior: Optional inline `<style>` and `<script>` blocks or references to theme asset files.

3. The `{% schema %}` Tag: A JSON structure defining the section's name, configurable settings, repeatable blocks, and presets.

Step-by-Step Code Example: Featured Value Props Section

Below is a complete, production-ready custom section that displays value proposition cards with merchant-configurable titles, icons, and text columns:

Complete Section Code (sections/value-props.liquid)

Copy this snippet into your theme's `/sections/value-props.liquid` file:

{% comment %} sections/value-props.liquid {% endcomment %}
<div class="value-props-section" style="background-color: {{ section.settings.bg_color }}; padding: {{ section.settings.padding_y }}px 20px;">
  <div class="value-props-container" style="max-width: 1200px; margin: 0 auto;">
    {% if section.settings.heading != blank %}
      <h2 class="value-props-heading" style="text-align: center; margin-bottom: 32px; font-size: 2rem;">
        {{ section.settings.heading | escape }}
      </h2>
    {% endif %}

    <div class="value-props-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px;">
      {% for block in section.blocks %}
        <div class="value-prop-card" {{ block.shopify_attributes }} style="padding: 24px; border: 1px solid #eaeaea; border-radius: 8px;">
          {% if block.settings.icon != blank %}
            <div class="value-prop-icon" style="margin-bottom: 12px; width: 48px; height: 48px;">
              {{ block.settings.icon | image_url: width: 96 | image_tag: loading: 'lazy', alt: block.settings.title }}
            </div>
          {% endif %}
          <h3 style="font-size: 1.25rem; margin-bottom: 8px;">{{ block.settings.title | escape }}</h3>
          <p style="color: #666; font-size: 0.95rem; line-height: 1.5;">{{ block.settings.description }}</p>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Value Propositions",
  "tag": "section",
  "class": "section-value-props",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Section Heading",
      "default": "Why Choose Our Brand"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "padding_y",
      "min": 20,
      "max": 100,
      "step": 10,
      "unit": "px",
      "label": "Vertical Padding",
      "default": 60
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature Card",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Feature Icon"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Feature Title",
          "default": "Fast & Free Shipping"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Feature Description",
          "default": "Enjoy complimentary expedited shipping on all orders over $75."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Value Propositions",
      "blocks": [
        { "type": "feature" },
        { "type": "feature" },
        { "type": "feature" }
      ]
    }
  ]
}
{% endschema %}

Engineering Best Practices for Custom Sections

When coding custom sections, following industry best practices ensures maintainability and visual stability:

Key Guidelines to Follow

Always include {{ block.shopify_attributes }} inside block parent elements to enable the visual theme editor's live click-to-highlight functionality.

Sanitize user input with Liquid filters like '| escape' to prevent broken HTML structures.

Always define at least one entry inside the 'presets' array so the section appears in the theme editor's 'Add section' modal.

Actionable Insights

Use responsive CSS Grid or Flexbox with inline CSS variables powered by section settings for adaptable layouts.
Leverage the 'image_url' and 'image_tag' filters to automatically generate responsive srcset markup.
Limit each section to purposeful settings to keep the admin editing experience intuitive for content managers.

Conclusion

Mastering custom sections transforms your Shopify store from a static storefront into a flexible, modular content ecosystem tailored to your unique merchandising strategy.

Looking for bespoke section development or custom Liquid components? Discover our shopify development services or reach out to TSR's engineering team.

Want help implementing this? Book a call.

We can turn these frameworks into a prioritized execution plan for your store.

View Case Studies

Development

10 Mistakes That Hurt Your Shopify Store's SEO (2026 Guide)

A practical 2026 guide to the most common Shopify SEO mistakes that hurt rankings, traffic, and conversions, plus how to fix them.

Read Article