How to change "In Sale" Badge Color in Dawn 13.0

Store Design
, , , ,

Topic summary

A user seeks to change the sale badge color from red to green on their Shopify Dawn 13.0 theme to match the product page styling.

Solution Provided:
A working fix involves adding custom CSS code to the theme.liquid file, placed above the closing tag. The code targets the sale badge element and applies a green background color with !important flag.

Key Steps:

  • Navigate to Online Store → Theme → Edit Code
  • Locate the theme.liquid file
  • Insert the CSS snippet at the bottom, before
  • Save changes

Outcome:
The solution successfully resolved the issue. The user confirmed it worked after initially trying an unsuccessful method that targeted a different CSS file (base.css). There was brief confusion about whether a previous change involved the “Sold Out” badge versus the “Sale” badge, but the main issue was resolved.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

How to change Sale Badge Color in Dawn 13.0. ?

I want to change it from Red to Green (Same as Product Page)

Looking forward for your support! :folded_hands:

Thanks in advance,
Birkan

Shop URL: evmotion.shop

Screenshot 2024-04-15 at 17.57.24.png
Screenshot 2024-04-15 at 17.57.24.png1210Ă—422 152 KB

Screenshot 2024-04-15 at 17.58.36.png
Screenshot 2024-04-15 at 17.58.36.png1192Ă—446 96.6 KB

1 Like
2

Hi @eComony

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-grid .badge {

background: green !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Thanks for the quick response, but unfortunately this did not work to me… :confused:

4

Hey @eComony

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

RESULT:

Moeed_0-1713198299426.png
Moeed_0-1713198299426.png1902Ă—685 132 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
5

HI @eComony

Im a bit confuse, did we already change it before? Or that was sold out badge. And now you like to change the sale badge? If it is can you provide the link for the sale badge? Thanks!

6

Awesome, this worked now!

Big thanks and enjoy your week :folded_hands:

7

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like
8

Hey there, sorry for the confusion.

Yes, we changed the Sold Out badge before (from red to grey) :slightly_smiling_face: