How to Create Reusable Shopify Sections

The Problem with Hardcoding

A common mistake beginners make is hardcoding text, links, or images directly into their theme files. This makes it impossible for merchants to update the content without hiring a developer.

Use Blocks for Repeated Content

If your section has a list of items—like a FAQ accordion, an image gallery, or a slider—you should use Blocks. Blocks allow merchants to add, remove, and reorder content indefinitely.

A Simple Block Loop

<div class="gallery">
  {% for block in section.blocks %}
    <div class="gallery-item" {{ block.shopify_attributes }}>
      {% if block.settings.image %}
        <img src="{{ block.settings.image | image_url: width: 800 }}" alt="">
      {% endif %}
    </div>
  {% endfor %}
</div>

Don't Forget shopify_attributes

Notice the {{ block.shopify_attributes }} in the code above? This is a critical addition. It allows the Shopify Theme Editor to hook into individual blocks and automatically scroll to them or highlight them when a merchant selects them in the sidebar.

Schema for Blocks

"blocks": [
  {
    "type": "image",
    "name": "Image",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      }
    ]
  }
]

Name Blocks Clearly

Use merchant-friendly block names like "Testimonial" or "Logo" instead of "Block 1". Good labels reduce support tickets when clients edit themes themselves.

By defining content via schema blocks, you give store owners control without deployments. Pair this with snippets—see the Cheat Sheet entry on passing variables to snippets.