Brooklyn : Product section show the percentage of the savings

Highlighted
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
Highlighted
Shopify Partner
1866 181 748

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!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Highlighted
New Member
2 0 0

Hi,

Thanks a lot, it worked great !!

0 Likes
Highlighted
New Member
2 0 0

O Yeah thanks a bunch!

0 Likes
Highlighted
Shopify Partner
64 1 3

Hi @KarlOffenberger 

is possibile to do the same with debut theme?

 I cannot find the the .liquid file 

I have product-card-grid.liquid or collection-card-grid.liquid

 

Can you help me please?

0 Likes
Highlighted
Tourist
3 0 1

Yes I want to show amount saved as % on product details page also, TIA

0 Likes
Highlighted
New Member
1 0 0

This worked perfectly! Thank you so much!

 

I have another question. I was able to change from e.g. "Save 5$" to "save 15%" but I'd also like this text to change to "15% Off". Is there any way to do this?

 

0 Likes
Highlighted
Tourist
22 0 4

Hi,

@KarlOffenberger T used your code for the % discount. and i worked.

However I realise the discount is not rounded up.

For example, RM300/RM340 give 12% (11.6% to be exact). The % saved shows 11%, the rounded amount.

How can I make sure all of my % is rounded upwards?

Percentage discount.JPG

Thank you

0 Likes
Highlighted
Shopify Partner
1866 181 748

@EeJin Just use ceil instead of round in the last code snippet I showed.

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
Tourist
7 0 10

worked perfectly!!

0 Likes