Shopify Dawn Thema change sale badge color

Store Design

Topic summary

A user asks how to change the color of the “sale” badge in Shopify’s Dawn theme from blue to another color.

Solutions provided:

  • Multiple users share CSS code snippets to modify badge colors
  • Common approach: Navigate to Online Store > Themes > Edit code, then locate base.css in the Assets folder
  • Paste custom CSS at the bottom of base.css file, modifying background-color and border-color properties

Key resources:

  • One contributor links to a detailed tutorial covering badge customization including background color, text color, text size, and different colors for sale vs. sold-out badges

Outstanding issue:

  • One user reports the CSS solution works on desktop but not mobile, requesting additional guidance

Resolution:

  • Original poster confirms success after adjusting the color values in the provided code
Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

How ı change “sale” dawn badge blue color from other color?

1 Like
2

Hi @zamanhasanov96

Use this CSS to change the badge color

  1. From your Shopify admin dashboard
  2. Navigate to Online stores > Themes > Select the Dawn theme
  3. Click on Actions > Edit code
  4. From the code editor, search for the base.css file (It should be on the assets folder)
  5. Paste this code at the bottom of the file
.badge {
  background-color: green !important;
  border-color: green !important;
}

Cheers!

7 Likes
3

@zamanhasanov96

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
span.badge.badge--bottom-left.color-accent-2 {background: red;border-color: red;}
/* chage color as you like */
4

@zamanhasanov96

Have you take a look at this guide yet?

It is a quick tutorial on how to change the background color, text color and text size of the Dawn’s badges. It also teaches you how to use a different color for sale/sold-out badges.

Let me know if you need any further assistance.

Kind regards,
Diego

5

Hello, Diego!

The tutorial works only for desktop version but not for mobile. Do you have any suggestions?

My site: www.mylittlebunny.nl

Regards,

Olga

6

It worked. I just had to change the color I wanted them changed to. Thank you!