Supply Theme: Change "Compare at Price" display on product page and collections page.

Chaya_Moltz
Tourist
5 0 2

I need help with changing the display of the Compare at Price.  Currently the theme shows the compare at price by showing how much you save.   Example: $280   "Save $20".  

Instead, I need it to show the higher price crossed out.  I need it to show $280 and then after that show $300 crossed out.

Thanks

Alex135
Astronaut
1889 1 460

You'll need to make several changes in the theme files.

Edit HTML/CSS and open Snippets/price-sale.liquid.  Change the first line to:

{% capture saved_amount %}{{ compare_price | money }}{% endcapture %}

Change Line 18 to:

{{ saved_amount }} 

Open Templates/product.liquid.  Look for the block of code below.

      // 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 it 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 priceCompare = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") );
        {% comment %}
        priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
        {% endcomment %}
        $comparePrice.html(priceCompare).show();
      } else {
        $comparePrice.hide();
      } 

Open Assets/timber.scss.liquid.  Add the following to the end of this file.

.sale-tag { text-decoration: line-through; }
.sale-tag sup { display: inline; }

I hope this helps. 

Jini_John
New Member
1 0 0

Alex, thank you so much. I had the same problem and it is addressed to an extent. I am using 'Supply' theme. After implementing the above code the problem I am having is that the compare at price is appearing as superscript and it looking very small and wierd. Please help in fixing this.I would like the price to appear in normal font. Here is my store link http://www.pallikaranaionlinestore.com/collections/personal-care

0 Likes
Chaya_Moltz
Tourist
5 0 2

Perfect!     Thanks Alex!

0 Likes
pipbandit
New Member
4 0 0

After applying this fix i'm having an issue with the new crossed out compare price and the old save $xxx appearing on the index page where the collections are showing.. how can i fix this?

Thanks in advance

 

0 Likes
pipbandit
New Member
4 0 0

Solved by removing everything below line 18 in price-sale.liquid

0 Likes
architecture
New Member
7 0 0

Hi Alex,

I have the same problem (e.g. 18.70$   25.70  instead of SAVE 7$) and such code does not exists anymore. 

Do you know a solution?

Thank you in advance.

 

0 Likes
suyash1
Shopify Partner
2718 289 451

@architecture - you can have that message too like you want, it will need bit code changes.

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
architecture
New Member
7 0 0

Hi Suyash,

 

Thank you.

Can you help me with the code? I do not know html or css.

 

Or where can I Find that?

0 Likes
suyash1
Shopify Partner
2718 289 451

@architecture - we need to display regular price and compare at price, if you are familiar with liquid coding you can do it, else I recommend add me to staff and I will check it, you can add my email given below to staff and contact me on it for quick communication, I will let you know everything.

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes