How To Show % Discount

[pleasehelr]

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,

[ProtoMan44]

@pleasehelr Hey, thanks for posting here.
can you please share the link to inspect it, thanks.

[Asad-Mahmood]

• Go to your Shopify Admin dashboard.
• Navigate to Online Store > Themes.
• Click on “Actions” > “Edit code”.
• Look for the template file that controls how product prices and sale labels are displayed. This is usually product.liquid
• Replace the part that displays “Sale” with the below Liquid code to calculate the percentage off.

{% 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 %}

[Perennial]

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

[PageFly-Richard]

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.

{{ 'products.product.on_sale' | t }}

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 %}

{{ discount }}% OFF

{% endif %}

Hoping my solution helps you solve your problem.

Best regards,

Richard | PageFly

[Dan-From-Ryviu]

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 }}%

[gr_trading]

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.

Display sale percentage instead of sale badge in Shopify theme | Dawn customization

Hope this will helps…

[hh2038]

{% 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 %}

{{ discount }}% OFF

{% endif %}

this one works for me.

[shoaiblucknow]

Thank you it worked

[vlamis]

Hi Dan

I tried your solution but nothing happen. Could you assist please?

Thanks

[Dan-From-Ryviu]

Hi @vlamis

What theme you ar using? Could you share your store link?

[vlamis]

For some reason my replies are disappeared. Hope you read this message.

Well, i d like to show the discount in product page and in collection product list.

Thanks, Best, George

[Dan-From-Ryviu]

Please follow this instruction:

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 }}%