Customize
Color schemes
How Loco's color schemes work, which element takes which color, the four schemes in each preset, and how to make your store light or dark.
A color scheme is a set of nine colors. Each preset comes with four schemes. Every section, the header and the footer use one scheme, so you can change the look of many sections at once by editing one scheme.
Edit a color scheme
- In the theme editor sidebar, click Theme settings, then Colors.
- Click the scheme you want to change. The editor lists the schemes by number, from Scheme 1 to Scheme 4.
- Change any of its nine colors. Every section that uses the scheme updates in the preview.
The nine colors
The colors come in pairs: each background has a text color that sits on it.
| Color | Where it is used |
|---|---|
| Background | The page background of every section in this scheme. |
| Text | All text on the background: headings, body text, links and icons. Muted text, lines and field borders are mixed from Text and Background. |
| Panel background | Raised surfaces: the header bar and the panels of slideshows and promo banners. With the Soft panels and Crisp sheets design styles also product cards, the area behind product images and the bar that follows the scroll, and with Soft panels the cart summary. Menus, drawers and dialogs use a slightly lighter shade of it. |
| Panel text | Text on Panel background and on menus, drawers and dialogs. |
| Button | The fill of the main button, such as Add to cart and checkout. |
| Button label | The text on the main button. |
| Secondary button | The outline and label of secondary buttons in the Paper and rules and Crisp sheets design styles. In Soft panels, secondary buttons have a shaded fill with a label in the Text color, so this color has no visible effect there. |
| Accent | Used for sale prices, progress bars and the current menu item. In some schemes also for prices. |
| Highlight | Used for countdown numbers, promo banner highlights and the complementary products heading. |
About prices: with the Soft panels design style, prices take the Accent color in Schemes 1, 2 and 3, and the Text color in Scheme 4. With Paper and rules and Crisp sheets, prices use Text. If Accent is hard to read on the background, prices use Text instead. A sale is always shown with the crossed-out compare-at price too, not only with color.
Loco also works out the in-between shades from your nine colors: input fields, hover and pressed states, dividers and the fills of shaded buttons. When your colors change, these shades follow them.
The schemes in each preset
Each preset gives its schemes a purpose. The editor shows them by number. The names below are how this documentation and the preset descriptions refer to them.
Loco
| Scheme | Name | Used for |
|---|---|---|
| Scheme 1 | Dark | The dark storefront: most sections and the header. |
| Scheme 2 | Darker | The footer, the announcement bar and signup sections. |
| Scheme 3 | Light | A light Loco: the whole store, or single light sections. |
| Scheme 4 | Signal | A yellow band for promotions and countdowns. |
Almanac
| Scheme | Name | Used for |
|---|---|---|
| Scheme 1 | Paper | The light, paper-colored store: most sections and the header. |
| Scheme 2 | Bottle green | The footer, signup sections and notes. |
| Scheme 3 | Night | A dark store, or single dark sections. |
| Scheme 4 | Cinnabar | A red band for promotions and the announcement bar. |
Roster
| Scheme | Name | Used for |
|---|---|---|
| Scheme 1 | White | The light store with white sheets: most sections and the header. |
| Scheme 2 | Graphite | The footer and sections for trade customers. |
| Scheme 3 | Safety | A yellow band for offers and the announcement bar. |
| Scheme 4 | Blueprint | A blue band for trade accounts and guides. |
Where each preset puts them after installation:
| Area | Loco | Almanac | Roster |
|---|---|---|---|
| Announcement bar | Scheme 2 (Darker) | Scheme 4 (Cinnabar) | Scheme 3 (Safety) |
| Header | Scheme 1 (Dark) | Scheme 1 (Paper) | Scheme 1 (White) |
| Email signup above the footer, and Footer | Scheme 2 (Darker) | Scheme 2 (Bottle green) | Scheme 2 (Graphite) |
| Sections on your pages | Scheme 1 | Scheme 1 | Scheme 1 |
New sections you add also start in Scheme 1, except a new announcement bar or footer, which starts in Scheme 2. Schemes 3 and 4 are ready for you to use where you want a band of color or a change of mood.
Assign a scheme to a section, the header or the footer
- In the theme editor, click the section in the sidebar. For the header, footer or announcement bar, click it in the header or footer area of the sidebar.
- Find Color scheme in the section's settings.
- Choose a scheme. The preview updates right away.
The header, announcement bar, email signup and footer each have their own Color scheme, as does every section you add. A scheme changes everything inside the section, so a dark section looks right inside a light store and the other way around.
The cart drawer, quick view, the popup and age verification always use Scheme 1.
Make Loco light
The Loco preset is dark. Its Scheme 3 (Light) is a light version made for it: a light gray page, white panels, a deep amber accent instead of yellow, and the same green button. To make the whole store light:
- Click the Header and set Color scheme to Scheme 3.
- Do the same for every section on every page you use. Start with the home page, then open the product, collection, cart, search and other page templates from the page menu at the top of the editor.
- Decide on the edges. The announcement bar, the email signup above the footer and the footer use Scheme 2 (Darker), which gives a light page dark edges. Set them to Scheme 3 too for a fully light store.
Because the cart drawer, quick view, the popup and age verification always use Scheme 1, they stay dark after these steps. If you want them light as well, use this alternative instead:
- In Theme settings > Colors, open Scheme 3 and note its nine colors.
- Open Scheme 1 and enter the same nine colors.
- Every section that uses Scheme 1 turns light, along with the cart drawer and dialogs. Change Scheme 3 to dark colors if you still want a dark scheme for single sections.
Almanac and Roster are already light. For a dark section in those presets, use Scheme 3 (Night) in Almanac or Scheme 2 (Graphite) in Roster.
Readable colors and the contrast warning
Loco always uses the colors you choose. It does not replace them, even when they are hard to read. To help you, the editor shows a one-line note above every section that uses a scheme with a hard-to-read pair:
"Text in this color scheme may be hard to read. Choose colors with more contrast."
The note appears only in the theme editor. Customers never see it.
The note appears when one of these pairs has a contrast ratio under 4.5:1, the minimum for readable text:
- Text on Background
- Panel text on Panel background, and on the lighter shade used by menus, drawers and dialogs
- Button label on Button
The Text, Panel text and Button label settings give the same advice in the editor, for example: "Use a color with at least 4.5:1 contrast on Background."
To clear the note:
- Open the scheme in Theme settings > Colors.
- Make the text color in the pair darker on a light background, or lighter on a dark background.
- Check the result with a contrast checker, for example the WebAIM Contrast Checker. Enter the two colors and aim for 4.5:1 or more.
When Accent is hard to read on the background, prices switch to Text on their own, so prices stay readable. Sale prices and the current menu item still use Accent, so keep it readable too. Avoid bright yellow as Accent on a light background: it reads poorly on white.