Adding on sale, preorder, sold out, and coming soon to your product page

collection.liquid

...
    <li class="product" id="products_{{product.id}}">
      <a href="{{product.url}}">
        <span class="{{ product.css_class }}">
          {% if product.on_sale %}
            <img src="/themes/default/images/label-onsale.png" width="98" height="98" alt="On Sale" />
          {% endif %}
          {% if product.preorder %}
            <img src="/themes/default/images/label-preorder.png" width="98" height="98" alt="Pre-Order" />
          {% endif %}
          {% if product.coming_soon %}
            <img src="/themes/default/images/label-comingsoon.png" width="98" height="98" alt="Coming Soon" />
          {% endif %}
          {% if product.sold_out %}
            <img src="/themes/default/images/label-soldout.png" width="98" height="98" alt="Sold Out" />
          {% endif %}
        </span>
        <img src="{{ product.image.medium_url }}" alt="{{product.name | h}}" class="product-photo" />
        <span class="product_price">
          {{ product.price | money_with_sign }}
        </span>
        <span class="product_name">{{ product.name }}</span>
      </a>
    </li>
...

product.liquid

...
<div id="product_info">
  <div class="{{ product.css_class }}">
    {% if product.on_sale %}<div class="sale">On Sale</div>{% endif %}
    {% if product.preorder %}<div class="preorder">Pre-Order</div>{% endif %}
    {% if product.coming_soon %}<div class="soon">Coming Soon</div>{% endif %}
    {% if product.sold_out %}<div class="soldout">Sold Out</div>{% endif %}
  </div>
  <p id="price">{{ product.price | money_with_sign }}</p>
  <div id="add_notice" style="display:none;"></div>
....