How to Create Custom Theme Blocks in Shopify using Liquid

🧩 New Features Theme Blocks

Shopify’s theme architecture empowers developers to build flexible and reusable components using theme blocks. These blocks make it easy for merchants to edit content visually — no coding required.

In this tutorial, you’ll learn how to:

✅ Build a custom Text Block
✅ Group blocks using a Layout Container Block
✅ Create a Section to display them inside your theme

---

🛠️ 1. Create a Text Display Block

📄 File: /blocks/text-display.liquid

<div class="text-display align-{{ block.settings.text_alignment }}">
  {{ block.settings.content }}
</div>

{% stylesheet %}
  .align-left {
    text-align: left;
  }
  .align-center {
    text-align: center;
  }
  .align-right {
    text-align: right;
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Text Display",
  "settings": [
    {
      "type": "richtext",
      "id": "content",
      "label": "Content"
    },
    {
      "type": "text_alignment",
      "id": "text_alignment",
      "label": "Text Alignment"
    }
  ],
  "presets": [
    {
      "name": "Centered Text",
      "settings": {
        "content": "<p>Hello world!</p>",
        "text_alignment": "center"
      }
    }
  ]
}
{% endschema %}

---

🧱 2. Create a Layout Group Block

📄 File: /blocks/layout-container.liquid

<div class="layout-container scheme-{{ block.settings.color_scheme }}">
  {% content_for 'blocks' %}
</div>

{% schema %}
{
  "name": "Layout Container",
  "blocks": [
    { "type": "@theme" },
    { "type": "@app" }
  ],
  "settings": [
    {
      "type": "header",
      "content": "Layout Settings"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color Scheme",
      "default": "scheme-default"
    }
  ],
  "presets": [
    {
      "name": "Two Text Displays",
      "settings": {
        "color_scheme": "scheme-light"
      },
      "blocks": [
        {
          "type": "text-display",
          "settings": {
            "content": "<h3>Heading Example</h3>"
          }
        },
        {
          "type": "text-display",
          "settings": {
            "content": "<p>Supporting paragraph content here.</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}

---

🧩 3. Create a Custom Section to Hold Blocks

📄 File: /sections/flexible-content.liquid

<div class="flexible-content theme-{{ section.settings.color_mode }}">
  {% content_for 'blocks' %}
</div>

{% schema %}
{
  "name": "Flexible Content Section",
  "blocks": [
    { "type": "@theme" },
    { "type": "@app" }
  ],
  "settings": [
    {
      "type": "header",
      "content": "Section Styling"
    },
    {
      "type": "color_scheme",
      "id": "color_mode",
      "label": "Color Mode",
      "default": "mode-light"
    }
  ],
  "presets": [
    {
      "name": "Header + Layout Block",
      "settings": {
        "color_mode": "mode-dark"
      },
      "blocks": [
        {
          "type": "layout-container",
          "settings": {
            "color_scheme": "scheme-dark"
          },
          "blocks": [
            {
              "type": "text-display",
              "settings": {
                "content": "<h1>Main Title</h1>"
              }
            },
            {
              "type": "text-display",
              "settings": {
                "content": "<p>Use this block for product intros or announcements.</p>"
              }
            }
          ]
        }
      ]
    }
  ]
}
{% endschema %}

---

✅ Outcome

With this setup:

• You can place Text Display blocks inside a Layout Container block

• The Layout Container itself can be reused inside the Flexible Content Section

• Merchants can visually edit everything in the Shopify theme editor

---

🧠 Pro Tips

• Use @theme and @app to allow Shopify to inject built-in blocks.

• Try combinations of blocks inside the editor to create marketing banners, product highlights, or landing pages.

• Customize schemas to include select, image_picker, or url for richer content control.