Change Sale badge placement on collection page in dawn theme

Store Design

Topic summary

Users are seeking to reposition the sale badge on collection pages in Shopify’s Dawn theme from its default bottom-left location to the top-left corner.

Initial Solution:

  • Add CSS code to base.css file via Theme Editor
  • Set badge position to absolute with top: 1rem and left: 1rem
  • Use bottom: unset !important to override default positioning

Issue Reported:
Multiple users found the initial solution only moved the badge halfway up rather than fully to the top-left position.

Updated Fix (Dawn 9.0.0):

.card__badge {
  display: flex;
  flex-wrap: wrap;
  left: 1rem;
  position: absolute;
  top: -9rem;
  bottom: unset !important;
}

The adjusted solution uses top: -9rem instead of top: 1rem to properly position the badge at the top-left corner. The negative value appears necessary for correct placement in newer Dawn theme versions.

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

Change Sale badge placement on collection page in dawn theme

default is on bottom left and i want it on top left

2

Hello @fostino ,

  1. Go to Online Store->Theme->Edit code
  2. Asset->base.css-> paste bellow code in bottom of file
.card__badge {
    bottom: unset !important;
    display: flex;
    flex-wrap: wrap;
    left: 1rem;
    position: absolute;
    top: 1rem;
}

Thank

6 Likes
3

@Guleria Thanks :slightly_smiling_face:

2 Likes
4

weirdly enough this solution places the badge only half way up for me and not top left :confused: do you have any idea why?

Skärmavbild 2022-10-28 kl. 10.50.23.png
Skärmavbild 2022-10-28 kl. 10.50.23.png524×618 188 KB

1 Like
5

Here too. It’s only halfway up.

6

I adjusted the rem: THEME DAWN 9.0.0

.card__badge {
bottom: unset !important;
display: flex;
flex-wrap: wrap;
left: 1rem;
position: absolute;
top: -9rem;
}

7

I adjusted the rem: THEME DAWN 9.0.0

.card__badge {
bottom: unset !important;
display: flex;
flex-wrap: wrap;
left: 1rem;
position: absolute;
top: -9rem;
}