A user wants to modify the sale badge on their product page to have sharp rectangular corners instead of rounded ones, matching the style of their product card badges. They are using the Dawn theme.
Solutions provided:
base.css file to remove border radius: .badge{border-radius: unset !important;}.product .badge { padding: .5rem !important }.badge{font-size: 1rem;}An alternative suggestion was made to use a third-party Product Badges app for more customization options.
Status: The issue appears resolved with CSS modifications, though the user hasn’t confirmed the final implementation.
hello, i want to change the sale badge on my product page so that it is a rectangle, like my product card. On the product page, it is currently got curved corners.
this is the product page, as you can see it has curved corners. I want it like this:
this is my product card, where it is a rectangle instead of curved corners
my website is www.marcomontesi.com , theme is dawn
@ads18922 please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css
.badge{border-radius: unset !important;}
thank you, is there a way to also make the box and text a bit smaller?
Please use this code
.product .badge { padding: .5rem !important }
@ads18922 to reduce text size add this
.badge{font-size: 1rem;}
Hi @ads18922 ,
You can consider using the Product Badges app and its Price Badge feature to customize your badges on product pages.
