Solved

Changing Swatch Selection Background Color

technase
Shopify Partner
110 1 25

Hi, 
I need help with the active swatches/ variant options. Currently, when a swatch is clicked/ selected, its border color darkens. However, I aim for the selected swatch/option to change its color. For example, upon selecting the 500 grams option, the color of the chosen box should shift to black with white text.

Link: https://testingstoresandthemes.myshopify.com/ 
Storefront Password: test
Theme: Turbo 

Thanks 

 

 

 

technase
Accepted Solutions (4)

LuffyOnePiece
Shopify Partner
503 75 88

This is an accepted solution.

Hi @technase ,

 

Try adding below css to styles.css.

.swatch_options input:checked+.swatch-element {
    background: #000;
    color: #fff;
}

 


Please don't hesitate to reach out if you require further help to optimize or customize your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Raj-WebDesigne
Shopify Partner
60 16 14

This is an accepted solution.

Add This Css In your edit Code > Style.css File

.swatch_options input:checked+.swatch-element {
    background: #000;
    color: #fff;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


View solution in original post

AnneLuo
Shopify Partner
414 84 79

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  .swatch_options input:checked+.swatch-element {
     background-color: #000;
     color: #fff;
  }
</style>

 

After modification:

 

AnneLuo_0-1713956029780.png

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

View solution in original post

Anshul_arora
Navigator
364 103 71

This is an accepted solution.

Hello @technase ,

I understand you are looking to provide a black background color and white text color on selected options.

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.swatch_options input:checked+.swatch-element {
background: black;
color: white;
}

</style>


Output ->

Anshul_arora_0-1713956187101.png

 

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 4 (4)

LuffyOnePiece
Shopify Partner
503 75 88

This is an accepted solution.

Hi @technase ,

 

Try adding below css to styles.css.

.swatch_options input:checked+.swatch-element {
    background: #000;
    color: #fff;
}

 


Please don't hesitate to reach out if you require further help to optimize or customize your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

Raj-WebDesigne
Shopify Partner
60 16 14

This is an accepted solution.

Add This Css In your edit Code > Style.css File

.swatch_options input:checked+.swatch-element {
    background: #000;
    color: #fff;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


AnneLuo
Shopify Partner
414 84 79

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  .swatch_options input:checked+.swatch-element {
     background-color: #000;
     color: #fff;
  }
</style>

 

After modification:

 

AnneLuo_0-1713956029780.png

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

Anshul_arora
Navigator
364 103 71

This is an accepted solution.

Hello @technase ,

I understand you are looking to provide a black background color and white text color on selected options.

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.swatch_options input:checked+.swatch-element {
background: black;
color: white;
}

</style>


Output ->

Anshul_arora_0-1713956187101.png

 

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here