How To Change Text Color On Selected Variant Pills Spotlight Theme

Store Design

Topic summary

A user seeks help changing text colors on variant selection pills in Shopify’s Spotlight theme—specifically wanting white text on selected pills and black on unselected ones.

Solution Provided:

  • Access theme’s “Edit Code” and locate “theme.liquid”
  • Insert custom CSS code below the <head> tag
  • A screenshot demonstrates the correct placement

Additional Requests Resolved:
The user subsequently asks for styling help on two more elements:

  1. Making the “Add to Cart” button more visible/prominent
  2. Creating a solid checkout button similar to the cart button

For both requests, the helper provides updated CSS code that combines all solutions together.

Outcome:
All styling issues successfully resolved. The user expresses gratitude and offers payment for assistance, though payment method compatibility (PayPal/iDeal) presents regional limitations. The helper mentions alternative options like Apple Pay or Google Pay but notes regional restrictions.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

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

2

Hey @BlazeEssentials ,

This will work for you :blush:

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

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

ThePrimeWeb_0-1707236994584.jpeg
ThePrimeWeb_0-1707236994584.jpeg1253×933 87.9 KB

1 Like
3

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

4

Hey @BlazeEssentials ,

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

@ThePrimeWeb

Great thanks so much it works again!!

I would love to buy you coffee but i cant pay with ideal/paypal :disappointed_face: 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

6

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. :blush: