Color (Products)
Here you can change color for: Product Card, Product Size, Product Swatch, Product Hot Stock, Product Wishlist, Product Compare, Product Quick View, Product Action, Product Badge.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings -> COLORS (PRODUCTS).
Set up for Product Card
| Settings | Meaning |
|---|---|
Product Vendor Color | Sets the color of the product vendor on the product card. |
Product Title Color | Sets the color of the product title on the product card. |
Product Title Color Hover | Sets the color of the product title on the product card for hover state. |
Product Price Color | Sets the color of the product price on the product card. |
Product Price Sale Color | Sets the color of the product sale price on the product card. |
Product Price Compare Color | Sets the color of the product compare price on the product card. |
Countdown Color | Sets the text color of the countdown block on the product card. |
Countdown Background Color | Sets the bacground color of the countdown block on the product card. |
Product Size
At Theme Settings -> click Product Card -> Set up for Product Card -> enable setting 'Product Size Variant?' to show Product Size on product card.
| Settings | Meaning |
|---|---|
Color | Sets the text color of product size variants. |
Background Color | Sets the background color of product size variants. |
Border Color | Sets the border color of product size variants. |
Hover / Active Color | Sets the text color of product size variants for hover state. |
Hover / Active Background Color | Sets the background color of product size variants for hover state. |
Hover / Active Border Color | Sets the border color of product size variants for hover state. |
Product Swatch
| Settings | Meaning |
|---|---|
Border Color | Sets the border color of the color swatch on the product card. |
Border Color Active | Sets the border color of the color swatch on the product card for active states. |
Product Hot Stock
| Settings | Meaning |
|---|---|
Text / Icon Color | Sets the text color of the Product Hot Stock function on the product detail page. |
Product Wishlist
| Settings | Meaning |
|---|---|
Text / Icon Color | Sets the text color and icon color of the product wishlist on the product card. |
Background Color | Sets the background color of the product wishlist on the product card. |
Border Color | Sets the border color of the product wishlist on the product card. |
Text / Icon Color (Added) | Sets the text color and icon color of the product wishlist on the product card for added states. |
Background Color (Added) | Sets the background color of the product wishlist on the product card for added states. |
Border Color (Added) | Sets the border color of the product wishlist on the product card for added states. |
Product Compare
These color settings only apply to the Icon product compare type.
| Settings | Meaning |
|---|---|
Text / Icon Color | Sets the text color and icon color of the product compare on the product card. |
Background Color | Sets the background color of the product compare on the product card. |
Text / Icon Color (Added) | Sets the text color and icon color of the product wishlist on the product card for added state. |
Background Color (Added) | Sets the background color of the product wishlist on the product card for added state. |
Product Quick View
| Settings | Meaning |
|---|---|
Text / Icon Color | Sets the text color and icon color of the product quick view on the product card. |
Background Color | Sets the background color of the product quick view on the product card. |
Text / Icon Color (Hover) | Sets the text color and icon color of the product wishlist on the product card for hover state. |
Background Color (Hover) | Sets the background color of the product wishlist on the product card for hover state. |
Product Action
| Settings | Meaning |
|---|---|
Color | Sets the text color of the product action button on the product card. |
Border Color | Sets the border color of the product action button on the product card. |
Background Color | 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. |
Hover / Active Color | Sets the text color of the product action button on the product card for hover state. |
Hover / Active Border Color | Sets the border color of the product action button on the product card for hover state. |
Hover / Active Background Color | Sets the background color of the product action button on the product card for hover state. |
Hover / Active Background 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. |
Last updated
