Custom Shopify Sections Your Team Can Actually Edit

A Shopify theme is only as useful as what your team can do with it on a Tuesday afternoon without calling a developer. Online Store 2.0 made that possible: sections can go on any page, and each section can hold blocks that marketers add, remove and reorder in the theme editor. But the editor is only as good as the sections you give it. Build them badly and you get either a rigid theme nobody can change or a free-for-all where every page looks different. Here is how I build sections that sit between the two.

What sections and blocks actually are

A section is a reusable chunk of a page, such as a hero, a feature grid or a testimonial row, defined in a Liquid file in the theme's sections folder. At the bottom of that file, a {% schema %} tag holds JSON that tells the theme editor what the section is called and which settings it offers. Blocks are the repeatable items inside a section, such as the individual cards in a grid, each with its own settings.

When a merchant adds a section in the editor, Shopify saves their choices in the page's JSON template. The Liquid decides how it looks; the schema decides what the merchant is allowed to change. That second part is where most themes go wrong. Get it right, and the editing experience is one of the main reasons I rarely recommend going headless with Hydrogen to smaller teams.

Design the options before the code

Start with the pages your team actually builds: campaign landing pages, collection intros, brand story pages. List the patterns that repeat, and design each section around one job. A "Feature grid" with three to six items is useful. A "Flexible content" section with forty settings is a page builder in disguise, and it will produce inconsistent pages.

If you are working from designs, agree the section list with the designer before anyone writes code. It is the Shopify version of the component inventory I describe in my Figma-to-code handoff workflow, and it is much cheaper to change on paper than in a live theme.

Guardrails: fewer, better choices

• Limit options. Use select settings with a handful of named choices ("Light", "Dark", "Brand") instead of free colour pickers. The brand stays consistent and nobody picks lime green at five on a Friday.
• Bound your ranges. A range setting for spacing or column count, with a sensible minimum and maximum, stops layouts breaking.
• Set good defaults. A section should look finished the moment it is added, before anyone touches a setting.
• Cap blocks. max_blocks stops a grid designed for six items being stretched to twenty.
• Add presets. A section only appears in the editor's "Add section" list if it has a preset. Presets can include starter blocks, so the merchant begins with a working layout rather than an empty box.
• Use info text. The info property explains what a setting does and, just as usefully, what size of image to upload.

A short example

Here is a trimmed-down schema for a feature grid: a heading, one background choice, and up to six feature blocks, with a preset that starts with three.

{% schema %}
{
  "name": "Feature grid",
  "tag": "section",
  "class": "section-feature-grid",
  "max_blocks": 6,
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Why customers choose us" },
    {
      "type": "select",
      "id": "background",
      "label": "Background",
      "options": [
        { "value": "light", "label": "Light" },
        { "value": "dark", "label": "Dark" }
      ],
      "default": "light"
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        { "type": "image_picker", "id": "icon", "label": "Icon", "info": "Square, at least 96 x 96 px" },
        { "type": "text", "id": "title", "label": "Title", "default": "Fast delivery" },
        { "type": "textarea", "id": "text", "label": "Text", "default": "Dispatched within one working day." }
      ]
    }
  ],
  "presets": [
    {
      "name": "Feature grid",
      "blocks": [{ "type": "feature" }, { "type": "feature" }, { "type": "feature" }]
    }
  ]
}
{% endschema %}

In the Liquid above the schema, loop through section.blocks and output {{ block.shopify_attributes }} on each block's wrapper element. That is what lets the theme editor highlight and select a block when the merchant clicks it in the preview.

Name things for the people using them

Section and setting names are interface copy. Call it "Testimonials", not "Social proof module v2". Label settings by their effect ("Show border") rather than their implementation ("Enable border class"). Group related settings under header settings so long lists are easy to scan. If your team works in more than one language, put labels in the theme's schema locale files rather than hard-coding English.

Keep sections fast

Flexibility has a performance cost if you are careless. Load each section's CSS and JavaScript only when that section is actually on the page, rather than bundling everything into one global file. Use Shopify's image_url and image_tag filters so images are resized and served responsively. Avoid looping through large collections inside a section just to show four products. And do not ship a whole carousel library for one section that appears on three pages. The wider picture is in how to speed up a slow Shopify store.

Test it the way your team will use it

• Add every section to a blank page and check it looks right with nothing but its defaults.
• Try the extremes: the longest heading anyone would realistically write, one block, the maximum number of blocks, no image uploaded.
• Check each variation on a real phone, not only in the editor's mobile preview.
• Run Theme Check through the Shopify CLI to catch schema errors and common performance problems before they reach the live theme.
• Hand the theme to someone on the marketing team, ask them to build a real page, and watch where they get stuck.

That last test is the one that matters. If they have to ask what a setting does, rename it or add info text.

Build a small library, then stop

In my experience, most stores are well served by somewhere between ten and twenty well-made sections. Beyond that, the list gets hard to scan and people start reaching for the wrong one. Write a short internal page explaining what each section is for, keep the theme in version control, and review the section list every few months as part of regular website maintenance.

Good sections also make conversion work cheaper. The changes in 12 Shopify product page changes that lift conversions are far easier to test when each one is a block your team can add themselves. And a library of sections designed around your brand is the best defence against looking like every other store on the same theme.

Want a theme your team can actually build pages with? Tell me how your team works and I will suggest the sections I would start with.