how to show percentage discount on product page shopify

[chaungo]

Hi dear,

i would like to the percentage discounts is shown on the products. So please help me out. thank you

my page : Nineteenninety.ca. i use Shopify platform.

[KidSmithy]

Hello, if your looking to display discount in the form of sales badge

Solution 1: 

1) Check and see if your theme customisations has anything that shows sales badge at theme setting and tick the box

2)  go to snippet and change your liquid code to this(not sure if its price-product.liquid or product-grid smt smt.liquid for ur case scenario)

{% if liquidObject.available %} {% if liquidObject.compare_at_price_max > liquidObject.price and settings.sale_badge %}

 {{liquidObject.compare_at_price | minus: liquidObject.price | times: 100 | divided_by: liquidObject.compare_at_price }}% off

{% endif %} {% elsif settings.sold_out_badge %}

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

{% endif %}

reference: https://youtu.be/e02L1tvETwk

Solution 2: 

1) Go product page to enable it on theme customisation and enable it

2) If this option is not available, then at section, product.liquid 

Add this line of code to below variant price

<li>

<span class="variant-percentage js ">
{% if on_sale %}
<span class="variant-percentage" STYLE="font-weight:bold; margin-left: 1em" > {{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | money_without_currency | times: -100 | remove: '.0'}}%</span>
{% endif %}
</span>
</li>

Note: this code is not flexible and if fixed onthe 1st discount shown

[BSS-Commerce]

Hi @chaungo 

Please follow these steps:

- Go to Online Store => Theme => Edit code

- Find the file that shows the price of the product, usually the file price.liquid or main-product. With the Dawn theme, it is the file price.liquid.

- Find the code:

badge price__badge-sale

- If the beginning of the price.liquid file has a target setting

Please add the following code after {{ 'products.product.on_sale' | t }}

{{target.compare_at_price | minus: target.price | times: 100 | divided_by: target.compare_at_price }}% off

- Before:

- After:

- If the beginning of the file does not have a target setting as shown below:

- Please add the following code after {{ 'products.product.on_sale' | t }}:

{{product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}% off

- Before:

- After:

- Here is the result:

I hope that it will work for you.

[lojasodi]

Thank you! That worked for me

[BSS-Commerce]

Hi @lojasodi

We're happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.

Thanks in advance.

[lojasodi]

Hi BSS! I liked the comment but cannot mark as solution as I am not the question's owner.

[chatwindirect]

Thank you! Worked perfectly for me!

[gr_trading]

Hi @chaungo ,

Please refer the below code to implement the same.

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

To get details like line number and implement the same on product page request you to refer the below video.