Colors

Color options were updated in 6.0.0 and later. Learn how to update your theme to access new features.

You can change the Colors of elements across your store, including general colors, header colors, footer colors, and product colors.

In the theme editor, click Theme settings and open the Colors tab.

We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.

Color schemes

---

A color scheme consists of a set of colors that you can apply sections throughout your store. Color schemes help you create consistent palettes.

• In Theme settings, click a color scheme to edit its color options. Click (+) Add scheme to add a new color scheme.

• Apply color schemes to components of your theme and to sections in section settings

Color scheme options

Every color scheme has the following color options.

_{Find settings in Theme settings > Colors. Click or add a color scheme to edit.}

General colors	Description
Background	The background of the section, which spans the full height and width.
Background gradient	Some sections can use a gradient background instead of a solid color background. You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide to learn more.
Text	All headings, subheadings, and body text.
Links	All linked text added to rich text blocks.
Lines and borders	All lines and borders that appear between or within sections.
Solid buttons
Text	The button label text color
Background	The background of the button
Background hover	The background color that appears when hovered over
Outline buttons
Text	The button label text color
Background	The background of the button

Apply color schemes

Select a color scheme to apply to Popovers, Modals, and Drawers.

_{Find settings in Theme settings > Colors}

Setting	Description
Default color scheme	Select the color scheme that applies to sections and pages by default.
Popovers and modals	Select a color scheme for popups and modals, such as popups and information popups.
Drawers	Select a color scheme for menus and cart drawers.

Custom theme colors

---

Products

Select colors for elements used in product listings and product pages.

_{Find settings in Theme settings > Colors}

Setting	Description
Sale price	Sale prices listed beneath products with "compare at price."
Rating star	Rating stars in the Product reviews app block.
In stock	The "In stock" label for the Stock level indicator.
Low in stock	The "Low stock" label for the Stock level indicator.
Out of stock	The "Out of stock" label for the Stock level indicator.

Notifications

Select colors for notification messages in forms.

_{Find settings in Theme settings > Colors}

Setting	Description
Success	Success messages for forms.
Error	Error messages for forms.