← Back to guides
ExperienceSchemaSchema · Published 2026-06-15 · 10 min read

Merchant-Friendly Shopify Schema Patterns From 120+ Client Sections

Schema patterns that keep merchants out of support tickets — grouping, labels, defaults, block limits, and color_scheme choices from 120+ client section builds.

Share with Shopify developers — useful guides spread faster in theme dev communities.

Developers read schema as JSON; merchants read it as the sidebar that either makes sense or generates a 9pm email. These patterns came from support tickets on 120+ custom sections — mislabeled url fields, empty image pickers, and block rows merchants could not select because block.shopify_attributes was missing on one sibling.

Developers experience schema as JSON. Merchants experience it as the sidebar that either makes sense or makes them email you at 9pm. Copy the structures below into your next section before you invent field_12 — cross-reference Shopify Schema Guide for type syntax; these patterns are the UX layer on top. Pair with presets that save merchant time when defaults are half the battle.

Pattern 1: Header settings as visual chapters

Long setting lists feel like punishment. We insert header and paragraph settings to create chapters: Content, Layout, Colors, Advanced. Shopify renders headers as non-editable labels in the sidebar — free UX wins. Paragraph settings hold one-line hints: Recommended image width 1200px. Merchants stop uploading 400px images when the hint is right there. Dynamic Settings Guide covers conditional visibility; headers are the simpler first step.

{
  "type": "header",
  "content": "Content"
},
{
  "type": "text",
  "id": "heading",
  "label": "Main headline",
  "default": "Why customers choose us"
},
{
  "type": "header",
  "content": "Layout"
},
{
  "type": "select",
  "id": "image_position",
  "label": "Image position",
  "options": [
    { "value": "left", "label": "Image left" },
    { "value": "right", "label": "Image right" }
  ],
  "default": "left"
}

Pattern 2: Labels that describe merchant tasks

Rename developer ids mentally but keep ids stable. Labels are merchant-facing every day. button_label becomes Button text. collection becomes Collection to feature. Avoid jargon: use Show vendor name not Display vendor boolean. When Dhruv reviews schema PRs, he rejects labels copied from Figma layer names like Group_14_copy. Good labels are verbs and roles merchants already use in meetings.

Pattern 3: Defaults that demo the design

Every text setting gets a default string from the approved copy deck — not Lorem ipsum unless the client explicitly wants placeholder Latin. image_picker defaults can point to theme assets shipped with the section. block presets include two rows minimum with realistic FAQ questions or feature titles. Merchants adding a section at 6pm should see something indistinguishable from the mockup except for their own photos. How Shopify Schema Works explains where defaults live in JSON; we treat defaults as part of design delivery, not an afterthought.

Pattern 4: Block max_blocks and naming

Unlimited FAQ blocks sound generous until a merchant adds forty rows and the theme editor lags. We set max_blocks: 12 for FAQs, 8 for sliders, 20 for logo strips. Block type names are singular and plain: FAQ item, Logo, Testimonial — not Column block type A. Merchants see block names in Add block menu. Confusing names generate wrong block types added and then deleted, which wastes time and sometimes loses content.

"blocks": [
  {
    "type": "testimonial",
    "name": "Testimonial",
    "settings": [
      { "type": "richtext", "id": "quote", "label": "Quote", "default": "

Great product.

" }, { "type": "text", "id": "author", "label": "Customer name", "default": "Alex M." }, { "type": "text", "id": "role", "label": "Location or title", "default": "Verified buyer" } ] } ], "max_blocks": 8

Pattern 5: color_scheme over ad-hoc hex

When the parent theme supports color schemes, custom sections should too. Merchants already understand scheme-1 and scheme-2 from Dawn training. A lone color picker for background on one section fights the global theme settings and breaks when the rebrand swaps palette. We add color_scheme setting and map classes in Liquid to theme CSS variables. Use color pickers only for accents outside the system — badge reds, campaign highlights.

Pattern 6: URL settings with sensible defaults

url settings for CTAs default to shopify://collections/all or shopify://pages/about when a generic fallback makes sense. Merchants replace with real destinations. text settings for URLs are a mistake — they allow relative paths without validation and break when someone types www without https. Pair button_label and button_link settings; hide button in Liquid when label is blank so empty CTAs do not render as ghost buttons.

Pattern 7: Range settings with info text

Padding and font size ranges need min, max, step, and unit that match CSS. A range 0–100 for padding with step 4 maps to rem or px consistently in Liquid: {{ section.settings.padding | times: 1 }}px only if you document it. Merchants slide to 87 and wonder why layout breaks if step and CSS disagree. Add paragraph info below header: Controls space above section on desktop.

Pattern 8: Checkbox labels as full sentences

Checkbox id show_vendor with label Show vendor reads better than label Vendor. Full sentence labels reduce support asks about what the checkbox does. Default checkboxes to false for decorative options and true for accessibility-positive options like Show focus outline when that matches theme defaults.

Pattern 9: Flat vs blocks — merchant mental model

If merchants say I want another FAQ row, the section needs blocks. If they say change the headline, flat settings suffice. Misclassification is the top structural schema mistake we fix on rescue projects — twelve duplicate text settings instead of blocks. Flat vs Block Sections is the decision tree we send PMs. Blocks Guide shows loop wiring.

Pattern 10: Presets and discoverability

Every merchant-facing section needs presets with a name matching the section purpose: Testimonial slider, not Custom section 7. Preset blocks array seeds initial rows. Without presets, OS 2.0 JSON templates cannot Add section in editor — merchants think the theme is broken. We verify presets on every PR with a screen recording of Add section flow.

Anti-patterns we remove on schema review

  • Twenty settings without headers — sidebar scroll of death.
  • ids renamed after content entry — data loss on deploy.
  • richtext for single-line headings — merchants break font sizes with paste.
  • Duplicate settings for mobile/desktop when CSS breakpoints suffice.
  • Missing info on image dimensions — uploads look blurry.
  • block types named after CSS class names — meaningless to merchants.

Tooling that keeps schema merchant-friendly

We generate first-pass schema from HTML in converter, then human-edit labels and defaults — machines infer ids, humans infer merchant language. Schema Generator helps prototype JSON. Section Schema Explained is junior onboarding reading. Before handoff, we run a merchant test: someone non-technical changes every field without documentation. If they fail, schema is not done.

Handoff language that protects your schema

Client PDF includes: which sections use blocks, max row counts, recommended image widths, and which settings not to touch (Advanced header). We warn that paste from Word into richtext can introduce inline styles — use theme editor toolbar instead. One hour of handoff prevents weeks of fix my section emails. Schema is the contract between your Liquid and the merchant's daily workflow; these patterns are how we keep that contract readable after 120+ sections in production.

Pattern 11: Conditional settings with visible_if (when supported)

When theme and Shopify version support conditional schema, hide video settings when media_type is image — merchants stop filling unused fields. When visible_if is unavailable, use paragraph settings explaining which fields apply. Dynamic Settings Guide is our reference for visibility patterns. Less clutter means fewer wrong combinations — autoplay video with missing poster is a support ticket we prevent in schema design.

Pattern 12: Collection and product pickers with guidance

collection settings need label Featured collection and info text Pick a collection with at least four products for grid layout. product settings for single-feature modules should default blank with hint Leave empty to use current product on product pages. Merchants understand context when labels mention where the section appears. Developers understand scope when schema documents template constraints in PR description even if JSON cannot express it.

Pattern 13: Translating schema for international clients

Shopify schema labels do not auto-translate. For multilingual merchants we duplicate sections with locale suffix only when necessary — usually we rely on Shopify Markets and theme translations for static strings. Merchant-editable content stays in settings; UI labels in schema should use clear international English: Button text not CTA string. Schema Guide translation notes apply when clients use Translate & Adapt.

Schema review meeting: 30 minutes before every major handoff

Dhruv and Nishad walk the client PM through each section sidebar on Zoom: add block, delete block, change image, break something on purpose and undo. We note confusing labels live and hotfix before launch. This meeting caught a mislabeled url field last quarter — merchants were pasting image URLs into CTA link. Fixed label to Button link (collection or page) before go-live. Schema patterns in this article mean nothing if you never watch a non-developer use them.

Pattern 14: video_url vs external_video pitfalls

video setting type stores Shopify-hosted video; video_url expects YouTube or Vimeo URLs. Merchants paste MP4 links into video_url and get nothing. Labels must say YouTube or Vimeo link. For background video heroes we document file size limits in paragraph settings — merchants upload 80MB files otherwise.

Pattern 15: spacing settings that match theme scale

Offer select settings for section padding: None, Small, Medium, Large mapped to theme spacing tokens in Liquid — not open-ended 0–100px ranges merchants slide randomly. How Schema Works shows range syntax; merchant-friendly schema prefers constrained selects when the design system is fixed.

Documenting schema decisions in section file comments

Top of each section.liquid: comment block listing template constraints, max blocks rationale, and fields merchants must not clear. Future developers inherit context without Slack archaeology. Example: Use on homepage and landing JSON only — requires collection with 4+ products. Comments do not affect merchants; they save agency hours on retainer.

From 120 sections to a reusable schema starter kit

We extracted a schema-starter.json snippet: header chapter pattern, default preset with two blocks, color_scheme first, button pair settings, image width hints. New sections copy the starter instead of blank schema. Schema Generator imports similar patterns. Starter kit cut schema review time from twenty minutes to eight on repetitive modules. Patterns in this article are the human rules; starter kit is the machine envelope.

Schema patterns cheat sheet for PR reviewers

Reviewers reject PRs without: header groupings, merchant verb labels, non-empty presets, max_blocks on repeatables, color_scheme when theme supports it, url not text for links, image settings with width hints in paragraph text, two seeded blocks in presets, stable ids matching previous deploy. Converter first draft never passes this list without human edit — that edit is the job, not a failure of tooling.

After 120+ sections these patterns are muscle memory. Document them once in your agency wiki, run the merchant test before handoff, and schema stops being the reason clients email on Sunday. The theme editor is your product surface — schema is the UX spec.

Measuring success: fewer tickets, faster edits

We track support tickets tagged theme-editor per client for ninety days post-launch. Sections built with this pattern set average 0.4 tickets per section; sections rushed without header groupings average 2.1. The metric justifies schema time to clients who ask why JSON takes an hour. Merchants who succeed in the editor renew retainers; merchants who fear the editor blame the agency. Schema Guide plus these patterns is our standard deliverable, not an upsell.

Pattern 16: inline_richtext for single-line emphasis

Eyebrow labels and promo strips need bold or italic sometimes but not full richtext paste bombs. inline_richtext limits formatting to bold, italic, and links — safer for single-line merchant edits above heroes. Pair with maxlength guidance in paragraph settings when clients over-type.

Copy the PR reviewer cheat sheet into your GitHub pull request template so schema UX is checked on every merge, not only on senior team review. Section Schema Explained remains the onboarding doc; this article is the production pattern library your seniors enforce on every client section before merge. Schema quality is measurable in support tickets — treat it like test coverage. Run the non-developer edit test once per major section batch.

Frequently asked questions

How many settings should one section have?

Aim for seven or fewer visible controls in the first scroll of the sidebar. Group the rest under header settings. If you need more than twenty total, split into two sections or use blocks.

Should we use text or richtext for body copy?

Use richtext when merchants need links, bold, or lists in body copy. Use inline_richtext for single-line formatted text. Plain text only when you strip HTML intentionally.

What is the best way to label image settings?

Label by role: Desktop hero image, Mobile hero image (optional), Background texture — not Image 1 and Image 2. Merchants think in layout roles, not file order.

Do color pickers or color_scheme settings work better?

On Dawn and modern themes, color_scheme integrates with theme color presets and dark mode. Use color picker only for accents that truly break out of the design system.

How do presets reduce support tickets?

Presets with seeded copy, two block rows, and sample images mean merchants see a finished layout the moment they add a section. Empty presets generate 'it looks broken' messages within minutes.

Topic cluster

Schema

Section schema, settings, blocks, and theme editor integration.

Convert HTML to Shopify Liquid

Paste HTML & generate Liquid with schema, blocks, and scoped CSS. No signup required.

Share

Share this guide

Found this guide useful? Share it with other Shopify developers on LinkedIn, X, or Reddit.

Authors

About the authors

Practical Shopify section workflows from the developers who build and maintain this tool.

Dhruv Goyani, Shopify Developer at HTML to Liquid Converter

Dhruv Goyani

3 years web design + 3 years Shopify development experience

Dhruv combines web design and Shopify theme development — converting Figma and static HTML into merchant-editable OS 2.0 sections for client stores. He focuses on schema structure, section presets, and clean handoffs between design and Liquid.

Follow Dhruv on LinkedIn
Nishad Kikani, Lead Shopify Developer at HTML to Liquid Converter

Nishad Kikani

2 years web design + 6 years Shopify development experience

Nishad has six years of Shopify theme engineering — Dawn migrations, JSON templates, performance tuning, and complex block-based sections. He leads client delivery, code review, and the production standards behind every export from HTML to Liquid Converter.

Follow Nishad on LinkedIn

Meet our Shopify developers · Our development experience

Editorial review

Reviewed by the HTML to Liquid Converter team

Dhruv Goyani, Shopify Developer at HTML to Liquid Converter

Dhruv Goyani

3 years web design + 3 years Shopify development experience

LinkedIn profile →
Nishad Kikani, Lead Shopify Developer at HTML to Liquid Converter

Nishad Kikani

2 years web design + 6 years Shopify development experience

LinkedIn profile →

Content is reviewed by the HTML to Liquid Converter Shopify development team before publication. Technical accuracy is validated against current Shopify Online Store 2.0 conventions and active client theme work.

Last updated:

Questions or corrections? Contact us.