Storefront
Theme & Colors
Customize your storefront's color scheme with design tokens.
Make your store match your brand with a fully customizable color system.
Accessing theme settings
Go to Storefront Settings → Appearance tab.
App theme
Choose the base theme:
- Light — light background, dark text
- Dark — dark background, light text
- System — follows the customer's device preference
Design tokens
Fine-tune individual UI elements by selecting them and adjusting colors:
Background & surfaces
| Token | Controls |
|---|---|
| Page background | Main page background color |
| Main text | Primary text color |
| Cards & blocks | Card and container backgrounds |
| Dropdowns | Popover and dropdown backgrounds |
| Borders & dividers | Lines and separators |
| Input border | Form field borders |
| Focus outline | Focus ring around interactive elements |
| Placeholder text | Muted helper text |
Buttons
| Token | Controls |
|---|---|
| Main button | Primary CTA button background |
| Main button text | Text on primary buttons |
| Outline button | Border, background, and text for outline-style buttons |
| Secondary button | Secondary action buttons |
| Danger button | Destructive action buttons |
Gradients
Configure a two-color gradient used for highlighted elements like sale badges and accent decorations:
- Color 1 — gradient start
- Color 2 — gradient end
Live preview
The Live Preview panel shows your storefront with the selected colors in real-time. Changes appear instantly as you adjust tokens.
Resetting colors
- Reset individual tokens to their default values
- Reset all to restore the complete default theme