Adding a percentage in the sale banner

Follow

Caroline Patterson

• October 29, 2019 16:28

Hi there!

I'm looking to update my sale banners on the product thumbnails to show the percentage that customers are saving as opposed to just the word, SALE. Any thoughts on how to accomplish this?

 

Thanks :) 

0

• 

  Julia W.

  • October 30, 2019 18:16

  You can follow these steps to show the sale banner as a percentage:

   

  1. In the theme code go to the product-thumbnail.liquid snippet. If you’re on the Turbo theme go to the product-details.liquid snippet.
  2. You’ll need to find this code:
     

     <div class="sale_banner">{{ 'collections.general.sale' | t }}</div>

     
     and update it to be:
     
     

     {% assign savings = product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'| plus: 0 %}
     {% if savings > 0 %}
     
     <div class="sale_banner">Save {{ product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%</div>
     
     {% endif %}

   

  A couple of things to note:

  • This will not work if you have removed the decimals from your product prices.
  • If you have a product with variants, with only 1 or some of them on sale, this won’t apply because the thumbnail image represents all variants so the percentage discount would then not be true therefore would not work. In this case, you’re probably better to just leave the ‘SALE’ banner as it is.

  0

  Comment actions Permalink
• 

  Alex

  • November 05, 2019 14:11

  Will this work in Flex Theme?

  0

  Comment actions Permalink
• 

  Julia W.

  • November 06, 2019 14:23

  I think it would, you would just have to make a couple of tweaks! 

  In Flex, this information looks to be stored in the product-thumbnail__sticker.liquid snippet. 

  So you would change this code:  

  {% if product.compare_at_price_max > product.price %}
  <div class="sale-sticker thumbnail-sticker sticker-{{i}}">
  <span class="sticker-text">{{ 'collections.general.sale' | t }}</span>
  </div>
  {% endif %}

  to be this instead:

  {% assign savings = product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'| plus: 0 %}
  {% if savings > 0 %}
  <div class="sale-sticker thumbnail-sticker sticker-{{i}}">
  <span class="sticker-text">Save {{ product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%</span>
  </div>
  {% endif %}
  
  

  0

  Comment actions Permalink
• 

  Alex

  • November 06, 2019 21:17

  Thank you!

  0

  Comment actions Permalink
• 

  Victorien Banck

  • January 23, 2020 10:42

  Hello ! I'm on Turbo Theme and this following code doesn't work, it just remove the sale banner and don't put it in pourcentage... Do you have any update please ?

  0

  Comment actions Permalink

Please sign in to leave a comment.