Variant Picker

Store Design
,

Topic summary

A user wants to change the variant picker’s background color from black to #604F5B to match their “Add to cart” button color.

Proposed Solution:

  • Navigate to: Shopify Admin → Online Store → Themes → Edit Code
  • Locate the file: component-product-variant-picker.css in the Assets folder
  • Add the CSS rule:
    .product-form__input--pill input[type=radio]:checked+label {
  background-color: #604F5B !important;
}

Status: The solution has been provided but not yet confirmed as working by the original poster. One respondent requested the store URL and password for further assistance.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello!

How can I change the black background of the variant picker with the following color (#604F5B)?

I would like the variant picker’s background color to be the same of the “Add to cart” one.

Waiting for a reply, best regards.

1.png
1.png3360×2100 556 KB

2

Hi @Francesco051199

Can you please provide your Store URL and Password too?

With Regards,
Shuvam

3

Hello

Follow these steps

  1. Go to Your Shopify Admin.
  2. Navigate to:
    Online Store > Themes > Edit Code.
  3. In the left sidebar, under the Assets folder, locate and open the file named:
    component-product-variant-picker.css

Add the following CSS code to change the variant background color:

.product-form__input–pill input[type=radio]:checked+label {
background-color: #604F5B !important;
}

Let us know, if solution works for you