Convert a Shopify Section to a Block (Horizon Theme version)

Shopify’s new Horizon theme architecture introduces more flexible ways to design pages, thanks to updates in how sections and blocks work. If you’ve been building themes for a while, you might be familiar with the old model where sections controlled the layout and blocks were limited inside those sections.

In Horizon, Shopify allows developers to convert standalone sections into reusable blocks, giving merchants even more control in the theme editor. Let’s walk through the process step by step.

1. Understand the Difference Between Sections and Blocks

• Sections
  • Top-level containers on a page.
  • Can include multiple blocks inside them.
  • Used for big layout elements (e.g., hero banners, product grids, footers).
• Blocks
  • Child elements inside sections.
  • Previously limited to “sub-content” (like text, buttons, or images).
  • Now in Horizon, blocks can be promoted so they behave like mini-sections.

👉 Example: Instead of merchants adding a whole “Image with Text” section, you can now let them add an image block anywhere inside a section.

2. Original Section Schema Example

Let’s say you have a section called section/image-with-text.liquid:

<section>
.... Image with text code
</section>

{% schema %}
{
  "name": "Image with text",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading"
    }
  ],
  "presets": [
    {
      "name": "Image with text"
    }
  ]
}

This is a section — it appears as a big component in the theme editor.

3. Convert Section to a Block

You’ll move it inside blocks section or create a new block file blocks/image-with-text.liquid. Then, paste the content.

4. Update the Markup

Inside the liquid content of a new block file, replace anything section. by block.

5. Benefits in Horizon

• Merchants can reorder blocks more easily.
• Developers can reduce the number of separate sections.
• Layouts become more modular and flexible.
• Works smoothly with Shopify’s new nested blocks and drag-and-drop editor in Horizon.

6. Best Practices

• Keep your sections as containers and blocks as repeatable units.
• Use presets to make it easier for merchants to add common block combinations.
• Test in the theme editor to confirm that merchants can drag, drop, and customize without confusion.

Final Thoughts

The new Horizon theme structure blurs the line between sections and blocks, making Shopify themes more modular and customizable than ever. By converting old sections into blocks, you give merchants granular control over their store’s design while keeping your theme lightweight and future-proof.