I want the sale and out-of-stock badge to show above the product images/in the spot I circled. I’m on the dawn theme.
Topic summary
A Dawn theme user wants to reposition sale and out-of-stock badges to appear above product images instead of overlaying them.
Initial Solutions Provided:
- First suggestion: Add CSS to
base.cssortheme.csswithposition: absoluteandtop: -20pxtargeting.collection.card__badge.top.left - Alternative approach: Use Theme Customizer’s Custom CSS section with
top: -20%for screens under 550px width
Current Status:
The initial code attempts didn’t achieve the desired result—badges remain on top of product images rather than positioned above them. A refined CSS solution was offered using:
left: 50%withtransform: translateX(-50%)for centeringtop: -23%to move badges further above the image- Media query targeting screens max-width 550px
The discussion remains ongoing as the user seeks the exact positioning shown in their reference screenshot. The solution involves CSS customization through either the theme’s stylesheet files or the built-in Custom CSS section in Theme Settings.
1 Like
Please, share your store URL with password. Thanks!
www.takeoverapparel.com website password is takeover
Thanks for the info, try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 550px){
.collection .card__badge.top.left {
position: absolute;
top: -20px;
}
}
- And Save.
- Result:
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
You can move badge above image by following this instruction:
-
Go to Shopify > Theme > Customize
-
Copy and paste this code on Theme settings > Custom CSS section
@media screen and (max-width: 550px{
.card__badge {
top: -20% !important;
}
}
here is the result :
You can try to paste this code below to the custom CSS section:
@media screen and (max-width: 550px){
.card__badge.top.left {
left: 50% !important;
transform: translateX(-50%);
top: -23% !important;
}
}