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

Shopify Discussion
1

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 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 page
percentage & price discount on product page780×662 41.2 KB

where i'd like it to appear on collection page
where i'd like it to appear on collection page1208×762 116 KB

2

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

1 Like
3

Thank you so much! That worked perfectly.

4

Where exactly is “ after price”？

Thank you.

5

What exactly after price means ?

6

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.

1 Like
7

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

8

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