Solved

How can I alter the variant button color on mobile?

Heinrich123
Tourist
10 0 5

Hey Guys,

 

I want to change the coloring of the variant buttons. Using this css code it changes it for desktop: 

.product-form__input input[type=radio]:checked+label {
background: #1a73c7 !important;
}

 

but on mobile the buttons are still black.

The domain is: printnotes.de password: 1

 

Thanks in advance,

best regards

Accepted Solution (1)

theycallmemakka
Shopify Partner
1501 338 362

This is an accepted solution.

Hi @Heinrich123 

 

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>
variant-radios .product-form__input input[type=radio]:checked+label {
background: #1a73c7!important;
}
</style>

 

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

 

Best Regards,

Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 6 (6)

oscprofessional
Shopify Partner
15897 2378 3084

Hello @Heinrich123 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media only screen and (max-width: 600px){
.product-form__input input[type=radio]:checked+label {
    background: #1a73c7 !important;
}
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

theycallmemakka
Shopify Partner
1501 338 362

This is an accepted solution.

Hi @Heinrich123 

 

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>
variant-radios .product-form__input input[type=radio]:checked+label {
background: #1a73c7!important;
}
</style>

 

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

 

Best Regards,

Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Heinrich123
Tourist
10 0 5

Thank you my friend!

calv2
Visitor
1 0 0

Thank you so much. This solved it

Caldeira
New Member
6 0 0

Hey Makka, been a long time since you answered this question, but I´m having the exact same issue and even after trying your code the issue presists. Do you think yoiu could help me out please?

theycallmemakka
Shopify Partner
1501 338 362

Hi @Caldeira ,

 

You can private message me with the Store URL and i will let you know the solution as per the theme.

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com