Colors and color schemes
Treble uses Shopify color schemes. A scheme is a set of colors (background, text, buttons, borders) that a section, block or drawer can use. Edit a scheme once and every place that uses it updates.
How to set it up
Step 1: Edit color schemes
- Open Theme settings > Colors.
- Click a scheme to edit its colors, or Add scheme for a new one.
- Choose the Page color scheme (1): the background of the page between sections.
Step 2: Use a scheme in a section
- Select a section and choose its Color scheme.
- Drawers, pop-ups and some blocks have their own scheme setting too, for example the mega menu, menu drawer, flyout and promo cards.
Step 3: Set the status colors
- Under Status colors, set Sale, Rating stars, Success / in stock, Low stock, Error and the Keyboard focus ring.
Settings reference
Colors
| Page color scheme | Colors from Theme settings > Colors. |
|---|---|
| Status colors | |
| Sale | |
| Rating stars | |
| Success / in stock | |
| Low stock | |
| Error | |
| Keyboard focus ring | Empty: the text color of each section. |
How it works
- Use a dark scheme for a section to make it stand out; the logo switches to Logo for dark backgrounds where one is set.
- The keyboard focus ring follows the text color of each section when left empty, so it always shows.