can someone bring the 20% off tag down on my product image which is currently placed on top of my store link https://swawe.store/ , I want to display 20%off and coming soon on bottom left than on top right
password is- omg
Topic summary
A user needs help repositioning a “20% off” badge on product images from the top-right corner to the bottom-left corner.
Initial Misunderstanding:
- First response provided CSS to add top margin, which didn’t address the actual requirement.
Solution Provided:
Multiple contributors offered the same CSS fix:
.product-card-wrapper .card__badge span {
position: absolute;
left: 10px;
bottom: 10px;
}
Implementation:
- Add the code to: Online Store → Customize → Settings → Custom CSS
- The CSS uses absolute positioning to anchor the badge to the bottom-left corner
The user included a screenshot showing the desired placement, helping clarify the requirement after initial confusion.
Hi @attackon
You can add custom CSS to add some margin on top of that 20% off on product images.
Please add the below CSS to your theme base.css file.
.product-card-wrapper .card__badge span {
margin-top: 20px; /* adjust it accordingly */
}
Thank you.
Sorry about the confusion.
@attackon please try adding this one. It will place the element in the left bottom corner just like the image above.
.product-card-wrapper .card__badge span {
position: absolute;
left: 10px;
bottom: 10px;
}
