Change Color of Sale Badge on Product Page - Dawn Theme

[Sato71]

Hi! We are trying to change the color of the sale badge on the product page from light grey to black (with white text). Does anyone know how to do this? It shows up black on the collection/home pages, but not on the product page.

Our store is kennasatodesigns.com

[Dan-From-Ryviu]

Hi @Sato71

Please add this code at the bottom of your base.css file to change color of it

.product .product__info-wrapper .price .badge.price__badge-sale {
background-color: #000;
}

[dmwwebartisan]

@Sato71

Please add the following code at the bottom of your css file.

.product__info-wrapper .price .badge.price__badge-sale {
background-color: #000;
}

[Anshul_arora]

Hello @Sato71 ,

I understand you are looking to change the background color of the sale badge on the product page.

Place take a look at the below mentioned solution for changing the background color -:

1. Go to Online store → Themes → Click on Three dots(Action) → Edit code

2. Next, Search for the theme.liquid file and open it.

3. Add the below mentioned code at the bottom of the file before tag -:

span.badge.price__badge-sale.color-accent-2 { background-color: black; }

Output => https://prnt.sc/9AXfrPVUtJz_

4. Save

I hope it helps.

Kindly let me know if you need any assistance

Thank you.

[olgapak]

Dear Dmwwebartisan, I have copied the above code, now my sold-out badge is black. How to make the text color - White?

Thank you.

[olgapak]

https://beautybuddy.nl/products/aromatica-rosemary-hair-thickening-conditioner