Displaying discount percent to collection pages - debut theme

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);

The best I can get it, is to look as follows:

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.

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

What’s the code for the “best you can get” version?