Dawn Theme - 'Sale' badge - change to red background and a circle shape

Store Design
,

Topic summary

A user wants to modify the ‘Sale’ badge on their Dawn theme store to have a red background and circular shape.

Proposed Solutions:

  • One responder suggested adjusting colors through the theme customizer (Customize > Theme Settings > Colors), but this approach affects all elements using that color variable.
  • Another provider offered custom CSS code to be added to the base.css file, which would:
    • Set specific width and height (57px)
    • Apply 50% border-radius for circular shape
    • Add custom padding (20px 3px 0 3px)
    • Use !important flags to override existing styles

Current Status:
The discussion includes a CSS solution but appears incomplete (code snippet cuts off). The user confirmed that theme-level color changes aren’t suitable since they impact other design elements. A custom CSS approach targeting the .card__badge .badge class seems to be the recommended path forward.

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

Hi, as per the question, I am referring to the ‘Sale’ badge below.

I would like to change the backgound to red and make it a cirle shape.

Thanks!

Screenshot_41.jpg
Screenshot_41.jpg211×306 9.71 KB

2

Hello @falkor ,

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

1 Like
3

Hi @falkor ,

You can change background color of that badge in Online store > Theme > Customize > Theme Settings > COLORS

Screenshot 2022-12-13 at 09.31.05.png
Screenshot 2022-12-13 at 09.31.05.png1605×809 171 KB

4

Unfortunately not, as that also impacts all other elements that reference that colour.

5

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.card__badge .badge {
width: 57px!important;
height: 57px!important;
border-radius: 50%!important;
padding: 20px 3px 0 3px!important;
}

ZestardTech_0-1670915615445.png
ZestardTech_0-1670915615445.png1913×650 150 KB