Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there,
Can anyone please tell me how to show the actual % off for each product, say 20% OFF or save $, to replace the "sale". I am using dawn. Thank you.
Best Regards,
@pleasehelr Hey, thanks for posting here.
can you please share the link to inspect it, thanks.
{% if product.compare_at_price > product.price %}
{% assign percent_off = 100 | times: (product.compare_at_price - product.price) | divided_by: product.compare_at_price | round %}
{{ percent_off }}% OFF
{% endif %}
hi Pleasehier
To display a percentage discount on a collection page in Shopify, you can use the following code in your theme's Custom Liquid block:
1 Calculate the percentage discount:
(% capture discount %) (( product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max ))% (% endcapture %)
2 Display the discount:
{{discount }}
if you face any issue let m know
Hi @pleasehelr
This is Richard at PageFly - Shopify Advanced Page Builder app.
You can try the following steps I have provided to help you solve the problem you are facing:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file price.liquid
Step 3: In that file comment the code which currently displays the SALE badge, and instead add code for discount.
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>
And replace it with this
{%- if compare_at_price > price -%}
{% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ discount }}% OFF
</span>
{% endif %}
Hoping my solution helps you solve your problem.
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Thank you it worked
Hi @pleasehelr
Please go to Online Store > Themes > click "..." in Dawn theme > Edit code > open card-product.liquid file, find this line of code around line 139 to display it on collection
{{- 'products.product.on_sale' | t -}}
Replace it with this code.
{%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%}
{{ percent }}%
To display it on the product page, please open the price.liquid file, find this line of code
{{ 'products.product.on_sale' | t }}
Replace it with this code and save the file.
{%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}
{{ percent }}%
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi @Perennial ,
Please find the below code to implement the same file named to change is card-product.liquid.
{%- assign difference = card_product.compare_at_price | minus: card_product.price -%}
{%- assign float_difference = difference | times: 1.0 -%}
{%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%}
{%- assign discount_percentage = discount_fraction | times: 100 | round -%}
{{- discount_percentage }}
To implement the same on product page too, request you to refer the below video for line number and other details.
Hope this will helps...
{% if product.compare_at_price > product.price %}
{% assign discount = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
<span>
{{ discount }}% OFF
</span>
{% endif %}
this one works for me.
Learn 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, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025