The theme editor
Open the editor from Storefront → Themes → Customize. It's a two-pane view: your controls on the left, a live preview of your actual storefront on the right.
Palette
Typography & shape
Design tab
Colors, typography, and shape:
- Color scheme presets — one-click palettes, or dial in individual tokens (background, text, surface, primary, accent, plus advanced tokens like borders and focus rings) by hex or color picker.
- Fonts — pick a heading and body font from Google Fonts, searchable by name.
- Light or dark mode— set your storefront's default appearance.
- Corner style — sharp, soft, or fully rounded, applied across every button and card.
Sections tab
Your homepage (and other theme pages) are built from sections — announcement bar, header, hero, featured collection, product spotlight, editorial, category grid, gallery, testimonials, rich text, newsletter, footer. Drag to reorder, toggle visibility, and edit each section's own content (heading, image, button text and destination) inline.
Advanced tab
For merchants comfortable with CSS, a custom CSS editor lets you fine-tune beyond what the Design tab exposes. It's gated behind a warning the first time, since custom CSS can affect your entire storefront's appearance.
Previewing before you publish
The right pane always reflects your unsaved changes, with a toggle between desktop and mobile views. Nothing reaches your live storefront until you click Publish — the toolbar tells you whether you have unpublished changes at a glance.
Reset if you want a clean slate