Solved

How To Change Text Color On Selected Variant Pills Spotlight Theme

BlazeEssentials
Visitor
3 0 0

How do i change it so that the text is white in the selected pill and black in the non selected pill ?

Website:Blazeessentials.com

Key: Blaze


https://prnt.sc/7E8UCf4gGDb2 

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1192 309 228

This is an accepted solution.

Hey @BlazeEssentials,

 

This will work for you 😊

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
input:checked + label {
    color: white !important;
}
</style>

 

 Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707236994584.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
1192 309 228

This is an accepted solution.

Hey @BlazeEssentials,

 

This will work for you 😊

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
input:checked + label {
    color: white !important;
}
</style>

 

 Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707236994584.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
BlazeEssentials
Visitor
3 0 0

My man it worked.
I do have one more problem tho.
How do I make my ''add to cart '' button like this one  https://prnt.sc/kjL5oiR5nmyb 
In to an more visible button like i have on my other site like this: https://prnt.sc/r0EFIHLKQ56Y 

ThePrimeWeb
Shopify Partner
1192 309 228

Hey @BlazeEssentials,

 

Just remove the code above and paste this instead (I'll combine both solutions)

 

<style>
input:checked + label {
    color: white !important;
}

button.product-form__submit.button.button--full-width.button--secondary {
    background-color: #222 !important;
    color: white !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
BlazeEssentials
Visitor
3 0 0

@ThePrimeWeb 

Great thanks so much it works again!!

I would love to buy you coffee but i cant pay with ideal/paypal  😞 any other way ?

One last question. https://prnt.sc/z-g9rhT31t4V
Do u know how to make the checkout button a solid button like the  add to cart one ? Like we did in the previous step

ThePrimeWeb
Shopify Partner
1192 309 228

Hey @BlazeEssentials,

 

That's alright. In my region, it's a little difficult to setup Paypal. I think if you use your phone there's Apple or Google pay. That's the best I can do (region limitations). 

 

Do the same as you did above, I combined all solutions again. 😊

 

<style>
input:checked + label {
    color: white !important;
}

button.product-form__submit.button.button--full-width.button--secondary,
button#checkout {
    background-color: #222 !important;
    color: white !important;
}
</style>

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website