Sold out or Low Inventory Tag on Collection Page Like on NSYNC

by ONELIVE Webmaster May 2, 2018

When to use

Use this when you want to display a sticker badge on top of the collection products when it's either sold out or has low inventory. NOTE: It requires tags to be manually added.

liquid

product-loop.liquid

Open product-loop.liquid and inside the first div add the following code:

  {% assign attribute_keyword = 'sold-out' %}
  {% assign found = false %}
  {% for tag in product-loop.tags %}
      {% if tag contains attribute_keyword %}
        {% if found == false %}
            {% assign found = true %}
        {% endif %}
        <div class="sold-out">SOLD OUT</div>
      {% endif %}
  {% endfor %}   

  {% assign low-inventory-keyword = 'low-inventory' %}
  {% assign low-inventory-found = false %}
  {% for tag in product-loop.tags %}
      {% if tag contains low-inventory-keyword %}
        {% if low-inventory-found == false %}
            {% assign low-inventory-found = true %}
        {% endif %}
        <div class="low-inventory">Low Inventory</div>
      {% endif %}
  {% endfor %}

Styling

Then open custom.scss.liquid file and add the following code. Change the colors and positioning to match the theme.

    .sold-out {
        position: absolute;
        background: #eb1e25;
        padding: 15px;
        color: white;
        left: 16px;
        top: 1px;       
    }
    .low-inventory {
        background: #78a2d8;
        position: absolute;
        padding: 15px;
        right: 16px;
        top: 1px;
        color: white; 
    }