how can i change the color of variant background

Store Design

Topic summary

A user seeks to change the background color of product variant selectors on their Shopify store.

Solutions Provided:

Multiple developers offered CSS-based approaches:

  • Method 1: Add custom CSS in theme.liquid before the </head> tag to style variant backgrounds
  • Method 2: Insert code above the </body> tag in theme.liquid
  • Method 3: Modify component-product-variant-picker.css directly in the theme’s assets folder, targeting .form-input__pill input[type=radio]:checked+label with specific background and text colors

Follow-up Issue:

After implementing a solution successfully, the original poster requested help changing the variant text color to black. One contributor provided updated code to address this secondary styling request.

Status: The issue appears resolved, with the user confirming the solution works and marking it as accepted. The thread includes code snippets and screenshots demonstrating the implementation steps.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
2

Hi @Martin299 ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

topnewyork_0-1725014673911.png
topnewyork_0-1725014673911.png766×404 167 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!