How To Change Text Color On Selected Variant Pills Spotlight Theme

BlazeEssentials · ‎02-06-2024

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

ThePrimeWeb · ‎02-06-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-06-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

BlazeEssentials · ‎02-06-2024

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 · ‎02-06-2024

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
Check out our interview with Shopify!

BlazeEssentials · ‎02-06-2024

@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 · ‎02-07-2024

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
Check out our interview with Shopify!

How To Change Text Color On Selected Variant Pills Spotlight Theme