Change colour of variant pills in Dawn

Store Design
1

Hi there,

How would I go about changing the colour of the size variant pills on the product page in Dawn?

Thanks!!

1 Like
6

Hi @peterotoole,

.product-form__input input[type="radio"] + label {
  color: black !important;
  background-color: white !important;
  border-color: black !important;
}
.product-form__input input[type="radio"] + label:hover {
  color: black !important;
  background-color: red !important;
  border-color: black !important;
}

.product-form__input input[type="radio"]:checked + label {
  color: black !important;
  background-color: red !important;
  border-color: black !important;
}

image
image1600×773 177 KB

Thanks!

7

Thanks for that but unfortunately it doesn’t work :frowning:

8

Thanks for that but it doesn’t work I’m afraid.

10

Hi @peterotoole,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

span.badge.price__badge-sold-out.color-scheme-3 {
    background-color:  !important;
}

image
image1217×653 123 KB

Use this Code