Showing sale percentage on products Brooklyn Theme

Highlighted
New Member
5 0 0

As stated, i would like help on the coding for above case, i read some old links such as;

https://ecommerce.shopify.com/c/ecommerce-design/t/showing-sale-percentage-on-products-brooklyn-them...

This worked for the collection page but not for product page.

I cant seem to find {% if product.compare_at_price > product.price %} in product.liquod.

 

Any advise?

 

Thanks

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
33 0 5

Hi Jack!

Great to see that you were able to implement something that worked for your collection pages. I'd be happy to troubleshoot getting you a percentage on your product page!

Here are the steps I followed to achieve the below:

  1. Go to Online Store > Actions > Duplicate 
    Because it's always good to have a backup! 

  2. Click Actions > Edit Code then open the product-template.liquid found under Sections

  3. Around line 75, enter the following:

    Save {{ product.price | times: -100 | divided_by: product.compare_at_price_max | plus: 100 | ceil | append: '%' }}!

Hopefully this was helpful, Jack! Are you in a sale season right now? If so, I'd be curious to hear what marketing strategies you're using to drive traffic to these!

1 Like
Highlighted
New Member
2 0 0

Hey, great advice. But "Around line 75"? Can you be more specific please as to what line to look for? When I go around there it shows nothing of the sort that your screenshot shows.

0 Likes
Highlighted
New Member
1 0 1

Not sure if you figured this out, but it took me a while to figure it out.

Here to help! :)

Search for this line:

 

 

{% include 'product-price', variant: current_variant %}

and insert the code below it.

Final code looks like this.

{% include 'product-price', variant: current_variant %}
Save {{ product.price | times: -100 | divided_by: product.compare_at_price_max | plus: 100 | ceil | append: '%' }}!

 

 

check out thetravelpact.com

 

1 Like
Highlighted
New Member
1 0 0

I made this change to my site, and it worked on sale pages. But on non-sale pages it still calculates the price vs. compare at price. Even if both are the same it will show up as Save -0%.

 

What code is required to make sure that it only applies to on sale items?

 

2_5oz_Mini_Portable_Espresso_Maker_–_Valta_Gear.jpg

 7oz_Insulated_Goat_Horn_Mug_–_Valta_Gear.jpg

0 Likes
Highlighted
Shopify Partner
12 0 4

Hi @volant19 ,

Better late than never. Here is the code to show only when the percentage is greater than 0%

 

{% include 'product-price', variant: current_variant %}
{% assign save_price_percentage =
product.price | times: -100 | divided_by: product.compare_at_price_max | plus: 100 | ceil %}

{% if save_price_percentage %}
Save {{ save_price_percentage }}%
{% endif %}

 

 

2 Likes
Highlighted
Shopify Partner
64 1 3

hello guys, i need your help too, i just implemented the code in my debut theme provided by @Leysam  and it's partially working, i will explain what i mean.

In my product page now i can see the the full price, the discounted price in red with the "sale" writing and after it's visible the discount percentage like in the pic below:Schermata 2020-01-26 alle 10.01.38.png

I noticed that my sale price is exactly 50% off, why it's showing 54% ?

 

while if a product has no discount it's showing the following error:Schermata 2020-01-26 alle 09.59.19.png

this is my code: 

 <div class="product__price">
            {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
            
            {% assign save_price_percentage = product.price | times: -100 | divided_by: product.compare_at_price_max | plus: 100 | ceil %}

			{% if save_price_percentage %}
		      Save {{ save_price_percentage  }}%
			{% endif %}
            
          </div>

line 123 is: 

 {% assign save_price_percentage = product.price | times: -100 | divided_by: product.compare_at_price_max | plus: 100 | ceil %}

 

My last question is if could be possible to show the percentage discount in the home page too in the hotselling or feautured collection?

right now the prodcut is appearing like this:Schermata 2020-01-26 alle 09.59.56.png

 

 

0 Likes
Highlighted
Shopify Partner
12 0 4

 Hello @B_R-25 

 

I updated the code to fix the error.

{% if product.compare_at_price_max > 0 %}
{% assign save_price_percentage = product.price | times: -100 | divided_by: product.compare_at_price_max | plus: 100 | ceil %}
{% if save_price_percentage %}
Save {{ save_price_percentage }}%
{% endif %}
{% endif %}
 

 Schermata 2020-01-26 alle 10.01.38.png

I noticed that my sale price is exactly 50% off, why it's showing 54% ?

 

Are you showing the script to the product page? 

 

 

My last question is if could be possible to show the percentage discount in the home page too in the hotselling or feautured collection?

Yes, it's possible, you just need to copy the code to the product grid snippet or section. As long as the section is not an app this code will work on all sections of the sites.

0 Likes
Highlighted
Shopify Partner
64 1 3

@Leysam thank you, meanwhile I used a different code but I will try this asap too.

thanks ;)

0 Likes
Highlighted
Tourist
12 0 0

Hey @Leysam  thanks its working perfect, now only the things is that after following this guide  https://community.shopify.com/c/Shopify-Design/Showing-sale-percentage-on-products-Brooklyn-Theme/m-...  collection pages are looking uneven like in 1st line only one product is there and in 2nd & 3rd line 3-3 products and in 4th line 2 product, so now collection page grid is looking uneven earlier grid was like 3X4

0 Likes