# Colors & Color schemes

One of the most important components of designing a visually appealing, functional, and accessible theme is color.&#x20;

Not only does a well-designed color system reinforce a merchant’s branding, but it also has the power to enhance and improve user experiences.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F8eLelPivEgI7vSen4N8R%2Fimage.png?alt=media&#x26;token=401d6157-158f-4fd9-bc1f-1e505306b1a2" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**

1. In the theme editor (**Customize**), click **Theme settings.**
2. Select **Colors**
3. Manage your **Schemes** and other element colors.
4. **Save** the changes.
   {% endhint %}

## Color schemes

### What is a color scheme?

A color scheme is a set of visually compatible colors that applies to the following elements:

* Accent&#x20;
* Border
* Text (Heading and Body text)
* Background
* Primary button
* Secondary button
* Form field
* Product sale price
* Tooltip

You can define different color schemes in your theme settings and apply the color schemes to different sections throughout your online store, using a color scheme picker.

You can create up to 21 color schemes in Zest.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FAM3Pd4kqNwtFJbj17mhp%2Fimage.png?alt=media&#x26;token=d7105579-a0b0-4a2b-89a2-1aca89417026" alt=""><figcaption></figcaption></figure>

### Apply your color scheme

After defining your color scheme in the theme settings, you can assign a color scheme using the color scheme picker in the section settings.&#x20;

The color scheme picker is available only in certain sections and general theme settings.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FsebEGZlXIN921jxb6Ffd%2Fimage.png?alt=media&#x26;token=9c915a5a-ccf1-4acf-9b30-e7a206c436c2" alt=""><figcaption></figcaption></figure>

## Element colors

### Header

To change the color of the text and icon on the header.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FQkxxyBskLukld77TUrj3%2Fimage.png?alt=media&#x26;token=3e250191-7339-49e4-a134-b8d10c7e7cb4" alt=""><figcaption></figcaption></figure>

### Badges

To change the background color of the badges.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FUKw5dYrecgBPOorJLAkX%2Fimage.png?alt=media&#x26;token=8d99742e-2d1e-4886-8440-1c3e6c084b35" alt=""><figcaption></figcaption></figure>

See how to add custom badges here: [add-custom-badges-to-the-product-card-and-product-page](https://docs.foxecom.com/zest-theme/faqs/generic/add-custom-badges-to-the-product-card-and-product-page "mention")

See how to activate badges on the product card here: [#button-and-badges](https://docs.foxecom.com/zest-theme/product-card#button-and-badges "mention")

### Other colors

To change the background color of the cart bubble and its overlay opacity.

You can also adjust the **Overlay opacity** by tweaking the toggle.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FzmJ5vlLj7gPo3CZ8O1PO%2Fimage.png?alt=media&#x26;token=5a0e2ea2-b14a-4faa-94a9-660055454376" alt=""><figcaption></figcaption></figure>
