Help Center / Online store and design · Reference
Theme settings: colour schemes
What a colour scheme is, the ten colours in each one, and how to add or delete a scheme.
- Who can use this
- Shop owner, Shop Marketing Manager
Help Center / Online store and design · Reference
What a colour scheme is, the ten colours in each one, and how to add or delete a scheme.
A colour scheme is a named set of ten colours. Each section uses one scheme, so changing a scheme recolours every section that uses it.
Colour schemes is the first group in the editor's Theme tab. Theme settings apply to the whole store. They are part of the draft and go live when you publish. See Publish.
Schemes are numbered: Scheme 1, Scheme 2 and so on. Each row shows an "Aa" sample in the scheme's background and text colours. Select a row to open its colours.
A new draft starts with the schemes of its theme and ready-made layout. The theme defaults are four schemes in Essence, five in Souq, Halo and Bazar, and six in Pronto.
Every scheme has the same ten colours in all five themes.
| Colour | Paired with |
|---|---|
| Background | Text |
| Muted background | Muted text |
| Primary button | Primary button text |
| Accent | Accent text |
| Borders | — |
| Cards | — |
A scheme row shows Low contrast when its Text colour is hard to read on its Background. The badge appears when the contrast ratio between those two colours is below 4.5:1. The other eight colours are not checked.
The badge is a warning. It does not stop you editing the scheme.
Select Add scheme below the list. The new scheme takes the next number and starts as a copy of Scheme 1. Open it and change its colours.
Select the bin icon on a scheme row. Scheme 1 has no bin icon and cannot be deleted.
If no section uses the scheme, it is deleted at once.
If sections use it, the editor says how many sections use the scheme and lists where. Then:
The sections move to the scheme you chose and the old scheme is removed in one step. A notice confirms it, for example "Deleted Scheme 3 — its sections now use Scheme 1." You can undo the deletion.
A section picks its scheme in its own settings. See Field types and Section settings.