How to Use Blocks to Make Flexible Layouts in Shopify

Blocks are one of the most powerful features of Shopify 2.0. They allow merchants to add, reorder, duplicate, or remove content inside a section — making page layouts truly flexible without touching code.

In this tutorial, you’ll learn how to use blocks to build dynamic, customizable layouts such as feature grids, icon rows, service items, FAQs, steps, testimonials, and more.

---

✨ What You’ll Learn

• How blocks work inside section schema
• How to create block types with customizable settings
• How to output block content using Liquid
• How to style dynamic layouts built with blocks

---

🧱 Step 1 — Create a New Section

Go to:

Online Store → Themes → Edit Code

Create the file:

sections/flexible-blocks-section.liquid

Add the basic section wrapper:

<div class="flexible-blocks-section">
  {% for block in section.blocks %}
    <div class="block-item">
      <h3>{{ block.settings.title }}</h3>
      <p>{{ block.settings.text }}</p>
    </div>
  {% endfor %}
</div>

This ensures your blocks show on the page.

---

🧱 Step 2 — Add Block Schema

Now let’s define blocks merchants can add and customize.

Add this schema below your HTML:

{% schema %}
{
  "name": "Flexible Layout Section",
  "settings": [],
  "blocks": [
    {
      "type": "text_block",
      "name": "Text Block",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Block Title"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Text",
          "default": "This is a flexible block description."
        }
      ]
    }
  ],
  "max_blocks": 12,
  "presets": [
    { "name": "Flexible Blocks Section" }
  ]
}
{% endschema %}

This creates a completely flexible layout using repeatable blocks.

---

🧱 Step 3 — Add More Block Types

You can mix various block types to build advanced layouts.

Example: Add an image block, icon block, and button block:

{
  "type": "image_block",
  "name": "Image Block",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "caption",
      "label": "Caption"
    }
  ]
},
{
  "type": "icon_block",
  "name": "Icon Block",
  "settings": [
    {
      "type": "text",
      "id": "icon",
      "label": "Icon (emoji or SVG)"
    },
    {
      "type": "text",
      "id": "label",
      "label": "Label"
    }
  ]
},
{
  "type": "button_block",
  "name": "Button Block",
  "settings": [
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Click Me"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    }
  ]
}

Merchants can now mix these block types in any order to build flexible layouts.

---

🧱 Step 4 — Render Block Types Conditionally

Output different HTML depending on the block type:

{% for block in section.blocks %}
  {% case block.type %}
  
    {% when 'text_block' %}
      <div class="block-item text-block">
        <h3>{{ block.settings.title }}</h3>
        <p>{{ block.settings.text }}</p>
      </div>

    {% when 'image_block' %}
      <div class="block-item image-block">
        {% if block.settings.image %}
          <img src="{{ block.settings.image | image_url }}" alt="">
        {% endif %}
        <p>{{ block.settings.caption }}</p>
      </div>

    {% when 'icon_block' %}
      <div class="block-item icon-block">
        <div class="icon">{{ block.settings.icon }}</div>
        <p>{{ block.settings.label }}</p>
      </div>

    {% when 'button_block' %}
      <div class="block-item button-block">
        <a href="{{ block.settings.button_link }}" class="btn">
          {{ block.settings.button_text }}
        </a>
      </div>

  {% endcase %}
{% endfor %}

This is the key part of flexible layouts—different blocks output different UI elements.

---

🧱 Step 5 — Add Basic Styling

Add to your base.css or flexible-blocks-section.css:

.flexible-blocks-section {
  display: grid;
  gap: 25px;
  padding: 40px 0;
}

.block-item {
  padding: 20px;
  background: #f7f7f7;
  border-radius: 8px;
}

.block-item img {
  max-width: 100%;
  border-radius: 6px;
}

.icon-block .icon {
  font-size: 40px;
  margin-bottom: 10px;
}

You can transform this into a grid, list, slider, or step layout.

---

🚀 Final Result

After completing this tutorial, you now understand how to:

• Use blocks to create flexible, dynamic layouts
• Add multiple block types for rich customization
• Render different block HTML using Liquid conditions
• Give merchants full control over layout structure

Blocks are the engine behind fully modular Shopify designs — mastering them lets you build any type of section.

---