Adding Stock Badges to Product Cards - Stockful

This guide walks through adding stock status indicators to your product cards on collection pages. This uses product-level metafields (aggregated across all variants) since collection pages show products, not individual variants.

Basic stock status badge

Add this to your product card snippet (typically snippets/card-product.liquid or similar):

{% assign status = product.metafields.app--326028230657--stockful.stock_status.value %}

{% if status == "low_stock" or status == "out_of_stock" %}
  <div style="
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.6em;
    font-size: 0.8em;
    border-radius: 999px;
    {% if status == 'low_stock' %}
      background: #fff7ed;
      color: #ea580c;
    {% else %}
      background: #fef2f2;
      color: #dc2626;
    {% endif %}
  ">
    <span style="
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
    "></span>
    {% if status == "low_stock" %}Low Stock{% else %}Out of Stock{% endif %}
  </div>
{% endif %}

This only shows a badge for low stock and out of stock - in-stock products don’t need a badge since that’s the normal state. Combine stock status with sales data to create urgency:

{% assign status = product.metafields.app--326028230657--stockful.stock_status.value %}
{% assign trend = product.metafields.app--326028230657--stockful.velocity_trend.value %}
{% assign sold = product.metafields.app--326028230657--stockful.total_sold_30d.value %}

{% if trend == "selling_fast" %}
  <div class="product-badge product-badge--trending">
    Selling Fast{% if sold and sold > 20 %} &middot; {{ sold }}+ sold{% endif %}
  </div>
{% elsif status == "low_stock" %}
  <div class="product-badge product-badge--low">
    Low Stock
  </div>
{% elsif status == "out_of_stock" %}
  <div class="product-badge product-badge--oos">
    Out of Stock
  </div>
{% endif %}

.product-badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 0.8em;
  border-radius: 4px;
  font-weight: 500;
}
.product-badge--trending { background: #f3e8ff; color: #7c3aed; }
.product-badge--low { background: #fff7ed; color: #ea580c; }
.product-badge--oos { background: #fef2f2; color: #dc2626; }

Overlay badge on product image

Position the badge as an overlay on the product card image:

<div style="position: relative;">
  {{ product.featured_image | image_url: width: 400 | image_tag }}

  {% assign status = product.metafields.app--326028230657--stockful.stock_status.value %}
  {% assign trend = product.metafields.app--326028230657--stockful.velocity_trend.value %}

  {% if trend == "selling_fast" %}
    <div class="card-overlay-badge" style="background: #7c3aed; color: #fff;">
      Selling Fast
    </div>
  {% elsif status == "low_stock" %}
    <div class="card-overlay-badge" style="background: #ea580c; color: #fff;">
      Low Stock
    </div>
  {% elsif status == "out_of_stock" %}
    <div class="card-overlay-badge" style="background: #dc2626; color: #fff;">
      Out of Stock
    </div>
  {% endif %}
</div>

.card-overlay-badge {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  padding: 0.2em 0.6em;
  font-size: 0.75em;
  font-weight: 600;
  border-radius: 4px;
  line-height: 1.4;
}

Variant count warning

Show how many variants are running low:

{% assign low_count = product.metafields.app--326028230657--stockful.low_stock_variant_count.value %}

{% if low_count and low_count > 0 %}
  <p style="font-size: 0.85em; color: #ea580c;">
    {{ low_count }} {{ low_count | pluralize: 'size', 'sizes' }} running low
  </p>
{% endif %}

Tips

Product-level for collection pages - use product.metafields for aggregated data across all variants
Variant-level for PDP - use product.selected_or_first_available_variant.metafields for specific variant data
Only show what matters - customers don’t need to see “In Stock” badges. Save badge real estate for actionable states: low stock, out of stock, and selling fast
Combine data points - pairing “Low Stock” with “X sold recently” creates more urgency than either alone