How Can I Change The Variant Picker Radio Button Color and Remove Border Radius In Dawn Theme?

Store Design

Topic summary

A user seeks to customize variant picker buttons on their Dawn theme product pages by:

Desired Changes:

  • Change active button color to match the ‘Buy it now’ button
  • Set inactive button border color to #F75620
  • Remove border radius from all buttons
  • Modify text color on unselected buttons

Solutions Provided:

Multiple CSS code snippets were shared to achieve these customizations, added to the theme’s CSS file:

  • Border color and radius removal for variant labels
  • Background color (#F75620) for checked radio buttons
  • Text color modification for variant labels

Outcome:

The original poster confirmed the solutions worked successfully. Additional users reported the CSS code also worked for their Taiga theme and requested help adding hover effects to improve user feedback when selecting variants.

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

I want to change the color of these buttons on my product pages as well as remove the border radius.

juliandadang_0-1645680570938.png
juliandadang_0-1645680570938.png431×543 14.1 KB

I would like all active buttons to look the same as the 'Buy it now" button.

I would like all inactive buttons to have their border color be #F75620 and their text be the same with a white background. I would also like to remove the border radius on all of them.

Here’s a link to a product: https://art-from-kabushka-ngemba.myshopify.com/products/gamilaroi

Password is: shiayo

1 Like
2

@julian-dadang ,

div#ProductInfo-template--15460017438968__main label {
    border-color: #F75620;
    border-radius: 0;
}
.product-form__input input[type=radio]:checked+label {
    background: #F75620;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->section-main-product.scss.liquid

1 Like
3

@julian-dadang ,

Please add this CSS at the bottom of your css file

.product-form__input input[type=radio]:checked+label{
    background-color:#f75620 !important;
    border:1px solid #f75620 !important;
}
.product-form__input input[type=radio]+label{
    border-radius: unset !important;
}

Thank You!

2 Likes
4

Thank you. Is there any way to change the text color of all the unselected boxes too?

1 Like
5

@julian-dadang ,

Add this CSS to your theme

.product-form__input input[type=radio]+label{
    color:#f75620;
}

Thanks!

1 Like
6

Perfect thank you!

1 Like
7

Hello, would you be able to help me add a hover effect to my variant picker buttons? As of now, there’s no way for a user to know if they have made a selection when they click the button. Thank you!

1 Like
8

This works for my theme Taiga also. Thank you!