how to show percentage discount on product page shopify

chaungo
Visitor
1 0 0

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.

Replies 6 (6)

KidSmithy
Tourist
8 1 1

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

KidSmithy_0-1675390834247.png

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

KidSmithy_1-1675391361473.png

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
Shopify Expert
3401 450 503

Hi @chaungo 

Please follow these steps:

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

pasted image 0.png

- 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.

view - 2023-02-06T085321.467.png

- Find the code:

badge price__badge-sale

view - 2023-02-06T085435.776.png

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

view - 2023-02-06T085536.486.png

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:

view - 2023-02-06T085623.384.png

- After:

view - 2023-02-06T085635.004.png

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

view - 2023-02-06T085729.316.png

- 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:

view - 2023-02-06T085807.983.png

- After:

view - 2023-02-06T085818.100.png

- Here is the result:

view - 2023-02-06T085834.717.png

I hope that it will work for you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

lojasodi
Tourist
10 0 1

Thank you! That worked for me

BSS-Commerce
Shopify Expert
3401 450 503

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

lojasodi
Tourist
10 0 1

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

chatwindirect
Shopify Partner
1 0 0

Thank you! Worked perfectly for me!

Freddy Gonzalez Milanes
Chatwin Company, LLC