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.