Add compare at price to Supply theme.

Add compare at price to Supply theme.md

1. Add the compare at price to the product-grid-item.liquid snippet. See gist file product-grid-item.liquid below.

2. Add the compare at price to the product-list-item.liquid snippet. See gist file product-list-item.liquid below.

3. Add the compare at price to the search-result-grid.liquid snippet. See gist file search-result-grid.liquid below.

4. Add the compare at price to the product.liquid template. See gist file product.liquid below.

5. For a more attractive strike-through, you can add some CSS to your stylesheet. See gist below.

product-grid-item.liquid

{% comment %}
  Right below this:
{% endcomment %}

{% include 'price' with product.price %}

{% comment %}
  Add that:
{% endcomment %}

{% if product.compare_at_price > product.price %}
  <small><s>{% include 'price' with product.compare_at_price %}</s></small>
{% endif %}

product-list-item.liquid

{% comment %}
  Right below this:
{% endcomment %}

{% include 'price' with product.price %}

{% comment %}
  Add that:
{% endcomment %}

{% if product.compare_at_price > product.price %}
  <small><s>{% include 'price' with product.compare_at_price %}</s></small>
{% endif %}

product.liquid

{% comment %}
  Right below this:
{% endcomment %}

var customPriceFormat = timber.formatMoney( Shopify.formatMoney(variant.price, "{{ shop.money_format }}") );

{% comment %}
  Add that:
{% endcomment %}

if ( variant.compare_at_price > variant.price ) {                                                 
  customPriceFormat += ' <small><s>' + timber.formatMoney( Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") ) + '</s></small>';                                          
}

search-result-grid.liquid

{% comment %}
  Right below this:
{% endcomment %}

{% include 'price' with item.price %}

{% comment %}
  Add that:
{% endcomment %}

{% if item.compare_at_price > item.price %}
  <small><s>{% include 'price' with item.compare_at_price %}</s></small>
{% endif %}

timber.scss.liquid

s {
  position: relative;
  text-decoration: none;
  color: lighten($colorTextBody, 15%);
  
  &:before {
    position: absolute;
    content: "";
    left: 50%;
    top: 0;
    bottom: -2px;
    border-left: 1px solid;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}