Create color schemes once and apply them to sections across your store, so every page keeps the same look.
Schemes
You can define different color schemes in your theme settings and apply the color schemes across sections throughout the theme. A color scheme is a set of colors. Your theme includes a set of default color schemes that you can change at any time in the theme editor.
How to Add or Edit a Color Scheme?
Steps
- From your Shopify admin, go to Online Store > Themes.
- Click Edit theme next to the theme you want to customize.
- Click the gear icon, then click Colors.
- In the Schemes section, click an existing scheme or click Add scheme to create a new color scheme.
- Click the color swatch for the content type color you want to change.
- To set your color, enter a hex color code or choose a color from the color picker. To make the color transparent, delete the hex code from the text field.
- Click Save.
How to delete a Color Scheme?
Steps
- From your Shopify admin, go to Online Store > Themes.
- Click Edit theme next to the theme you want to customize.
- Click the gear icon, then click Colors.
- In the Schemes section, click an existing scheme you would like to delete.
- Click "Remove color scheme" at the bottom of the selected scheme to delete the color scheme.
Deleting color schemes is available from 2026 onwards. Earlier, color schemes couldn't be removed.
Applying Color Schemes
After defining your color schemes in the theme settings, you can assign a color scheme using the color scheme picker in your theme's sections and blocks. The color scheme picker is only available in certain sections, blocks, and general theme settings.
Color scheme colors
Each color scheme has the following colors. To make a color transparent, delete its hex code.
General
| Setting | Type | Default | Description |
|---|---|---|---|
| Text | Color | #111111 |
Text and icon color. |
| Background | Color | #FFFFFF |
Section background color. |
| Borders | Color | #DDDDDD |
Lines, dividers and input borders. |
| Button text | Color | #FFFFFF |
Text color of solid buttons. |
| Button background | Color | #111111 |
Background color of solid buttons. |
| Outline button / Links | Color | #111111 |
Outline buttons and text links. |
| Sale price | Color | Transparent | Sale prices on the section background, and on cards with text position "Outside the card". Leave transparent to use the text color. |
Cards
| Setting | Type | Default | Description |
|---|---|---|---|
| Card text | Color | #111111 |
Text color on product, collection and article cards. |
| Card background | Color | #FFFFFF |
Card background color. |
| Sale price on card background | Color | Transparent | Sale prices on cards with text position "Inside the card". Leave transparent to use the card text color. |
Overlay colors
Used when text and buttons are placed on top of images and videos.
| Setting | Type | Default | Description |
|---|---|---|---|
| Overlay color | Color | #000000 |
The tint over the media, behind the text. |
| Overlay text | Color | #FFFFFF |
Text color on the media. |
| Overlay button background | Color | #FFFFFF |
Background color of solid buttons on the media. |
| Overlay button text | Color | #000000 |
Text color of solid buttons on the media. |
| Overlay button outline | Color | #FFFFFF |
Outline buttons on the media. |
Sale price colors
Give sale prices their own color so discounts stand out, for example red on a light scheme. Set Sale price for prices on the section background and Sale price on card background for prices inside cards. The color applies to sale prices on product pages, product cards and in the cart. Pair it with the Bold sale price font weight option and the Price order setting in Theme settings → Currency and localization. See Sale prices.
Make discounts easy to spot
A sale price in a contrasting color draws the eye to your offers while customers browse, without adding badges or banners. Use the same color in every scheme that shows products, so sale prices look the same across your store.
Badge colors
The Badge colors settings allow you to customize the appearance of labels that appear on product cards and product pages. These badges highlight specific product statuses, such as sales or stock availability, helping customers quickly identify key information while browsing your store.
You can find these settings under Theme settings > Colors > Badge colors.
- On sale: Sets the text and background colors for the "Sale" badge.
- New: Sets the text and background colors for the "New" badge.
- Pre-order: Sets the text and background colors for the "Pre-order" badge.
- Sold out: Sets the text and background colors for the "Sold out" badge.
Static Colors
Static colors are assigned to a few items:
- Cart dot background
- Review stars
These colors are not affected by color schemes.
Read more about color schemes from Shopify's help center.
Updating from an earlier Taiga version
Card background gradient moved in Taiga 9.0.0
The Card background gradient color was removed from color schemes. Collection cards set to Gradient now use the Card gradient setting in each Collection list block, and show the solid card background until one is picked. See Collection list.