Shopify store management fails quietly when every campaign needs a developer. A homepage banner change waits in a queue. A landing layout is copied by duplicating Liquid files. Seasonal pages drift out of sync with the product catalogue. Custom Shopify sections address that operational problem: they package layout and content fields into editor-friendly modules that merchants can rearrange without opening the codebase for routine updates.
This article explains when custom sections help, how Online Store 2.0 schema and blocks work, and how to keep sections fast. Background on theme layers is in Shopify theme customization. For delivery, see Shopify developer and Shopify Liquid developer.
What Online Store 2.0 changed
Online Store 2.0 made sections the primary unit of storefront composition. JSON templates assemble pages from sections. App blocks plug into the same mental model. Merchants edit content in the theme editor instead of waiting on Liquid deploys for every headline change.
Custom sections extend that system with brand-specific modules—instead of fighting it with one-off templates or heavy page-builder apps.
Sections, blocks, and schema
A useful mental model:
| Piece | Role |
|---|---|
| Section | A Liquid file with {% schema %} that can be added to templates |
| Blocks | Repeating items inside a section (tiles, FAQs, slides) |
| Section settings | Merchant-editable fields (text, image, product, colour, checkbox) |
| JSON template | Declares which sections appear on a page type |
Schema is the contract between developer and merchant. Clear labels, sensible defaults, and constrained limits on blocks prevent layout chaos.
Minimal schema shape (illustrative):
{
"name": "Feature grid",
"tag": "section",
"class": "section-feature-grid",
"settings": [
{ "type": "text", "id": "heading", "label": "Heading", "default": "Why shop with us" },
{ "type": "range", "id": "columns", "min": 2, "max": 4, "step": 1, "label": "Columns", "default": 3 }
],
"blocks": [
{
"type": "feature",
"name": "Feature",
"settings": [
{ "type": "text", "id": "title", "label": "Title" },
{ "type": "textarea", "id": "text", "label": "Text" }
]
}
],
"presets": [{ "name": "Feature grid" }]
}
Keep IDs stable once content exists in production. Renaming setting IDs silently drops merchant content.
What a well-built custom section includes
A useful section has a clear job: hero with offer, feature grid, size-guide accordion, lookbook row, UGC strip, shipping promise band. It exposes content fields with plain labels. It uses blocks for repeating items so editors can add or remove entries. It constrains dangerous choices—unbounded font sizes, endless nested blocks—when those choices break layout.
Liquid should stay readable. Prefer snippets for shared markup. Avoid hard-coded product IDs when a product picker setting will do. Include responsive behaviour in the section, not as a later CSS patch.
Settings should default to something publishable. Empty states should not collapse the page into a broken layout when a merchant clears an image.
Reusable sections and merchant editing
Campaign velocity rises when marketing can assemble pages from known modules. Consistency improves because the same “shipping promise” section appears across templates with shared styling. QA gets easier: you test a section once, then reuse it.
Custom sections also reduce risky habits like editing live Liquid to change a headline, or installing an app solely to place a content block. That decision is covered in Shopify apps vs custom development.
Homepage, product, and collection sections
Homepage — heroes, trust bands, featured collections, editorial stories. Prioritise LCP: one primary image, lean scripts.
Product templates — isolate variant UX, care instructions, and cross-sells so the core buy box stays stable while surrounding content stays flexible. Pair with a deliberate product variant picker.
Collection templates — merchandising banners, filtering helpers, and SEO copy blocks that remain crawlable text—not only images.
Campaign landers — compose from the same library so seasonal pages do not invent a second design system.
App block vs custom section
Use an app when you need ongoing SaaS logic (reviews sync, personalization engines, complex subscriptions). Build a custom section when you need branded layout and content fields without a monthly script tax.
Do not recreate an entire page builder. Do not encode checkout business logic into a cosmetic section. And do not create twelve near-duplicate heroes that differ only by a class name—use one flexible section with intentional settings instead.
Performance considerations
Sections are not automatically fast. A section that loads four carousels and two third-party embeds can hurt the page. Build lean markup, lazy-load non-critical media, and avoid shipping section JavaScript globally when it only belongs on one template.
From an SEO perspective, sections should emit sensible heading hierarchy and crawlable text—not text locked inside images or late-loaded widgets. Use the Shopify speed optimization guide and technical SEO checklist for Shopify stores after you expand the library.
Practical implementation habits
- Develop on a duplicate theme.
- Name presets clearly for merchants.
- Document image ratios and max heading length.
- Test empty and filled states.
- Verify keyboard access for interactive blocks.
- Train the team with a short theme-editor walkthrough.
Migration projects should invent the section library during rebuild, not after. See migrate a store to Shopify. Budget notes: Shopify store cost in India.
QA checklist for new sections
Before publishing a section to the live theme, verify:
- Empty and filled content states
- Mobile layout at common breakpoints
- Keyboard access for interactive blocks
- Image alt text fields where relevant
- No console errors from section JS
- No layout shift when fonts or images load
- Compatibility with major apps already on the store
Then have a non-developer try to edit the section using only the labels in the schema.
Content governance
Sections make editing easier; they also make inconsistency easier if nobody defines rules. Create short guidelines: image aspect ratios per section, maximum heading length, when to use video, and which modules are allowed on product templates versus campaign landers.
Give one person ownership of the section library. When someone requests “just one more hero variant,” evaluate whether an existing setting covers it.
Related guides
- Shopify product variant picker
- Shopify theme customization
- Shopify apps vs custom development
- Shopify developer
- Shopify Liquid developer
Closing
Custom sections will not replace strategy. They will replace a lot of unnecessary tickets. Build modules around merchant workflows, keep them lean, and your store stays manageable long after launch week ends. For section systems designed around how your team actually edits the store, start from Shopify developer services.
Frequently asked questions
What is a custom Shopify section?
A section is a Liquid module with a schema that appears in the theme editor. A custom section is one built for your brand—beyond the theme’s defaults—so you can add specific layouts while keeping settings editable.
Do I need custom sections if my theme already has many modules?
Not always. Use theme sections first. Build custom ones when you repeat layouts the theme cannot express cleanly, or when an app is only providing a simple content block at a high performance cost.
Can non-developers edit custom sections?
Yes, if the schema is designed well—clear labels, sensible defaults, and blocks for repeating items. Poor schemas with cryptic settings still force merchant tickets to developers.
Are custom sections better than page builders on Shopify?
For most storefronts, yes. Native sections stay closer to Shopify’s rendering model and are usually lighter than stacking third-party page builders on every template.
Will custom sections survive a theme switch?
Sections are theme files. Switching themes means migrating or rebuilding them. Document section purpose and settings so a future theme project can port what matters.