Re: how can i change the color of variant background

Solved

how can i change the color of variant background

Martin299
Excursionist
30 1 8

how can i change the color of variant background 
thanks in advance
Screenshot 2024-08-30 113142.png

Accepted Solutions (2)

Rahul_dhiman
Shopify Partner
605 119 119

This is an accepted solution.

Hello @Martin299 
Go to online store ----> themes ----> actions ----> edit code ---->assets ----> component-product-varient-picker.css
add this code at the end of the file.

.product-form__input--pill input[type=radio]:checked+label {
background-color: #ffcc33;
color: #000;
}

result
15.png

Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

View solution in original post

topnewyork
Globetrotter
633 114 123

This is an accepted solution.

@Martin299 , replace the old code with this:

 

<style>
.product-form__input--pill input[type=radio]:checked+label {
    border: unset;
    background-color: #f6b600;
    color: black ! important;
}
</style>

 

topnewyork_0-1725015284067.png

 

 

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel

View solution in original post

Replies 13 (13)

topnewyork
Globetrotter
633 114 123

Hi @Martin299 , 

 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

<style>
.product-form__input--pill input[type=radio]:checked+label {
    background: #ffc520 !important;
    border: unset !important;
}
</style>

 

topnewyork_0-1725014673911.png

 

 

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
Martin299
Excursionist
30 1 8

it works, 
how can i change the text color to black in variant 

topnewyork
Globetrotter
633 114 123

I am giving you the fix just give me a few minutes. 

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
topnewyork
Globetrotter
633 114 123

This is an accepted solution.

@Martin299 , replace the old code with this:

 

<style>
.product-form__input--pill input[type=radio]:checked+label {
    border: unset;
    background-color: #f6b600;
    color: black ! important;
}
</style>

 

topnewyork_0-1725015284067.png

 

 

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel

Moeed
Shopify Partner
5816 1580 1879

Hey @Martin299 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-form__input--pill input[type=radio]:checked+label {
    background: #FFCC33 !important;
    border: unset !important;
}
</style>

RESULT:

Moeed_0-1725014421054.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Sangeetanahar
Trailblazer
554 36 66

Hello @Martin299 

I am Shopify Developer. I can fix this issue .Can you please share your Website URL and Password.

Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here

Rahul_dhiman
Shopify Partner
605 119 119

This is an accepted solution.

Hello @Martin299 
Go to online store ----> themes ----> actions ----> edit code ---->assets ----> component-product-varient-picker.css
add this code at the end of the file.

.product-form__input--pill input[type=radio]:checked+label {
background-color: #ffcc33;
color: #000;
}

result
15.png

Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
Rahul_dhiman
Shopify Partner
605 119 119

Thanks for accepting the solution
Please hit like button also.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

CRSYTALTOGEL
Visitor
3 0 0

CRSYTALTOGEL
Visitor
3 0 0

CRSYTALTOGEL
Visitor
3 0 0

Sangeetanahar
Trailblazer
554 36 66

Hello @Martin299 

Go to online store ----> themes ----> actions ----> edit code ---->assets....>component-product-variant-picker.css
add this code at the bottom of the file

.product-form__input--pill input[type=radio]:checked+label {
    background:red !important; /* You can change the color here as per your requirement  */
    border: unset !important;
}

You can use whatever color you want in place of red.

Buy me a Pizza


If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here

Rahul_dhiman
Shopify Partner
605 119 119

Thanks for accepting the solution
Please hit like button also.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167