placement of discount badge

Shopify Discussion

Topic summary

A user working with Shopify’s Dawn theme needs to reposition the discount badge to the top-left corner of product cards, eliminating padding so it aligns flush with the border.

Two solutions were provided:

Solution 1 (Moeed):

  • Add custom CSS via theme.liquid file
  • Insert code snippet above the closing </body> tag
  • Includes screenshot showing the result

Solution 2 (GTLOfficial):

  • Modify base.css file directly
  • Add CSS targeting .card__badge.top.left with negative margins (-16px top, -13px left)
  • Remove border-radius for sharp corners
  • Includes visual result

Outcome:
The original poster thanked contributors, suggesting one of the solutions successfully resolved the positioning issue. Both approaches use CSS to override default badge placement and styling.

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

hi there i am using Dawn theme and i want discount badge to be shown at top left corner without any padding on left and top it should be align with border sharing url https://sundip1.myshopify.com/collections/ketchup-and-sauces

1 Like
2

Hey @Nabeelshakil

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-1737782787122.png
Moeed_0-1737782787122.png1323×870 228 KB

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

Best Regards,
Moeed

3

Hello @Nabeelshakil
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.card__badge.top.left {
margin-top: -16px !important;
margin-left: -13px !important;
}
.badge {
border-radius: 0px !important;
}

result

182.png
182.png1350×672 406 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
4

Thanks for your help dear