Displaying discount percent to collection pages - debut theme

16 1 2

Hi all,

I would like some help with some coding, please. I have no knowledge or experience of coding and most of the editing I have done so far has been through following answers on this forum.

I am using the free Debut theme (still a long way to go before I'm finished).

What I'm struggling to find a suitable answer for now, is how to add a discount % next to my product prices on my collection pages. I managed to add it to my product pages using the following code in "product-template.liquid" (using a seperate thread answer);


You save: {{ product.compare_at_price_max | minus:product.price | difference:product.compare_at_price_max | money }}
({{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}% off)

I have managed to add the same code to collection-template.liquid, and it does show on the collection page. However, it ends up in random places depending on where I add the code (as follows);Screenshot_20200702-192232_Chrome.jpg

The best I can get it, is to look as follows:20200702_192247.jpg

I would like to move the position of the discount percent to underneath (centered) the regular/sale price.

Could somebody please tell me how to do this? I.E. which liquid to add the coding to, or any additional coding to add/replace?


Thank you for any help.



21 0 3

I'm looking for the same thing.  I'm guessing there is an app for that, but can't find one.