📄️ Getting Started
Custom themes give you full control over the storefront by writing Liquid templates, CSS, and JavaScript from scratch. Unlike CSS-only themes that override an existing skeleton, a custom theme defines every visual section independently.
📄️ CLI Development
The Easy Orders CLI (easyorders) lets you scaffold a theme project, run a local dev server, and preview Liquid/CSS/JS changes on a live store in real time — without uploading the theme on every edit.
📄️ Theme Settings
Beyond schema.json (global theme_data), custom themes support structured store settings that control the header, footer, announcement bar, and palette colors. Merchants edit these in the Home Builder → Theme settings panel. Theme authors preview them locally via config.json in the CLI theme/ folder.
📄️ Palette
The storefront injects 22 merchant-configurable colors as CSS custom properties on :root. Use these variables in your style.css so merchants can change colors from the admin panel without editing your theme files.
📄️ Dynamic Theme Data
Dynamic theme data lets merchants customize your theme without touching code. You define schemas — schema.json (store-wide), optional product-data-schema.json (per product), and section_schema in custom home blocks — and merchants fill values through the admin panel.
🗃️ Sections
4 items
📄️ Liquid Reference
EasyOrders custom themes use LiquidJS — a JavaScript implementation of the Liquid template language. Each section file (.liquid) is a Liquid template that gets rendered with store data injected as variables.
📄️ Events & Data Attributes
Custom themes communicate with the storefront through bubbling CustomEvents.