How can I fill the selected variant option on the Impulse theme?

Store Design
, , ,

Topic summary

A user seeks to customize variant option buttons in Shopify’s Impulse theme, specifically wanting to fill the selected variant with a background color and change border colors from gray to black.

Solution provided:

  • Add CSS code to theme.css file (Assets folder) to style selected variant options
  • First code snippet fills selected variants with black background (#000) and white text (#fff)
  • Second code snippet changes variant button borders to black (1px solid #000)
  • Border thickness can be adjusted as needed (currently 1px)

Status: Resolved - user confirmed the initial solution works and received additional code for the border customization.

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

Hi!

Is there any way to fill the selected variant option on the Impulse theme? I’ll add a before and after image as examples. Kind regards!

Now
Now308×159 3.77 KB

2.png
2.png462×180 5.73 KB

2

@troydewitt

Hi,

Please go to Edit code > Assets > theme.css file and add the code below at the bottom of the file.

.variant-input-wrap input[type=radio]:checked+label {
    background: #000;
    color: #fff;
}

Hope it helps.

1 Like
3

Works great, appreciate it!! Do you also happen to know how I could get the outside lines of the variant picker buttons to be black instead of gray? (refer to image)

Kind regards

Screenshot 2023-02-03 180027.png

4

The code is as below.

label.variant__button-label {
    border: 1px solid #000;
}

You may change the thickness (currently 1px) to your needs.

You may

1 Like