Supply Theme: Change saved amount from $ to % on product page

Store Design
1

I’m trying to change the savings amount to percentages from dollars, and I’m having problems with it showing up correctly on the product page. I updated the price-sale.liquid, so it shows correctly on the collections pages, but when I go to the product pages it will briefly show the correct text and then when the compare at price gets updated so does the savings amount, and it updates to the $ version.

Here is the price-sale.liquid:

{% assign saved_amount = compare_price | minus: product_price | times: 100 | divided_by: compare_price | round %}

{% comment %}
{% if shop.money_format contains 'money' %}
  {% assign saved_amount = saved_amount | money %}
{% else %}
  {% assign saved_amount = saved_amount | money_without_trailing_zeros %}
{% endif %}

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{% endcomment %}

{% if compare_price > product_price %}
  Save {{ compare_price | minus: product_price | times: 100 | divided_by: compare_price | round }}%
{% endif %}

I’ve looked in product-grid-item.liquid, product-template.liquid, and product-list-item.liquid to see if they overwrite that text, but they all call:

{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}

It feels a lot like some of the original code was duplicated, but I have no idea where to look.

2

Hello!

That’s Javascript tripping you :wink: Basically, on product pages you have variants and as you change your options, Javascript makes sure the prices etc. are updated accordingly in the HTML. Have a look at your Assets / theme.js.liquid for these lines

        // 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, moneyFormat) );
          // priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
          this.settings.selectors.$comparePrice.html("Save [$]".replace('[$]', priceSaving)).show();
        } else {
          this.settings.selectors.$comparePrice.hide();
        }

And update priceSaving accordingly (or let me know if you need JS help).

Best wishes!

3

Thanks so much! That is exactly what I needed to fix!

4

Hi,

Can you let me know what changes you did in Assets / theme.js.liquid to make it work?

Thanks!

5

So, it ended up looking like this:

// 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, moneyFormat) );
           priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
          this.settings.selectors.$comparePrice.html({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();
        } else {
          this.settings.selectors.$comparePrice.hide();
        }

And it read “Save $x (y%)”

6

Please help :open_mouth:

I copied the very first code above into price-sale.liquid and it works on the category page. But to show it on product page I just cant find the code in assets.

Where do I put the second code to display on product page? I dont know where to put it

7

Assets / theme.js.liquid

Look for that comment. (You can use ctrl+f to search) The code should be pretty similar, as I pretty much just changed the inside of the formula.

8

I know how to search for something..Its not there… in my assets there is no such code

9

actually you were right! I found it now! But still am in help because of the phrasing, can I make it to just % and a costume phrase?

10

You sure can.

These two lines make the string you want to display. The first one is the $$ saved, and the second one is the %.

var priceSaving = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price - variant.price, moneyFormat) );
           priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';

This line displays ‘save’ followed by your string.

this.settings.selectors.$comparePrice.html({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();

So, if you want it to say “Save x% custom phase” you would change it to this:

var priceSaving = timber.formatSaleTag( Shopify.formatMoney((variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0), percentFormat) );
priceSaving += ' insert a custom phase';
11

Hi,

The above solution worked for me, but it only worked for product pages. It not working on home page or collection pages.
Is there any other solution to show % on other pages.

12

Hi,

The above solution worked for me, but it only worked for product pages. It not working on the home page or collection pages.
Is there any other solution to show % on other pages?

13

Hi there,

Is there any way to just show the percentage and not the dollar amount?