Change Color of Sale Badge on Product Page - Dawn Theme

Solved

Change Color of Sale Badge on Product Page - Dawn Theme

Sato71
Tourist
18 0 3

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

sale screenshot.JPG

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

This is an accepted solution.

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;
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

This is an accepted solution.

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;
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

dmwwebartisan
Shopify Partner
12321 2551 3714

@Sato71 

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

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

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
olgapak
Tourist
7 1 1

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

 

Thank you.

Anshul_arora
Navigator
447 126 91

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 </body> tag -:

<style>

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

</style>


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

4. Save

I hope it helps.

Kindly let me know if you need any assistance

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here