A user wants to customize their Shopify Dawn theme’s sale badge to match Zara’s style, displaying both the discount percentage and discounted price directly within the badge.
Initial Solution:
price.liquid fileOngoing Issues:
Current Status:
The discussion remains unresolved. A CSS solution was provided to reduce badge size on mobile using media queries, but this also affected the product page display (which the user wants to keep larger). The latest code adjustment attempt has not resolved the sizing conflict between mobile and desktop views. The user continues to seek a solution that maintains proper badge sizing across different screen sizes while matching Zara’s layout.
hiii
I would like to change my sale badge into brand Zara’s sale badge. In Zara’s sale badge it shows product discount % and product price right inside the badge only I want that kinda badge which shows product discount % and product price after discount inside the badge.
Please check screenshot of Zara’s badge :
store url : https://5a3cf5-fc.myshopify.com/products/rhinestone
@ctal37 ,
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file price.liquid.
Step 3. Find and remove the code i’ve marked here
Step 4: Find and replace the following code snippets
by this
{% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
-{{ discount }}%
{{ money_price }}
It will look like this
Step 5: Save it
Hope it helps 
hey @BSSCommerce-B2B there is a issue. this code is making the badge visible only inside the product page but there is no badge showing on homepage product and also how do I change discount % on badge. please
@ctal37 , Please follow these steps again:
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file price.liquid.
Step 3. Find and replace the code i’ve marked here
by
{% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
-{{ discount }}%
{{ money_price }}
Step 4: Remove this one
Hi @ctal37 ,
You can refer to the Product Labels & Badges app to customize badges according to your preferences with our new Price Badges feature.
Prices shown in the image are for illustration purposes only.
@BSSCommerce-B2B now another issue, I changed the sale badge colour to pink but on home page it is still in black colour. how do I change the colour please
yes I’ve hide it. look the discount badge is going down in few mobile view and when I try decreasing the font and other sizes to fit it in the same row then it looking so small . please help
@ctal37 , I don’t think it can fit in a row on small devices because it’s too long. You can remove this to reduce the width of the custom element I gave you earlier.
@BSSCommerce-B2B hey it is possible check how Zara showcasing all the prices and still have space right after the badge. check screenshot and try helping. if it doesn’t fit in a row thn no use of this badge. so please help
@ctal37 ,
Step 1: Remove this one on the previous code i’ve commented before
Step 2: Add this code before in theme.liquid
Result:
If it helps you, please like and mark it as the solution.
Best Regards
hey it worked but look this code is decreasing the size of the badge even inside the product page but I don’t want to decrease the size of the badge in here. check screenshot please
@ctal37 , change the code like this
not changing anything still the same 