how to show inventory urgency badges in shopify liquid

reading inventory in liquid

{% assign variant = product.selected_or_first_available_variant %}
{% if variant.inventory_management == 'shopify' %}
  {% assign qty = variant.inventory_quantity %}
{% endif %}

Only access inventory quantity when inventory_management is set to shopify. If it's blank or null, the product doesn't track inventory.

the urgency badge

{% if qty > 0 and qty <= 5 %}
  <p class="urgency-badge">
    only {{ qty }} left — order soon
  </p>
{% elsif qty > 5 and qty <= 15 %}
  <p class="low-stock">low stock</p>
{% endif %}

adjusting thresholds

Set your thresholds based on your product velocity. Fast-moving products might use 10/25 instead of 5/15. You can expose these as theme settings via settings_schema.json so merchants can customise without editing code.

variant changes

If your product has variants, the badge needs to update when the customer changes variant selection. Use a small JavaScript listener on the variant selector change event to re-render the badge from the variant JSON exposed in the product page.

accessibility

Wrap urgency messages in role="status" and aria-live="polite" so screen readers announce changes when the variant switches. Never use colour alone to convey urgency.