Theme: colours, fonts and page width
Pick a ready-made palette or set your own colours and fonts once, and the whole storefront follows. Add a favicon, then publish.
The theme holds the colours, fonts and page width that every page uses. Change a value once and the whole storefront follows, so your buttons, links and backgrounds always match. It also holds your favicon, the small icon in the browser tab.
Before you start#
- Use a desktop-size screen, at least 1024 px wide. The theme editor shows a message on smaller screens.
- You need design edit permission to change the theme, and design publish permission to publish it.
Open the theme editor#
Open Design, find the Store theme card (it says Theme & colours or Theme settings), and press it. You can also open it from the builder: More > Theme colours and fonts.
Choose colours#
- 1
Look at the palettes
Under Ready-made palettes pick a look in one click. Use the palette group filter, and Preview palettes in Light or Dark.
- 2
Use one
Press Use this palette. It fills in every colour for light and dark mode. Nothing goes live until you publish.
- 3
Or start from a preset
Start from a preset fills in the colours, fonts and page width of a ready-made look. Other values you already set stay.
- 4
Adjust by hand
Open Customize colours (or Advanced: adjust colours yourself) and change single values. Switch Colour mode between Light and Dark to set each one.
- 5
Publish
Press Publish. If there is nothing new, the editor says "Nothing new to publish".
What a value can look like#
| Kind of value | Allowed |
|---|---|
| Colours | #hex, rgb(), hsl() or a colour name |
| Fonts | font names and commas |
| Sizes | a number with px, rem, em or % |
A value that is not allowed is refused with a message, so a typo cannot break your storefront.
Favicon#
Under Favicon (browser tab icon) pick a square PNG, JPEG, WebP, GIF or ICO picture from your media library. Without a favicon, browsers show no icon. Remove favicon takes it away again.
Custom CSS#
Advanced users can add Custom CSS. It applies only to your live storefront, after publishing. These parts are removed when you publish: @import, remote fonts, scripts and outside images. Images must come from your media library. The editor lists what was removed.
Common problems#
The theme editor will not open
It needs a screen at least 1024 px wide. Use a computer or a tablet held wide.
My colour was refused
Write colours as #hex, rgb(), hsl() or a colour name. For sizes use a number with px, rem, em or %.
My custom CSS partly disappeared
Imports, remote fonts, scripts and outside images are removed on publish. Upload pictures to your media library and use those.
Comments (0)
Anyone can comment. Please do not post phone numbers, passwords or customer details.