Colors (Light)
Sets all the colors used when your store is displayed in light mode.
Where to find it
- In your Shopify admin, go to Online Store → Themes → Customize
- Click the Theme settings (gear icon) in the left panel
- Click Colors (Light)
Settings
General colors
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| Price | Sets the color used for product prices across your store | Color picker | None (uses theme fallback) |
| Sale price | Sets the color used for sale prices when a product is discounted | Color picker | None (uses theme fallback) |
| Error | Sets the color used for error messages, such as form validation alerts | Color picker | None (uses theme fallback) |
| Success | Sets the color used for success messages, such as confirmation notices | Color picker | None (uses theme fallback) |
| Selection highlight | Sets the background color that appears when a visitor highlights text on your store | Color picker | #b4d5fe |
| Selection text | Sets the text color that appears when a visitor highlights text on your store | Color picker | #000000 |
Primary colors
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| Background | Sets the background color for sections using the primary color scheme | Color picker | None (uses theme fallback) |
| Heading | Sets the color for headings in sections using the primary color scheme | Color picker | None (uses theme fallback) |
| Highlights heading | Sets the color for highlighted headings in sections using the primary color scheme | Color picker | None (uses theme fallback) |
| Text | Sets the color for body text in sections using the primary color scheme | Color picker | None (uses theme fallback) |
| Link | Sets the color for links in sections using the primary color scheme | Color picker | None (uses theme fallback) |
| Button background | Sets the background color for buttons in sections using the primary color scheme | Color picker | None (uses theme fallback) |
| Button text | Sets the text color for buttons in sections using the primary color scheme | Color picker | None (uses theme fallback) |
| Button border | Sets the border color for buttons in sections using the primary color scheme | Color picker | None (uses theme fallback) |
Secondary colors
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Background** | Sets the background color for sections using the secondary color scheme | Color picker | None (uses theme fallback) |
| **Heading** | Sets the color for headings in sections using the secondary color scheme | Color picker | None (uses theme fallback) |
| **Highlights heading** | Sets the color for highlighted headings in sections using the secondary color scheme | Color picker | None (uses theme fallback) |
| **Text** | Sets the color for body text in sections using the secondary color scheme | Color picker | None (uses theme fallback) |
| **Link** | Sets the color for links in sections using the secondary color scheme | Color picker | None (uses theme fallback) |
| **Button background** | Sets the background color for buttons in sections using the secondary color scheme | Color picker | None (uses theme fallback) |
| **Button text** | Sets the text color for buttons in sections using the secondary color scheme | Color picker | None (uses theme fallback) |
| **Button border** | Sets the border color for buttons in sections using the secondary color scheme | Color picker | None (uses theme fallback) |
Badge colors
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Sale** | Sets the background color for the sale badge shown on discounted products | Color picker | #111111 |
| **Text** (Sale) | Sets the text color for the sale badge | Color picker | #ffffff |
| **Sold out** | Sets the background color for the sold-out badge shown on unavailable products | Color picker | #e5e7eb |
| **Text** (Sold out) | Sets the text color for the sold-out badge | Color picker | #111111 |
| **Custom** | Sets the background color for any custom badges you create | Color picker | #111111 |
| **Text** (Custom) | Sets the text color for custom badges | Color picker | #ffffff |
Note
Where no default is listed, the color picker will be empty (transparent) until you set a value. This means the theme will use its built-in fallback colors.