Brooklyn : Product section show the percentage of the savings

New Member
2 0 0

Hello,

New in the shopify world, I wanted to do a change in my Brooklyn theme, but I couldn't find how.

On my landing page I have a collection with the products, and above the product image I have saved + the amount.

Instead of the amount I wanted to show only the percentage of the savings

There are solutions on the site, tried them but didn't work.

Thanks for your help !

 

 

0 Likes
Shopify Partner
1838 173 601

Hi there!

 

So you will need to make a small change in your theme code, but it isn't much.

 

Step 1

First let's backup your theme in case of trouble - better be safe than sorry. Go to Online Store > Themes and then Actions > Duplicate. Great!

 

Step 2

Go to Actions > Edit code and from in the editor that loads, open the file found in Snippets / product-grid-item.liquid from the folder pane on the left. Now look for these lines of code around line 70

 

 

<div class="grid-product__on-sale">
  {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
  <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
</div>

 

Step 3

Replace above lines for this

 

<div class="grid-product__on-sale">
  {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | round }}{% endcapture %}
  <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}%</p>
</div>

Hit Save and check it out!

 

This will only change savings to percentages on the product grid i.e. when viewing collections. You may still see monetary amount based savings on your product detail pages. That can be changed too.

 

Let me know if this helped you out and best wishes!

I turn coffee in to code - since 1998
2 Likes
New Member
2 0 0

Hi,

Thanks a lot, it worked great !!

0 Likes
New Member
1 0 0

O Yeah thanks a bunch!

0 Likes