How to Create Reusable Shopify Sections

What reusable means for merchants

Reusable sections let merchants duplicate a module, swap copy, and reorder rows without developer tickets. That requires modular markup, scoped CSS, and settings merchants understand—not just DRY code for developers.

Modular structure

Split concerns inside one section file: wrapper + loop + optional snippet for repeated card markup. Section-level settings hold shared heading and background; block settings hold per-row content.

<section id="shopify-section-{{ section.id }}" class="feature-grid">
  <h2>{{ section.settings.heading | escape }}</h2>
  <div class="feature-grid__items">
    {% for block in section.blocks %}
      {% render 'feature-card', block: block %}
    {% endfor %}
  </div>
</section>

Scoped CSS prevents theme collisions

Unscoped h2 { font-size: 48px; } leaks into collection pages. Prefix selectors with #shopify-section-{{ section.id }} or a BEM root class tied to the section wrapper.

Block loop with editor hooks

{% for block in section.blocks %}
  <div class="gallery-item" {{ block.shopify_attributes }}>
    {% if block.settings.image != blank %}
      {{ block.settings.image
        | image_url: width: 800
        | image_tag: loading: 'lazy', alt: block.settings.image.alt | escape
      }}
    {% endif %}
  </div>
{% endfor %}

During theme customization, missing {{ block.shopify_attributes }} often appears when merchants cannot select individual rows in the sidebar—they assume the section is broken.

Reusable settings merchants actually use

• Plain-language labels: "Main headline" not "heading_1"
• Defaults from approved copy so empty sections look intentional
• Presets with two seeded block rows for FAQ and logo modules
• max_blocks caps on image-heavy sliders

Snippets for cross-section reuse

{% render 'card-product',
  product: product,
  show_vendor: section.settings.show_vendor,
  image_width: 600
%}

Pass only what the snippet needs—explicit parameters make code review faster than hidden global assigns.

Takeaway

Blocks solve merchant reusability inside a section; snippets solve developer reuse across sections. Choose architecture first via Flat vs Block Sections, then validate in the theme editor before handoff.

Reusability is a merchant problem, not a DRY problem

Developers want reusable code; merchants want to duplicate a hero, swap copy, and reorder FAQ rows without tickets. Blocks solve merchant reusability inside a section. Snippets solve developer reusability across sections—a product card partial rendered from collection grids, featured rows, and search results.

When blocks beat flat settings

If marketing might add a fourth testimonial next quarter, flat quote_4 settings will fail. Blocks let merchants add row thirteen on launch day. Decision framework: flat vs block and agency decision framework.

Snippet parameters done right

{% render 'card-product',
  product: product,
  show_vendor: section.settings.show_vendor,
  image_width: 600
%}

Pass only what the snippet needs. Avoid global assigns that hide data flow—reviewers on client repos should see inputs explicitly.

Common mistakes

• Copy-pasting block markup instead of one loop—fixes require editing five files
• Skipping shopify_attributes on block wrappers
• Hardcoding collection handles instead of collection settings
• No presets—merchants cannot add the section themselves

Handoff checklist

1. Two block rows seeded in presets for repeatables
2. Labels in plain language
3. Loom or doc showing add/remove/reorder blocks
4. Note fragile settings (video URLs, max_blocks)

See client handoff checklist for the full gate.