# 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
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
Settings
Meaning
Border
Sets the border color of the color swatch on the product card.
Border Active
Sets the border color of the color swatch on the product card for active states.
### Hot Stock
| 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
*These color settings only apply to the **Icon** product compare type.*
| 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. |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://halosoft.gitbook.io/ella-documentation/theme-settings/product-colors.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.