Change the color of...
 
Notifications
Clear all

[Solved] Change the color of the colors swatches when a variant is selected

3 Posts
2 Users
1 Reactions
719 Views
(@danielle12)
Active Member
Joined: 4 years ago
Posts: 19
Topic starter  

Hi,

Is there a way to change the color (text color + background) when a variant is selected in product page ?

Note : I am using color swatches and not dropdown menu

Thanks in advance


   
Quote
plaktheme
(@plaktheme)
Reputable Member
Joined: 5 years ago
Posts: 0
 

Hi @danielle12

Katrine here from Plak support to assist you with your question.

In order to change the background & text color when a variant is selected, please follow these steps :

 

  • From your Shopify dashboard, click Online store > Actions > Edit code
  • Open the file theme.scss.liquid
  • At the very bottom, paste this code

 

.swatch input:checked+label{
background : red;
color : yellow;
}

 

 

  • Click Save

 

You can change these values (red;yellow;) as you wish, you can also use HTML color codes, you can use this FREE TOOL to grab your desired color, for example for a light green background color and light grey text color, you can use this code :



.swatch input:checked+label{
background : #EEFDA0;
color : #EDEDEC;
}

I hope this may help, let me know if you have any other questions

Kind regards,
Katrine

Katrine | Technical support at Plak, Scrowp & Vantout
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as a Solved Solution


   
danielle12 reacted
ReplyQuote
(@danielle12)
Active Member
Joined: 4 years ago
Posts: 19
Topic starter  

Great ! Thanks a lot Katrine 🙂


   
ReplyQuote
Share:

Welcome to the Shopify Forum Community provided by Plak ThemeLLC, a place where you can discuss about eCommerce and Shopify, solve technical issues, get help with Shopify Design, Apps integration, Marketing, Facebooks ad, Google ads and more.

Before posting, we invite you to read and follow the forum rules | We also support any questions related to Free Shopify themes :Dawn, Express, Minimal, Brooklyn, Narrative, Supply, Debut, Venture, Boundless and Simple