Adding a percentage in the sale banner

Comments

5 comments

  • Avatar
    Julia W.

    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
  • Avatar
    Alex

    Will this work in Flex Theme?

    0
    Comment actions Permalink
  • Avatar
    Julia W.

    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
  • Avatar
    Alex

    Thank you!

    0
    Comment actions Permalink
  • Avatar
    Victorien Banck

    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.