How to change the colour of variants button

Store Design
1

Hello. I want to change the colour of my Variants buttons on my product page. I am using the Theme Refresh and I´ve heard that you can only change the colours by coding. Please help me

1 Like
2

yeah you can change it using css. You can follow this one to know how css works.

3

Hi @CedricH

Would you mind to share your Store URL website? with password if its protected. Thanks!

4

Of course. www.poster25.de

1 Like
5

Hi @CedricH

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.product-form__input input[type=radio]:checked+label {

background-color: red !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like
6

Thank you for the infromation. Which button you like to change the color? The active one or the normal button?

This is for the active button.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product-form__input input[type=radio]:checked+label {
    background-color: blue!important;
}
  • And Save.
  • And this is for the normal or non active one.
.product-form__input input[type=radio]+label {
    background: white;
}​
1 Like