Themes, customizer & Liquid
How storefronts render — themes, sections, the customizer, and the Liquid data model.
Storefronts render from a theme: Liquid templates + sections + assets + settings. Merchants edit it visually in the customizer; you can edit theme files directly over the API/MCP.
Anatomy
- Layout (
layout/theme.liquid) — the HTML shell; loadstheme.jsand the settings CSS variables. - Templates (
templates/<name>.json) — which sections render on a page (index,product,collection,page,article, content-type templates…). - Sections (
sections/*.liquid) — reusable blocks with a{% schema %}of editable settings + presets. - Settings — the global palette/typography tokens, surfaced as CSS variables.
The customizer
The customizer edits a draft theme: global settings (palette, fonts) and per-
section settings. Verify on the draft (preview), then publish; rollback is
instant. Drive it over the API/MCP with set_global_settings,
build_section, set_section_settings, publish_draft_theme,
clear_storefront_cache.
The Liquid data model
Sections bind to live data — products, collections, menus, the content drop,
and per-template data keys. Inspect the available objects with the MCP
list_liquid_objects tool before authoring a section so you reference real
variables.
Design contract
Custom layouts must keep theme.js + the settings CSS variables; sections need a
complete {% schema %}. Bind colors to palette variables (e.g. var(--accent)),
never hard-coded hex. The shop-core-rules
playbook (§F–§H) is the canonical contract.
Sections you can edit
Build customizer-editable sections with the
shop-build-section playbook — it covers
the schema shape, palette wiring, and placing the section on a template.