Building Custom Sections in Shopify Liquid

The introduction of Online Store 2.0 revolutionized Shopify theme architecture by allowing merchants to add sections to any page via JSON templates. As a developer, building custom, highly configurable Liquid sections is the best way to give merchants control.

The Schema Definition

Every dynamic section requires a {% schema %} tag. This JSON structure dictates what options appear in the Shopify Customizer.

{% schema %}
{
  "name": "Custom Call to Action",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading text",
      "default": "Ready to get started?"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    }
  ],
  "presets": [
    {
      "name": "Custom Call to Action",
      "category": "Promotional"
    }
  ]
}
{% endschema %}

The presets block is mandatory if you want merchants to be able to dynamically add this section to a page from the theme editor.

Rendering the Content

Once you define the schema, you access the data using the section.settings object within your HTML markup.

<div class="custom-cta">
  <h2>{{ section.settings.heading | escape }}</h2>
  {% if section.settings.button_link != blank %}
    <a href="{{ section.settings.button_link }}" class="btn">Click Here</a>
  {% endif %}
</div>

Blocks vs Settings

While settings apply to the entire section, blocks allow you to create repeatable elements (like slides in a slideshow, or icons in a feature list). Mastering blocks is the key to building truly flexible Shopify themes.