Changing Colour of Variant Radio Button in Brooklyn Theme

Store Design
1

Hi There,

I am using the Brooklyn Theme and having a small issue where my customers don’t realise that the Variant Radio Buttons on my Product Page are clickable options because currently they are showing up as white buttons on a white background.

I would like to change it so each button has a black border and the selected option is a red button (#e44c3c) with white text and no border.

I’ve read though a couple other posts on a similar topic and believe this is possible through CSS but am unsure what element ID to use and how exactly the code should look.

Any help with this would be greatly appreciated. Thanks in advanced!

Link to product page with issue: https://trailsurvivor.com.au/products/self-defence-alarm

2

@jstanner

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.single-option-radio input[type='radio']:checked+label {
    border-color: #e44c3c !important;
    color: #fff !important;
    background-color: #e44c3c !important;
}
.single-option-radio label {
border-color: #000 !important;
}

Hope this helps.

Thanks!

1 Like
3

Amazing! That worked perfectly. Thanks so much!

1 Like