Changing Sold out and Sales colour Dawn 2.0

Store Design
1

Hi ,
I would like to change the Sold out button and Sales button to Red text and Black Outline .
I tried messing around with the with the " color " and " style " under theme settings . but they will also change my " Buy now " button color too .

Is there anyway only to change the sold out and sales button color ?
I would like them to the the same color ( red text and black outline ) in both Product page and collection Page .
I have added some image for reference , currently , they are different color in collections and product page .

My Store URL is Blackdahlia.sg
Thanks for reading !

2022-03-03 (5).png
2022-03-03 (5).png1378×435 489 KB

2022-03-03 (6).png
2022-03-03 (6).png1884×674 348 KB

2022-03-03 (7).png
2022-03-03 (7).png775×673 369 KB

2022-03-03 (8).png
2022-03-03 (8).png1599×655 179 KB

2

Hi @BlackDahliaSG ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
.card__badge>*,
.product .price--sold-out .price__badge-sold-out,
.product .price--sold-out .price__badge-sale {
    color: red !Important;
    border-color: black !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

Thanks ! It works. However , when you click into this Product , the sale button are still in black words and black outline

4

Hi @BlackDahliaSG ,

You can replace the above code with the code below:

.card__badge>*,
.product .price--sold-out .price__badge-sold-out,
.product .price--sold-out .price__badge-sale,
.product .price .badge {
    color: red !Important;
    border-color: black !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

Hey @BlackDahliaSG .

Thanks for reaching out.

I am happy to see that you were able to make the changes through the coding of theme! I wanted to add that since the Dawn theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal team to make the coding change on your behalf.

03-53-45148-51407
03-53-45148-51407660×435 28.9 KB

With that being said, if you are interested in using design time, you will need to login to your store using our Contact Us page. This will allow us to securely verify you as the store owner before speaking directly with a Support Advisor about the changes you would like to see.

Let me know if you have any questions.

6

Hi,
Do you know how to make sale badge red color and sold out badge black color?
I would also like the sold out products to be grayed out (reduced opacity)
Using Dawn 5.0 theme