Sold out or Low Inventory Tag on Collection Page Like on NSYNC
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;
}