Solved

How do I add percentage discount to collection page(Debut theme)?

tinaomi
New Member
6 0 0

Hi Shopify Community,

I would like the products on my collection page to show the percentage and price discount below the compare-to sale price. I followed the instructions in another post but it's not working for me.

I added the below code to Snippets>products-price.liquid at the very end just above </dl> and it's showing only on the product page and not on the collection page. 

{% if product.compare_at_price_max > product.price %}You save {{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | truncate: 5, "" }}%{% endif %}

{% if product.compare_at_price_max > product.price %} ({{ current_variant.compare_at_price | minus: current_variant.price | money }}){% endif %}

I've attached pictures of how it looks like on the product page and where I'd also like it to appear on the collection page. Does anyone know how to fix this issue? Thanks in advance. 

percentage & price discount on product pagepercentage & price discount on product pagewhere i'd like it to appear on collection pagewhere i'd like it to appear on collection page

Accepted Solution (1)

ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There, 

1. Go to Online Store->Theme->Edit code
2. Asset->snippets/product-price-listing.liquid->paste bellow code after price

{% if product.compare_at_price_max > product.price %}
You save {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%
{% endif %}
{% if product.compare_at_price_max > product.price %} ({{ product.compare_at_price | minus: product.price | money }}){% endif %}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 7 (7)

ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There, 

1. Go to Online Store->Theme->Edit code
2. Asset->snippets/product-price-listing.liquid->paste bellow code after price

{% if product.compare_at_price_max > product.price %}
You save {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%
{% endif %}
{% if product.compare_at_price_max > product.price %} ({{ product.compare_at_price | minus: product.price | money }}){% endif %}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
tinaomi
New Member
6 0 0

Thank you so much! That worked perfectly.

DorisChio
Visitor
1 0 0

Where exactly is “ after price”?

 

Thank you.

Varun22
Excursionist
22 0 4

What exactly after price means ?

jjcastillot
Excursionist
27 1 8

Hello. I really tried to replicate this solution but it wasn't possible to show the discount tags on any collection. Can you specify better where the code must be located, please? I'm using the debut theme.

asamad90
Tourist
9 0 2

Hello dear,

I've tried it but there is no effect, would you please show a vidio explanation for the solution? Thanks in advance.

Regards,

Abdulsamad

binteamin2021
Excursionist
28 0 12

Do you know hot to make the font italic and change color of 'you save' line?