Supply Theme: Show percentage off in addition to $ off

Amanda15
New Member
18 0 0

I'm trying to show the percentage of savings in addition the amount saved on the Supply theme. For instance, right now it shows underneath the product price "Save $210." This is computed by taking the compare at price and subtracting the product price. However, I want it to show "Save 75% ($210)." How would I go about doing this. I found some code online:
{% capture discount %} {{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}% {% endcapture %}

But I don't know where to put it and how to utilize it. Please help!

 


 

 

0 Likes
Alex135
Astronaut
1889 1 461

Edit HTML/CSS and open Assets/price-sale.liquid.  Add two lines of code in the middle.  You should end up with:

...
    {% capture saved_amount %}{{ saved_amount | replace: ',','<sup>' }}</sup>{% endcapture %}
  {% endif %}
{% endunless %}

{% capture saved_percent %}{{ compare_price | minus: product_price | times: 100 | divided_by: compare_price }}% {% endcapture %}
{% assign saved_amount = saved_percent | append: "(" | append: saved_amount | append: ")" %}

{% assign saved_amount = saved_amount | strip %}
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}

...

I hope this helps. 

Amanda15
New Member
18 0 0

Thank you! It worked like a charm. Only thing is it is not showing this on the product pages too....only the frontage. 

0 Likes
Alex135
Astronaut
1889 1 461

You'll need to edit some Javascript as well.  In product.liquid, look for the following block of code.

      // Also update and show the product's compare price if necessary
      if ( variant.compare_at_price > variant.price ) {
        var priceSaving = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price - variant.price, "{{ shop.money_format }}") );
        {% comment %}
        priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
        {% endcomment %}
        $comparePrice.html({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();
      } else {
        $comparePrice.hide();
      }

Change that to:

      // Also update and show the product's compare price if necessary
      if ( variant.compare_at_price > variant.price ) {
//        var priceSaving = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price - variant.price, "{{ shop.money_format }}") );
        var priceSaving = ((variant.compare_at_price - variant.price)/variant.compare_at_price*100).toFixed()+"%";

        {% comment %}
        priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
        {% endcomment %}
        $comparePrice.html({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();
      } else {
        $comparePrice.hide();
      } 

Amanda15
New Member
18 0 0

Thank you so much. Happy holidays!

0 Likes
Shepherd2231
New Member
1 0 0

Hello, I'm trying to implement this code into my shop but the coding must have changed  since this was posted or I'm looking in the wrong place, could you possibly provide updated code to insert?

0 Likes