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

Solved
Highlighted
Tourist
5 0 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. 

0 Likes
Highlighted
Shopify Partner
1839 176 680

This is an accepted solution.

Hello!

 

That's Javascript tripping you ;-) 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!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
1 Like
Highlighted
Tourist
5 0 1

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

0 Likes
Highlighted
New Member
1 0 0

Hi,

 

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

 

Thanks!

0 Likes
Highlighted
Tourist
5 0 1

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%)"

0 Likes
Highlighted
New Member
3 0 0

Please help :O 

 

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


@LadyChaoz wrote:

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%)"


 

 

0 Likes
Highlighted
Tourist
5 0 1

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.

1 Like
Highlighted
New Member
3 0 0

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


@LadyChaoz wrote:

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.


 

0 Likes
Highlighted
New Member
3 0 0

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?


@Hootz wrote:

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


@LadyChaoz wrote:

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.


 


 

0 Likes
Highlighted
Tourist
5 0 1

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';

 

0 Likes