Display compare at price next to sale price

Highlighted
New Member
18 0 0

I am looking for how to display the compare at price in red and strikeout next to the currently offered sale price on the Supply theme. Any help would be greatly appreciated. 

0 Likes
Highlighted
New Member
18 0 0

Any ideas?

0 Likes
Highlighted
New Member
18 0 0

My site is http://www.rotatethedeals.com using the supply theme. I think the designers took the compare at price out of the coding because I can't get it to show. I just need the compare at price to show in red strikethrough next to the product pricing. Please help!

0 Likes
Highlighted
Shopify Partner
148 0 17

Hey Amanda, 

This should be easy if you are a bit familiar with Shopify liquid. 

You can use variant.compare_at_price variable in your theme code.

Search for {{ variant.price | money }} in your theme's product.liquid template and add this right after it:

{% if variant.price < variant.compare_at_price %} {{ variant.compare_at_price | money }}{% endif %}

Hope this helps.

★ Shopify Customer/Order Auto Tag App → 99rabbits.com ★
0 Likes
Highlighted
New Member
18 0 0

That is a step in the right direction, thank you. It still isn't showing up on the homepage, just the individual product pages. It also is not in strikethrough and not side by side by the sale price either....

0 Likes
Highlighted
Tourist
29 0 2

I am uncertain as to how I can go about adding text for RRP along with a strikethrough of the price.

The above code you've provided Stas was helpful in locating where I need to look :)

 

    <ul class="inline-list product-meta">
        <li>
          <span id="productPrice" class="h1">
            {% include 'price' with variant.price %}
          </span>
        </li>
        <li>
          <span id="productPrice" class="h1">
            {% include 'price' with variant.compare_at_price %}
          </span>
        </li>

        {% if product.compare_at_price_max > product.price %}
        <li>
          <span id="comparePrice" class="sale-tag large">
            {% assign compare_price = variant.compare_at_price %}
            {% assign product_price = variant.price %}
            {% include 'price-sale' %}
          </span>

However this only shows on the product pages, though I prefer to only have the save amount shown on the collection pages.

0 Likes
Highlighted
Shopify Partner
148 0 17

Great! Then you'd search for thus save variable in your product-loop.liquid, which is in snippets directory in your theme.

★ Shopify Customer/Order Auto Tag App → 99rabbits.com ★
0 Likes
Highlighted
Tourist
29 0 2

So I changed the above code as the formatting was off and I wanted to included the RRP text.

I also received some support from a Design Guru with the strike through.

        <li>
         <span itemprop="name">RRP</span>
          <span id="productPrice" class="h7" style="color:red;text-decoration:line-through">
            <span style="color:black">{% include 'price' with variant.compare_at_price %}</span>
          </span>
        </li>

The issue I face now is that the variant compare at price remains as the first variant value.

So if there are different RRP for the products the 'Save $X' changes but the RRP value does not.

0 Likes
Highlighted
Astronaut
1890 1 442

@Online Bathroomware:  You'll need to make several changes.

First make some changes to the code you pasted.  We can't use the same id here, so let's change that and tidy things up.  (I assume you want black text here instead of red.)

        <li>
         <span itemprop="name">RRP</span>
          <span id="retailPrice" class="h7" style="color:black;text-decoration:line-through">{% include 'price' with variant.compare_at_price %}</span>
        </li>

We also need to make changes to the Javascript.  In the same file, look for the blocks of code below and add the bold lines of code.

    var $addToCart = $('#addToCart'),
        $productPrice = $('#productPrice'),
        $comparePrice = $('#comparePrice'),
        $retailPrice = $('#retailPrice'),
        $variantQuantity = $('#variantQuantity'),
        $quantityElements = $('.quantity-selector, label + .js-qty'),
        $addToCartText = $('#addToCartText'),
        $featuredImage = $('#productPhotoImg'); 

      // 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 retailPrice = 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({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();
        $retailPrice.html(retailPrice).show();
      } else {
        $comparePrice.hide();
        $retailPrice.hide();
      } 

I hope this helps. 

Highlighted
Tourist
29 0 2

Legend!

Worked like a charm. Thank you very much :D

0 Likes