Themes

Themes control the colors, typography, and spacing across your storefront. Instead of editing CSS directly, you adjust named theme tokens that propagate to every element on the page.

Customizing Your Theme

Open the theme editor at Dashboard > Customization > Theme. The editor gives you controls for each token category (color pickers, font selectors, and spacing sliders) alongside a preview of your storefront so you can see changes before publishing.

Before customizing colors, make sure Use Theme Colors is toggled on. When it is off, the template’s built-in color defaults are used and any custom values you set will not appear on your storefront.

Click Save when you are happy with your changes. They take effect on the live storefront immediately.

Theme Token Reference

useThemeColors

Token	Type	Description
`useThemeColors`	`boolean`	When `true`, your custom color overrides are applied. When `false`, the template’s built-in defaults are used.

Colors

Token	Description	Example
`primary`	Main brand color used for buttons, links, and interactive elements	`#6366f1`
`primaryForeground`	Text color on primary backgrounds	`#ffffff`
`secondary`	Supporting accent color for secondary actions and highlights	`#f59e0b`
`secondaryForeground`	Text color on secondary backgrounds	`#ffffff`
`card`	Background color for product cards and content cards	`#ffffff`
`cardMuted`	Background for less prominent card areas or nested cards	`#f9fafb`
`accent`	Highlight color for badges, tags, and decorative elements	`#8b5cf6`
`background`	Main page background color	`#f3f4f6`
`text`	Primary body text color	`#111827`
`textMuted`	Secondary or subdued text (descriptions, captions)	`#6b7280`
`border`	Color for borders, dividers, and outlines	`#e5e7eb`
`headerPrimary`	Header background color	`#1f2937`
`headerSecondary`	Header secondary/accent color (dropdowns, hover states)	`#374151`
`footerPrimary`	Footer main background color	`#111827`
`footerSecondary`	Footer secondary background (bottom bar, sub-sections)	`#1f2937`
`footerTextPrimary`	Main text color in the footer	`#f9fafb`
`footerTextMuted`	Subdued text color in the footer (links, copyright)	`#9ca3af`

Typography

Token	Type	Description	Example
`fontFamily`	CSS font stack	Font family applied to all body text	`"Inter", sans-serif`
`headingSize`	`string`	Base size multiplier for headings (h1-h6)	`1.25rem`
`bodySize`	`string`	Base size for body text	`1rem`

Spacing

Token	Type	Description	Example
`sectionPadding`	`string`	Vertical padding between major page sections	`3rem`
`cardPadding`	`string`	Internal padding within cards	`1.5rem`

Border Radius

Token	Type	Description	Example
`borderRadius`	`string`	Corner rounding applied to cards, buttons, and inputs	`0.5rem`

Resetting to Defaults

To undo all your customizations, open the theme editor and click Reset to Defaults at the bottom of the panel. This restores every token to the default values defined by your current template. Your products, layout, and other store settings are not affected.

Resetting cannot be undone. Note down your token values first if you want to keep a backup.