How to Display Discount Percentage and Savings on product page DAWN THEME

Shopify Discussion
1

How can we display the percentage of the discount and the amount saved in the product page like the image below:

save.PNG
save.PNG1232×321 235 KB

​

2

You can Paste below code

{%- assign savings = product.selected_or_first_available_variant.compare_at_price
      | minus: product.selected_or_first_available_variant.price
      | times: 100.0
      | divided_by: product.selected_or_first_available_variant.compare_at_price
      | round
      | append: '%'
    -%}
    

You Save {{ savings }} (${{ product.compare_at_price | minus: product.price | divided_by: 100 }}.00)

If it does not helps contact me: ds2305187@gmail.com

3

Hello @deepaksharma , paste the code in which section?

4

Hi @enovation ,

The code exist on two places card-product.liquid and main-product.liquid, however file name depends on theme structure and vary based on theme and its version.

Below is the code for card-product.liquid and DAWN theme.

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

Same code will work for product too. please refer the below video for detail implementation for both pages.

Hope this will helps…