Change selected variant pill color

Store Design
,

Topic summary

Issue: A user wants to change the background color of variant selection pills on their product page.

Solution Provided:

The resolution involves adding custom CSS code to the theme files:

  1. Navigate to Online Store → Edit Code
  2. Locate the theme.liquid file
  3. Insert CSS styling code above the </body> tag

Status: The discussion appears resolved after the store password was removed, allowing helpers to access the site and provide the specific CSS solution. The helper requested the solution be marked as accepted if it successfully addressed the issue.

Note: The conversation includes a code snippet (partially obscured in the input) that targets the variant pill styling.

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

How would I change the background color of these variant pills?

url is https://8238c6-b8.myshopify.com/

Image 25-06-2024 at 14.17.jpeg
Image 25-06-2024 at 14.17.jpeg964×206 12.9 KB

2

Hello @EcomEO , Please share your store URL and password.

So that I will check and let you know the exact solution here.

Best regards,
Darshan

3

Hey @EcomEO

Your store is password protected, can you share your password as well?

Best Regards,

Moeed

4

Sorry @Moeed @Darshanp712
Password is removed

5

Hey @EcomEO

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 tag

RESULT:

Moeed_0-1719323217404.png
Moeed_0-1719323217404.png728×656 30.8 KB

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

Best Regards,
Moeed

1 Like