Theme and colours
Set the fonts, colours and corners your whole shop uses, then override them where you need to.
The theme is how your shop looks: its fonts, colours and corners. You set it once for the store, and every page picks it up. A single page can override the store's theme, and a single block can override its page.
Change the store theme
- Open Store settings, then Theme.
- Pick a starting point under Start from a preset, or skip to the fields below. Moods set the fonts, spacing and section style as well as the colours; Palettes set the colours only.
- Under Type, choose the fonts for Headings and Body text, the Heading weight, Letter spacing, Heading size and Small labels (the short line above a heading, like NEW).
- Under Colour and shape, choose Light or Dark, the Corner radius, and the Colours.
- Check the Live preview, then choose Save theme.
Applying a preset saves it right away, and so does Save theme. Theme changes reach your live shop without publishing any page.
The colours
Each colour is named for what it paints:
| Colour | Where it shows |
|---|---|
| Page background | Behind the whole page |
| Card background | Cards, panels and the checkout box |
| Section background | Bands that sit apart from the page |
| Body text | Headings and paragraphs |
| Secondary text | Captions, help text and small print |
| Lines and borders | Dividers, card outlines and input edges |
| Buttons and links | Buy buttons, links and focus rings |
| Text on buttons | The label inside a filled button |
| Highlights | Eyebrows, badges and small flourishes |
A colour you leave unset uses the default.
Contrast warnings
If two colours are too close to read, for example body text on the page background or the label on a buy button, the theme shows a warning such as One colour pair may be hard to see, with the pair and how far apart they are. It never stops you saving. Change either colour in the pair to clear it.
Advanced
Advanced lists colour names your shop no longer paints with. They were saved before the list above existed and are kept so nothing is lost. Removing one removes it for good.
Override the theme on one page
In the builder, open the Theme tab. There you can set a Font (or Use the store's font), a Corner radius and Colours for this page only. A colour you leave on Store's follows the store theme.
Page overrides are part of the page's draft, so they go live when you publish the page. They apply to block pages only; an HTML page carries its own CSS.
Override one block
Select a block and open Appearance. Its colours sit over the page's, and the page's over the store's. The builder marks a block whose colours may be hard to read.