December 19, 2016

Liquid Logic - if variant.compare_at_price =! blank This post is outdated

Hello Shopify community,

I appear to be having an issue implementing the following IF statement on my Shopify store's product page. I am trying to display a percentage discount for a variant where there is a compare at price set, but hide it where this information is not relevant or available, and only display the whole thing if the user has set to display the "You Save" section in my theme. Here is the applicable section. 

{% if variant.price < variant.compare_at_price %}
{% if settings.product_hide_you_save %}
<span class="price">{{ 'variant.you_save' | t }}: <b id="save_value-{{ product.id }}">{{variant.compare_at_price | minus: variant.price | money}} ({{ variant.compare_at_price | minus: variant.price | times: 100.0 | divided_by: variant.compare_at_price  | round: 2  }}%)</b></span>
{% endif %}
{% endif %}

As far as I can tell, this should work. However, I have been unsuccessful in using a variety of things in the if statement.

Unsuccessful attempts: 

 {% if variant.compare_at_price != blank %}

 {% unless variant.compare_at_price == blank %}

 {% if product.compare_at_price != blank %}


Removing the statement altogether, the code displays correctly, but displays an error on variants where no compare at price is defined. 

Appreciate any help you can provide!

Many thanks,


Jason Shopify Expert freakdesign.com.au
December 20, 2016

If you are on the product page you won't be able to just call something using variant. The Variant is part of the product so would need to be product.variants.first (for the first variant).

If we assume your products only have the one default variant:

{% assign firstVariant = product.variants.first %}
{% unless firstVariant.compare_at_price == blank %}
{% endunless %}


★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
11 months ago


I have the Narrative theme and the Compare at price is "visually hidden".

Can anyone out there please help me to adjust the code to show the Compare At Price?

Much much much help.




  Product Form & Description
  {% endcomment %}
  <div class="product__content page-width">
    <div class="grid">
      <div class="grid__item medium-up--push-one-twelfth medium-up--ten-twelfths">
        <div class="product__content-header">

          {% if section.settings.show_vendor %}
            <p class="product__vendor text-small text-center" itemprop="brand">{{ product.vendor }}</p>
          {% endif %}

          <h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>
          <p class="product__price text-center {% if current_variant_sale %}product__price--sale{% endif %}" data-product-price aria-live="polite">

              <span class="product__sale-price-label visually-hidden"> {{ 'products.product.sale_price' | t }} </span>
              <span class="product__regular-price-label visually-hidden"> {{ 'products.product.price' | t }} </span>
              <span class="product__current-price" data-regular-price>{{ current_variant.price | money }}</span>

              <span class="product__compare-price-label visually-hidden"> {{ 'products.product.regular_price' | t }} </span>
              <s class="product__compare-price" data-compare-price>{{ current_variant.compare_at_price | money }}</s>

        <div class="product__content-main">
          <div class="product__description rte" itemprop="description" class="rte">
            {{ product.description }}

          <div class="product__form-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <div class="product__form-wrapper">
              <meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
              <meta itemprop="priceCurrency" content="{{ shop.currency }}">
              <link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">

              {% include 'product-form' %}

              {% if section.settings.show_share_buttons %}
                {% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
                  <div class="product__share-wrapper small--hide">
                    <div class="product__share">
                        {% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: product %}
                {% endif %}
              {% endif %}


  {% comment %}