“How do I configure my theme’s colors?”

Context’s colors are completely customizable. You can edit and preview your color settings from the Theme settings ► Colors panel on your Customize theme page.

The color settings are broken out into sub-sections:

General

These color settings affect the colors throughout your store, not in one specific place.

Accent
Used for text links, buttons, and the header message.
Text
The color of text store-wide.
Button text
The color of button text.
Background
Your store’s background color. This is the most dominant color present in your store.
Border
Used sparingly as a separator between page elements, like between the product name and price on the product page. See examples
Input
The color of input fields – like drop-down menus, email fields, add/remove quantity boxes, and so on.
Input text
The color of text inside input fields.
Secondary button
The color of secondary buttons on the site. See examples
Secondary button text
The color of secondary button text on the site.
Sale badge
The background color of the “On sale” badge that appears on products that you have placed on sale. See an example
Success message
The background color of messages that appear to customers if something succeeds. See an example
Error message
The background color of messages that appear to customers if an action does not succeed.

For example, their account cannot be created if they enter an invalid email address. See an example

Border

The border color is used for lines and borders that overlay the global background color.

This affects borders and lines such as:

Secondary button

Secondary buttons appear when there are two customer actions and there is one less important than the other.

Specifically, see the Update cart button on the cart page (next to the primary Check out button), and the the Add to cart button on product pages (next to the primary But it now button).

Here is an image featuring the secondary Update cart button:

Cart page featuring "Update cart" button

Sale badge

The sale badge appears when you have set the Compare at price for a product in your Shopify dashboard’s Products section.

Sale badge

Error message

Once in a while, customers may run into a short error message. For example, if they try to create an account and enter an invalid email:

Error message due to invalid email during account creation

These color settings affect only the colors in your header.

Text
The text in the header, like the navigation menu links and site title.

If you use the transparent header on the home page, you can set a different text color for it in the Header settings.

Background
The background color of the header.

If you use the transparent header, this color is still applied on all pages except for the home page.

Border
The bottom border color of the header.

If you use the transparent header on the home page, you can set a different border color for it in the Header settings.

Icon
The color of the search, profile and cart icons in the header.

On mobile devices, this color is also used for the main menu (☰) icon.

Contrast

The contrast color settings affect content sections all over your store. For example, many home page sections (testimonials, featured collections and featured products) have a “secondary background” color that contrasts with your regular background color.

Text
The text color for inside content sections.
Background
The background color for inside content sections. See an example
Border
The color of borders and lines within content sections. See an example
Input
The color of input fields – like drop-down menus, email fields, add/remove quantity boxes, and so on.

This field only affects input fields within a contrast section.

Input text
The color of text inside input fields in contrast sections.

Background

The contrast background is displayed in a content section. It should contrast your global background color.

Here is an example of the contrast background color being changed:

Border

If there is a border or line within a content section, it uses the contrast border color setting.

For example, see the border line in this featured product section, between the product name and the price:

The navigation color settings only affect the colors in your drop-down navigation menus.

Note that these color settings are only honored on desktop devices. For mobile devices, see the Drawers color settings below.

You can learn more about setting up mega navigation menus in the Header article.

Mega navigation open on a desktop device

Text
The color of text and links in the mega navigation menu.
Background
The background color of the mega navigation menu.
Border
The color of the borders between sub-menus in the mega navigation menu.
Feature
The background color that appears behind the navigation menu’s feature image, heading and subheading.

Drawers

Some menus open up in drawers. They pop open from the left or right side of the screen.

On mobile devices, navigation menus, the quick cart, collection sorting and collection filtering menus open up in drawers:

Mobile navigation menu

Mobile cart overlay

On larger screens (like tablets, laptops, and desktops), only the quick cart, collection sorting and collection filtering menus open up in drawers:

Collection sorting on a desktop device

Text
The color of text and links in the drawers.
Background
The background color of drawers. We recommend using a color that contrasts with your store background color.
Border
The color of borders and lines within the drawers.

These color settings affect only the colors in the footer area of your store.

Note that on mobile devices, your footer may be big enough to fill an entire screen.

Footer on mobile devices

Text
The color of text and links in the store footer.
Background
The background color of the footer section.
Border
The color of borders and lines in the footer section.
Input
The color of input fields – like drop-down menus, email fields, add/remove quantity boxes, and so on.

This field only affects input fields within the footer.

Input text
The color of text inside input fields in footer sections.