# Product Colors

Here you can change color for: **Product card, Size option, Swatch option, Hot stock, Wishlist, Compare, Quick View, Action button, Badges**.

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings ->** **Product colors.**

### Set up for Product card

| Settings             | Meaning                                                                  |
| -------------------- | ------------------------------------------------------------------------ |
| Vendor               | Sets the color of the product vendor on the product card.                |
| Title                | Sets the color of the product title on the product card.                 |
| Title Color          | Sets the color of the product title on the product card for hover state. |
| Price                | Sets the color of the product price on the product card.                 |
| Sale price           | Sets the color of the product sale price on the product card.            |
| Compare price        | Sets the color of the product compare price on the product card.         |
| Countdown text       | Sets the text color of the countdown block  on the product card.         |
| Countdown background | Sets the bacground color of the countdown block on the product card.     |

### Size option

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FiReSwaOcCcDFDBhv3973%2Fimage.png?alt=media&#x26;token=fb0aefb8-6312-4b94-b114-a445ab7fb377" alt=""><figcaption></figcaption></figure>

At **Theme settings** -> click **Product card** -> **Set up for Product Card** -> enable setting '**Show size variants**' to show the **Size option** on the product card.

| Settings         | Meaning                                                             |
| ---------------- | ------------------------------------------------------------------- |
| Text             | Sets the text color of product size variants.                       |
| Background       | Sets the background color of product size variants.                 |
| Borderr          | Sets the border color of product size variants.                     |
| Text hover       | Sets the text color of product size variants for hover state.       |
| Background hover | Sets the background color of product size variants for hover state. |
| Border hover     | Sets the border color of product size variants for hover state.     |

### Swatch option

<table><thead><tr><th width="374">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Border</td><td>Sets the border color of the color swatch on the product card.</td></tr><tr><td>Border  Active</td><td>Sets the border color of the color swatch on the product card for active states.</td></tr></tbody></table>

### Hot Stock

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FXiiFfnZIfnB9MDthGw0E%2Fimage.png?alt=media&#x26;token=ae1e7d68-535a-4870-8a27-068584435a41" alt="" width="461"><figcaption></figcaption></figure>

| Settings  | Meaning                                                                           |
| --------- | --------------------------------------------------------------------------------- |
| Text/Icon | Sets the text color of the Product Hot Stock function on the product detail page. |

### Wishlist

| Settings          | Meaning                                                                                          |
| ----------------- | ------------------------------------------------------------------------------------------------ |
| Text/Icon         | Sets the text color and icon color of the product wishlist on the product card.                  |
| Background        | Sets the background color of the product wishlist on the product card.                           |
| Border            | Sets the border color of the product wishlist on the product card.                               |
| Text/Icon active  | Sets the text color and icon color of the product wishlist on the product card for added states. |
| Background active | Sets the background color of the product wishlist on the product card for added states.          |
| Border active     | Sets the border color of the product wishlist on the product card for added states.              |

### Compare

*<mark style="color:orange;">These color settings only apply to the</mark> <mark style="color:orange;"></mark><mark style="color:orange;">**Icon**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">product compare type.</mark>*

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FulSJSYgDNj4g1m0VRnoN%2Fcompare-2.jpg?alt=media&#x26;token=cf78c277-d69c-45d0-8da4-43731aa932ef" alt=""><figcaption></figcaption></figure>

| Settings          | Meaning                                                                                         |
| ----------------- | ----------------------------------------------------------------------------------------------- |
| Text/Icon         | Sets the text color and icon color of the product compare on the product card.                  |
| Background        | Sets the background color of the product compare on the product card.                           |
| Text/Icon active  | Sets the text color and icon color of the product wishlist on the product card for added state. |
| Background active | Sets the background color of the product wishlist on the product card for added state.          |

### Quick View

| Settings         | Meaning                                                                                         |
| ---------------- | ----------------------------------------------------------------------------------------------- |
| Text/Icon        | Sets the text color and icon color of the product quick view on the product card.               |
| Background       | Sets the background color of the product quick view on the product card.                        |
| Text/Icon hover  | Sets the text color and icon color of the product wishlist on the product card for hover state. |
| Background hover | Sets the background color of the product wishlist on the product card for hover state.          |

### Action button

| Settings                   | Meaning                                                                                        |
| -------------------------- | ---------------------------------------------------------------------------------------------- |
| Text                       | Sets the text color of the product action button on the product card.                          |
| Border                     | Sets the border color of the product action button on the product card.                        |
| Background                 | Sets the background color of the product action button on the product card.                    |
| Background gradient        | Sets the background gradient of the product action button on the product card.                 |
| Text hover                 | Sets the text color of the product action button on the product card for hover state.          |
| Border hover               | Sets the border color of the product action button on the product card for hover state.        |
| Background hover           | Sets the background color of the product action button on the product card for hover state.    |
| HBackground hover gradient | Sets the background gradient of the product action button on the product card for hover state. |

### Product Badge

| Settings                 | Meaning                                                                                     |
| ------------------------ | ------------------------------------------------------------------------------------------- |
| New badge text           | Sets the text color of the New badge on the product card and product detail page.           |
| New badge background     | Sets the background color of the New badge on the product card and product detail page.     |
| Sale badge text          | Sets the text color of the Sale badge on the product card and product detail page.          |
| Sale badge background    | Sets the background color of the Sale badge on the product card and product detail page.    |
| Soldout badge text       | Sets the text color of the Soldout badge on the product card and product detail page.       |
| Soldout badge background | Sets the background color of the Soldout badge on the product card and product detail page. |
| Custom badge text        | Sets the text color of the Custom badge on the product card and product detail page.        |
| Custom badge background  | Sets the background color of the Custom badge on the product card and product detail page.  |
| Bundle badge text        | Sets the text color of the Bundle badge on the product card and product detail page.        |
| Bundle badge background  | Sets the background color of the Bundle badge on the product card and product detail page.  |