Design
Where: Content → Design
The Design page holds your storefront's theme: typography, the colour palette, corner radius and card shadow. Every storefront page — and the admin and vendor dashboards, which take on your brand — reads these tokens, so a change here re-themes everything at once. Nothing is hardcoded per store; the theme is a setting you own.
Before you begin
- Your Store identity (name, logo, favicon) is set under Settings → Configuration — the preview uses it.
- Have your brand colours to hand as hex codes (for example
#1d7e95).
Describe a look, or pick one
- Under Describe a look, type what you want in plain words — the field's own example is "rugged industrial — dark charcoal header, safety-orange accents, sharp corners" — and press Suggest with AI. The suggestion fills every field below and re-themes the live preview; nothing is saved until you press Save design.
- Or choose a ready-made look under Pick a look. Each one sets fonts, colours and radius together; you can then adjust any field.
The fields
| Group | Field | What it controls |
|---|---|---|
| Primary colour | Primary brand colour | Buttons, active navigation, links — the colour buyers associate with you |
| Typography | Heading font · Body font | Font families for headings and body text; System default uses the visitor's system font |
| Colours | Accent colour | Highlights and secondary buttons |
| Secondary colour (editorial) | Editorial accents such as labels and eyebrow text | |
| Sidebar fill (Sidebar & headers) | The dark band behind navigation and dashboard rails | |
| Surface colour | Cards and panels | |
| Canvas colour (Page background) | The page background behind surfaces | |
| Text colour · Border colour | Body text and hairline borders | |
| Corner radius | Sharp (0px) · Subtle (3px) · Rounded (8px) · Soft (12px) · Pill (20px) | How rounded buttons, inputs and cards are |
| Card shadow | Default and alternatives | Depth of cards and popovers |
The live preview
The right-hand pane is a live storefront preview — edits re-theme it instantly; Save makes them real. It renders a real slice of your storefront (hero, category tiles, product cards, the Browse catalog and Request a quote calls to action) with your current data, so you judge the theme on your own catalog rather than on placeholder art. Use Preview width to switch between Desktop and narrower viewports.
Saving
Press Save design. The theme is stored as a tenant setting and applies to the storefront immediately; dashboards pick it up on their next load. To try a redesign without touching the live store, export the current look first from Storefront template so you can apply it back in one click.
Start from a preset or an AI suggestion and change one or two fields. Consistent contrast between Text colour, Surface colour and Canvas colour matters more than any single brand colour — check the preview's product cards are readable before you save.