Hi!
I am using dawn theme and my website is carcleansweden.se. I was wondering how I can change the sale badge location as shown in this picture:
Topic summary
Goal: Move the Sale badge position on product cards in the Shopify Dawn theme.
What changed:
- Edit theme code: Admin > Online Store > Customize > Edit Code > component-card.css (around line 273).
- In the .card__badge rule, remove the existing positioning (align-self: flex-end; grid-row-start: 3; justify-self: flex-start) and set justify-self: flex-end to shift the badge to the right.
Result:
- The Sale badge relocates from the left to the right side of the product card, as shown in the provided before/after images (images central to understanding the visual change).
Notes:
- Theme: Dawn; site referenced: carcleansweden.se.
- Change targets product card layout only; no broader design impact mentioned.
Status:
- Clear, actionable fix provided; no further questions or disagreements. Appears resolved.
Hi @CarCleanCC !
Head to Admin > Online Store > customise > Edit Code > component-card.css > line 273:
Change .card_badge from:
.card__badge {
align-self: flex-end;
grid-row-start: 3;
justify-self: flex-start;
}
to:
.card__badge {
justify-self: flex-end;
}
This will achieve this:
Hope this helps!
1 Like