Shopify themes, liquid, logos, and UX
Hey,
Is there a way to reduce the size of the Sale Badge on collection pages for both desktop and mobile views? I’ve tried searching for a solution but seems like no one has come up with one in the forums.
url to my site:
https://bellevodesign.com/collections/bedding-sets
Example of the badge:
Desired end result:
Solved! Go to the solution
This is an accepted solution.
Hey @bellevo,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
In padding the format is 'top/bottom left/right" so 5px top/bottom and 5px left/right. Same for 4px 4px.
Also, the 5px 5px padding, and 10px font size is for desktop, 4px 4px padding, 9px font-size is for mobile. Change these values as you like to fit your needs.
<style>
.card__badge.bottom.left span {
padding: 5px 5px !important;
font-size: 10px !important;
}
@media only screen and (max-width: 989px) {
.card__badge.bottom.left span {
padding: 4px 4px !important;
font-size: 9px !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
This is an accepted solution.
Hey @bellevo,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
In padding the format is 'top/bottom left/right" so 5px top/bottom and 5px left/right. Same for 4px 4px.
Also, the 5px 5px padding, and 10px font size is for desktop, 4px 4px padding, 9px font-size is for mobile. Change these values as you like to fit your needs.
<style>
.card__badge.bottom.left span {
padding: 5px 5px !important;
font-size: 10px !important;
}
@media only screen and (max-width: 989px) {
.card__badge.bottom.left span {
padding: 4px 4px !important;
font-size: 9px !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Worked perfectly, thank you!
Hello,
I am San from MS Web Designer.
Here is the solution:
Go to Themes > Edit code > Theme.liquid > at the bottom place this code before </body>
<style>
.product-card-wrapper .card__badge {font-size: 10px;padding: 2px 5px !important;}
</style>
Do let know in case of any concerns.
Regards,
San
If it’s helpful to you, please mark it as a solution.
Need Help with Shopify Design, Migration, Speed, or Custom tasks?
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025