Sale Sticker

You’ll need to add the following to your product-template.liquid

This code will go inside the div tag with the class=”product-single__photo-wrapper” before the tag is closed so it shows up on top of the product image.

<!-- If the product is sold out show a sticker saying Sold Out!-->
{% if product.available == false %}
  <div class="sticker__sold-out">
    <p style="font-weight:bold; padding:12.5px 0;">{{ 'products.product.sold_out_html' | t }}</p>
  </div>
<!-- Else if the product is on special show amount saved-->
{% elsif product.compare_at_price_max > product.price and product.price != 0 and product.available != false %}
  <div class="sticker__on-sale">         
    <p style="font-weight:bold; padding:12.5px 0;">Save<br/>{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%</p>
  </div>
<!-- Else if the product is $0 show a sticker saying Free!-->
{%elsif product.price == 0 %}
  <div class="sticker__on-sale">
    <p style="font-weight:bold; padding:22.5px 0;">FREE!</p>
  </div>
{% endif %}

You’ll also need to add this to your custom.css or custom.scss.liquid file

.sticker__sold-out, .sticker__on-sale {
  position: absolute;
  background: crimson;
  border: 1px solid crimson;
  width: 70px;
  height: 70px;
  border-radius: 35px;
  top: -15px;
  left: -15px;
}
.sticker__sold-out p, .sticker__on-sale p {
  font-family: "Montserrat", "HelveticaNeue", "Helvetica Neue", sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  font-weight: bold;
  text-transform: uppercase;
  color: #FFF;
}