A user seeks to reposition the sales badge in Shopify’s Dawn theme to the top-left corner and make it circular. An initial solution is provided using CSS code snippets added to theme.liquid:
Positioning (top-left):
.product__image-wrapper to position: relative.product__badge to position: absolute with top: 0 and left: 0Circular shape:
border-radius: 50%, fixed width/height (e.g., 50px), display: flex, center alignment, and custom background color to .product__badgeSpacing adjustment:
The original poster reports the badge sits too close to the image edges. The recommended fix involves adjusting metrics in the positioning code (changing top and left values from 0 to 1, or using bottom: unset).
The solution successfully repositions the badge, though the user ultimately kept the original shape while applying the top-left positioning.
Related issue:
Another user requests help with a mobile-specific badge problem where text doesn’t fit properly and needs to display in two lines with proper spacing from the top.
Hey there,
I’ve been playing around with this sales badge and I’m trying to figure out how to move it to the top-left corner and make it a circle. I made a little picture to show you what I mean.
Do you have any advice on how to do this? any CSS code?
I would appreciate your help
Thanks so much!
Hi @kolimechi Could you share your store URL?
Hello @kolimechi ,
You can try to follow these steps:
.product__image-wrapper {
position: relative;
}
.product__badge {
position: absolute;
top: 0;
left: 0;
}
Go to Online Store → Theme → Actions → Edit code
Go to theme.liquid file → add the following code
.product__badge {
background-color: #ff0000; /* change this to the color you want for the badge */
border-radius: 50%;
width: 50px; /* change this to adjust the size of the badge */
height: 50px; /* change this to adjust the size of the badge */
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: bold;
color: #ffffff;
text-align: center;
}
Save changes.
Hope this can help. Let us know if you need any further support.
Ali Reviews team.
Hi, thank you very much for your solution. It worked. Now, I have decided to keep the first shape and move it to the top-left corner, as you helped me. The only problem I have encountered is that the sale badge is too close to the edges of the image. I want to give it a little bit of space. I have shown this in the following picture:
I would appreciate your advice
Hello @kolimechi ,
You can change the metrics in the code to update the spacing, example:
.product__image-wrapper {
position: relative;
}
.product__badge {
position: absolute;
top: 1;
left: 1;
}
Let we know if you can make it.
Ali Reviews team.
Thank you very much for your answers, I appreciate your time.
It didn’t actually work, but I found another solution, adding “bottom: unset;”
