Store admin
Colors and dark mode
Choose a ready-made palette or hand-pick every colour for light and dark mode, and set corner radius and shadows, from the Colors tab.
The Colors tab sets the storefront’s whole colour scheme: buttons, the top bar, backgrounds, text, borders, corner radius and shadows. Every colour has a light and a dark value, and shoppers switch between light and dark mode on the storefront. Changes reach shoppers within about 5 minutes, with no redeploy.
StoreFrontSettingsColorsBefore you start
Section titled “Before you start”- Have your brand colours to hand, ideally as hex codes such as
#11663F. - Know that the storefront opens in light mode. Shoppers switch to dark mode with the light/dark toggle, which is the Theme switch item in your footer (by default in the centre of the copyright row). Keep that item in your footer so shoppers can switch. See Footer and mobile bar.
How the Colors tab is laid out
Section titled “How the Colors tab is laid out”| Control | What it does | Default |
|---|---|---|
| Predefined palette: “Pick one of the ready-made storefront palettes.” | Takes the 13 brand and button colours from a ready-made palette. You can still adjust any of them, and every other colour stays editable. | — |
| Custom colors: “Hand-pick every token to match an exact brand.” | Every colour uses exactly the value you type. | Selected on a fresh install, filled with the Forest colours |
| Editing: Light / Dark | Chooses whether the editor and preview show the light or the dark values. Only changes what you’re looking at; it isn’t saved. | Light |
| Palette cards (Predefined only) | Each card shows the palette’s name and five swatches. The list is folded down to the selected palette; Change palette opens it and Hide palettes closes it. | Forest |
| Colour editor (“Palette colors — light/dark” or “Custom colors — light/dark”) | One row per colour, in folding groups. Each row has a text box for the value and a swatch that opens your browser’s colour picker. The Brand & buttons group is open first. | — |
| Reset to palette (Predefined) | Removes your adjustments to the palette, in both light and dark. Greyed out when there are none. | — |
| Reset to default (Custom) | Resets every colour, in both modes, to its starting value. See the tip below before using it. | — |
| Storefront preview | A small mock-up of the storefront (top bar, navigation, hero, product cards, an Add to cart button, a hover state, a secondary button and body text) drawn with the current values. | — |
Use a ready-made palette
Section titled “Use a ready-made palette”-
Open the Colors tab and choose Predefined palette.
-
Click Change palette and pick one of the palettes. The Storefront preview updates straight away.
-
Switch Editing to Dark to check the dark version of the palette.
-
Optional: adjust any colour in the editor below. Your adjustments are kept on top of the palette.
-
Click Save Changes.
The eleven palettes
Section titled “The eleven palettes”A palette sets the 13 Brand & buttons colours only. The table shows each palette’s main colours in light mode; each one also has its own dark version.
| Palette | Primary (buttons, top bar) | Button hover | Secondary | Accent |
|---|---|---|---|---|
| Forest (default) | #11663F deep green |
#0A3D28 |
#D2DB5C lime |
#D2DB5C lime |
| Beauty Shop | #072835 navy-teal |
#0E3E50 |
#64B7A6 |
#FBE9E9 blush |
| Blossom | soft pink | deeper pink | pale blue | bright yellow-green |
| Lime | #D2DB5C lime, with green text |
#A8B12E |
#11663F |
#D2DB5C |
| Ink | #111827 near-black |
#374151 |
#4B5563 |
#FBBF24 amber |
| Ocean | #1E6F8B sea blue |
#155467 |
#38BDF8 |
#F4A259 |
| Berry | #7C3AED violet |
#5B21B6 |
#C4B5FD |
#FCD34D |
| Sunset | #EA580C orange |
#C2410C |
#009688 teal |
#FDBA74 |
| Rose | #E11D48 rose red |
#BE123C |
#FDA4AF |
#F5B841 |
| Crimson | #DC2626 red |
#B91C1C |
#0A0A0A black |
#DC2626 |
| Slate | #475569 slate grey |
#334155 |
#38BDF8 |
#38BDF8 |
Beauty Shop is hand-tuned: its blush accent colours the top bar and the promo roundel.
Hand-pick your own colours
Section titled “Hand-pick your own colours”-
Open the Colors tab and choose Custom colors.
-
With Editing on Light, open each group and set the colours. Type a value into the text box, or click the swatch to use your browser’s colour picker.
-
Switch Editing to Dark and set the dark values. Every colour has its own dark value; nothing is worked out for you.
-
Check both modes in the Storefront preview.
-
Click Save Changes.
Every colour, group by group
Section titled “Every colour, group by group”The defaults are what a fresh install shows. Each colour becomes a setting the storefront uses everywhere that kind of colour appears.
Brand & buttons
Section titled “Brand & buttons”These 13 colours are the ones a palette sets. Defaults come from Forest.
| Setting | What it colours | Default light | Default dark |
|---|---|---|---|
| Brand / Topbar | The top bar and brand areas | #11663F |
#3E946A |
| Brand Text | Text on the brand colour | #FFFFFF |
#04150D |
| Primary / Button Background | Main buttons | #11663F |
#3E946A |
| Primary Text | Text on main buttons | #FFFFFF |
#04150D |
| Button Border | Main button borders | #11663F |
#3E946A |
| Button Hover Background | Main buttons under the pointer | #0A3D28 |
#57AC82 |
| Button Hover Text | Their text on hover | #FFFFFF |
#04150D |
| Button Hover Border | Their border on hover | #0A3D28 |
#57AC82 |
| Secondary | Secondary buttons and highlights | #D2DB5C |
#D2DB5C |
| Secondary Text | Text on the secondary colour | #11663F |
#0A3D28 |
| Accent | Badges and accents | #D2DB5C |
#D2DB5C |
| Accent Text | Text on the accent colour | #11663F |
#0A3D28 |
| Focus Ring | The outline shown when moving through the page with a keyboard | #11663F |
#3E946A |
Surfaces & text
Section titled “Surfaces & text”| Setting | What it colours | Default light | Default dark |
|---|---|---|---|
| Page Background | The page behind everything | oklch(0.9809 0.0025 228.7836) |
oklch(0.2303 0.0125 264.2926) |
| Body Text | Ordinary text | oklch(0.3211 0 0) |
oklch(0.9219 0 0) |
| Card Background | Cards and panels | oklch(1.0000 0 0) |
oklch(0.3210 0.0078 223.6661) |
| Card Text | Text on cards | oklch(0.3211 0 0) |
oklch(0.9219 0 0) |
| Popover Background | Menus, drop-downs and pop-ups | oklch(1.0000 0 0) |
oklch(0.3210 0.0078 223.6661) |
| Popover Text | Text in them | oklch(0.3211 0 0) |
oklch(0.9219 0 0) |
| Muted Surface | Quiet backgrounds | rgb(246, 246, 246) |
oklch(0.3867 0 0) |
| Muted Text | Secondary text | oklch(0.5382 0 0) |
oklch(0.7155 0 0) |
| Border | Dividers and borders | #E6E9EB |
oklch(0.3867 0 0) |
| Input Border | Form field borders | #DEDEDE |
oklch(0.3867 0 0) |
Feedback
Section titled “Feedback”| Setting | What it colours | Default (light and dark) |
|---|---|---|
| Destructive | Errors and “remove” actions | oklch(0.6368 0.2078 25.3313) |
| Destructive Text | Text on that colour | oklch(1.0000 0 0) |
Charts
Section titled “Charts”| Setting | Default light | Default dark |
|---|---|---|
| Chart 1 | oklch(0.8677 0.0735 7.0855) |
oklch(0.8027 0.1355 349.2347) |
| Chart 2 | oklch(0.8148 0.0819 225.7537) |
oklch(0.7395 0.2268 142.8504) |
| Chart 3 | oklch(0.9680 0.2110 109.7692) |
oklch(0.8148 0.0819 225.7537) |
| Chart 4 | oklch(0.8027 0.1355 349.2347) |
oklch(0.9680 0.2110 109.7692) |
| Chart 5 | oklch(0.7395 0.2268 142.8504) |
oklch(0.8652 0.1768 90.3816) |
Sidebar
Section titled “Sidebar”| Setting | Default light | Default dark |
|---|---|---|
| Sidebar Background | oklch(0.9809 0.0025 228.7836) |
oklch(0.2303 0.0125 264.2926) |
| Sidebar Text | oklch(0.3211 0 0) |
oklch(0.9219 0 0) |
| Sidebar Primary | oklch(0.8677 0.0735 7.0855) |
oklch(0.8027 0.1355 349.2347) |
| Sidebar Primary Text | oklch(0 0 0) |
oklch(0 0 0) |
| Sidebar Accent | oklch(0.9680 0.2110 109.7692) |
oklch(0.8148 0.0819 225.7537) |
| Sidebar Accent Text | oklch(0 0 0) |
oklch(0 0 0) |
| Sidebar Border | oklch(0.8699 0 0) |
oklch(0.3867 0 0) |
| Sidebar Focus Ring | oklch(0.8677 0.0735 7.0855) |
oklch(0.8027 0.1355 349.2347) |
Most stores leave the Charts and Sidebar groups at their defaults.
Shape & shadow
Section titled “Shape & shadow”Each of these also has a dark value; the defaults are the same in both modes.
| Setting | What it does | Default |
|---|---|---|
| Corner Radius | How rounded cards, fields and panels are. 0 gives square corners. |
0.5rem |
| Shadow Color | The colour of every shadow | oklch(0 0 0) (black) |
| Shadow Opacity | How strong shadows are, from 0 (none) to 1 |
0.1 |
| Shadow Offset X | How far shadows fall sideways | 0 |
| Shadow Offset Y | How far shadows fall downwards | 1px |
| Shadow Blur | How soft shadow edges are | 3px |
| Shadow Spread | How far shadows grow beyond the element | 0px |
You never write shadow code: the storefront turns these six values into a full range of shadow sizes, from the faintest to the most lifted.
Values you can type
Section titled “Values you can type”Each value can be up to 64 characters.
- Colours: a hex code (
#rgbor#rrggbb), or one of the colour functionsoklch(),oklab(),lch(),lab(),hwb(),rgb(),rgba(),hsl()orhsla(). Colour names such asredaren’t accepted. - Corner Radius and the shadow sizes:
0, or a number followed byrem,emorpx, for example0.5remor3px. - Shadow Opacity: a number from
0to1.
Get back to the original look
Section titled “Get back to the original look”Troubleshooting
Section titled “Troubleshooting”| Symptom | Likely cause | What to do |
|---|---|---|
| A colour went back to something else after saving | The value wasn’t accepted, so the default was used | Re-enter it as a hex code or a supported colour function. |
| The storefront doesn’t show the new colours | Changes take up to 5 minutes | Wait, then reload the storefront with a hard reload. |
| Dark mode looks wrong | Dark values weren’t set | Switch Editing to Dark and set them. |
| Shoppers can’t switch to dark mode | The footer has no Theme switch item | Add a Theme switch (light / dark) item to the footer. |