As an eCommerce store owner, creating a sense of urgency can boost conversions and reduce cart abandonment. One of the best ways to do this is by displaying inventory quantity with attractive animations that grab attention.
In this guide, I’ll show you:
✅ Why you need an inventory counter
🔥 Key features of an animated stock display
📹 Video tutorial for easy setup
🎁 FREE code snippet (copy & paste!)
💡 Why Add an Animated Inventory Counter?
1. Creates Urgency & FOMO (Fear of Missing Out)
When customers see “Only 3 left in stock!” with a shaking animation, they’re more likely to buy immediately.
2. Reduces Cart Abandonment
A real-time stock counter prevents frustration when products sell out at checkout.
3. Builds Trust with Transparency
Showing stock levels makes your store more trustworthy—customers appreciate honesty.
4. Boosts Conversions by 5-15%
Many stores report higher sales after adding stock counters (especially for limited-edition items).
🔥 Key Features of This Animated Inventory Display
✔ Dynamic Animations
- Jumping effect when stock ≤ 10
- Shaking effect when stock ≤ 5
- Fire emoji (🔥) for super-low stock
✔ Color-Coded Urgency
- Green (Plenty in stock) → Orange (Low stock) → Red (Almost gone!)
✔ Progress Bar
Visually shows how much stock remains (great for flash sales).
✔ Works with Variants
Automatically updates when customers select different product options.
✔ Mobile-Friendly
Looks great on all devices (no coding skills needed).
🎁 FREE Code Snippet (Copy & Paste!)
<div class="inventory-counter-wrapper">
{% if product.variants.first.inventory_management == 'shopify' %}
{% assign inventory_qty = product.variants.first.inventory_quantity %}
{% if inventory_qty > 0 %}
<div class="inventory-counter
{% if inventory_qty <= 5 %}animate-shake{% endif %}
{% if inventory_qty <= 10 %}animate-jump{% endif %}">
<div class="inventory-counter__icon">
<svg viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"/>
</svg>
</div>
<div class="inventory-counter__content">
<span class="inventory-counter__label">HURRY!</span>
<span class="inventory-counter__quantity">{{ inventory_qty }}</span>
<span class="inventory-counter__label">LEFT IN STOCK</span>
</div>
<div class="inventory-counter__progress">
<div class="inventory-counter__progress-bar"
style="--inventory-percentage: {{ inventory_qty | divided_by: 100.0 | at_least: 0.05 | at_most: 1.0 }}">
</div>
</div>
{% if inventory_qty <= 5 %}
<div class="inventory-counter__fire">🔥</div>
{% endif %}
</div>
{% else %}
<div class="inventory-counter inventory-counter--out-of-stock">
<div class="inventory-counter__icon">
<svg viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/>
</svg>
</div>
<div class="inventory-counter__content">
<span class="inventory-counter__label">OUT OF STOCK</span>
</div>
<div class="inventory-counter__progress">
<div class="inventory-counter__progress-bar"></div>
</div>
</div>
{% endif %}
{% endif %}
</div>
<style>
/* Inventory Counter Base Styles */
.inventory-counter-wrapper {
margin: 20px 0;
}
.inventory-counter {
position: relative;
padding: 15px;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border-left: 4px solid #4CAF50;
overflow: hidden;
transition: all 0.3s ease;
animation: fadeIn 0.5s ease-out;
}
.inventory-counter--out-of-stock {
border-left-color: #F44336;
background: #FFF5F5;
}
.inventory-counter__icon {
position: absolute;
top: 15px;
left: 15px;
color: #4CAF50;
}
.inventory-counter--out-of-stock .inventory-counter__icon {
color: #F44336;
}
.inventory-counter__content {
padding-left: 30px;
}
.inventory-counter__label {
font-size: 14px;
color: #555;
font-weight: 600;
}
.inventory-counter--out-of-stock .inventory-counter__label {
color: #F44336;
font-weight: 700;
}
.inventory-counter__quantity {
font-size: 24px;
font-weight: 700;
color: #2E7D32;
margin: 0 5px;
display: inline-block;
position: relative;
}
.inventory-counter__progress {
height: 4px;
background: #E0E0E0;
border-radius: 2px;
margin-top: 10px;
overflow: hidden;
}
.inventory-counter__progress-bar {
height: 100%;
background: linear-gradient(90deg, #4CAF50, #8BC34A);
border-radius: 2px;
width: calc(var(--inventory-percentage) * 100%);
transition: width 0.5s ease-out;
}
.inventory-counter--out-of-stock .inventory-counter__progress-bar {
background: #F44336;
width: 100%;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Shaking animation for very low stock (≤5) */
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
20%, 40%, 60%, 80% { transform: translateX(3px); }
}
.animate-shake {
animation: shake 0.8s infinite;
border-left-color: #FF5722;
background: #FFF3E0;
}
/* Jumping animation for low stock (≤10) */
@keyframes jump {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.animate-jump {
animation: jump 1.5s infinite;
}
/* Fire emoji animation */
.inventory-counter__fire {
position: absolute;
top: 5px;
right: 16px;
font-size: 24px;
animation: fire 0.5s infinite alternate;
}
@keyframes fire {
from { transform: scale(1); opacity: 0.8; }
to { transform: scale(1.2); opacity: 1; }
}
/* Urgent styling */
.animate-shake .inventory-counter__quantity {
color: #FF5722;
font-weight: 900;
text-shadow: 0 0 5px rgba(255, 87, 34, 0.3);
animation: pulse 0.8s infinite;
}
.animate-jump .inventory-counter__quantity {
animation: pulse 1.2s infinite;
}
.animate-shake .inventory-counter__label {
color: #E65100;
}
.animate-jump .inventory-counter__label {
color: #FF9800;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Variant change handler
function handleVariantChange(variant) {
const inventoryCounter = document.querySelector('.inventory-counter');
const wrapper = document.querySelector('.inventory-counter-wrapper');
if (!variant || !inventoryCounter || !wrapper) return;
if (variant.inventory_management === 'shopify') {
if (variant.inventory_quantity > 0) {
let quantity = variant.inventory_quantity;
let newHTML = `
<div class="inventory-counter__icon">
<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"/></svg>
</div>
<div class="inventory-counter__content">
<span class="inventory-counter__label">${quantity <= 10 ? 'HURRY!' : 'Only'}</span>
<span class="inventory-counter__quantity">${quantity}</span>
<span class="inventory-counter__label">${quantity <= 10 ? 'LEFT IN STOCK' : 'left in stock'}</span>
</div>
<div class="inventory-counter__progress">
<div class="inventory-counter__progress-bar"
style="--inventory-percentage: ${Math.max(0.05, Math.min(1, quantity / 100))}">
</div>
</div>
${quantity <= 5 ? '<div class="inventory-counter__fire">🔥</div>' : ''}
`;
inventoryCounter.innerHTML = newHTML;
inventoryCounter.className = 'inventory-counter';
if (quantity <= 50) {
inventoryCounter.classList.add('animate-shake');
} else if (quantity <= 50) {
inventoryCounter.classList.add('animate-jump');
}
inventoryCounter.style.borderLeftColor = quantity <= 5 ? '#FF5722' : quantity <= 10 ? '#FF9800' : '#4CAF50';
} else {
inventoryCounter.innerHTML = `
<div class="inventory-counter__icon">
<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/></svg>
</div>
<div class="inventory-counter__content">
<span class="inventory-counter__label">OUT OF STOCK</span>
</div>
<div class="inventory-counter__progress">
<div class="inventory-counter__progress-bar"></div>
</div>
`;
inventoryCounter.className = 'inventory-counter inventory-counter--out-of-stock';
}
}
}
// Initialize variant change listeners
if (typeof VariantSelectors !== 'undefined') {
new VariantSelectors({
product: {{ product | json }},
onVariantChange: handleVariantChange
});
} else if (document.querySelector('[name="id"]')) {
document.querySelectorAll('[name="id"]').forEach(radio => {
radio.addEventListener('change', function() {
const variantId = this.value;
const variantData = JSON.parse(document.querySelector(`[data-variant-json='${variantId}']`).textContent);
handleVariantChange(variantData);
});
});
}
});
</script>📹 Video Tutorial (Step-by-Step Setup)
▶️ Watch the 5-Minute Installation Guide (Coming Soon!)
🔹 How to paste the code in Shopify
🔹 Customizing colors & animations
🔹 Testing with different stock levels
🚀 Final Thoughts
Adding an animated inventory counter is a simple but powerful way to increase conversions on your Shopify store. The best part? It’s FREE and takes less than 5 minutes to set up!
👉 Try it today and watch your sales grow!
Did this help you?
👍 Like & Share if you found this useful!
💬 Comment if you have questions!
#ShopifyTips #Ecommerce #ConversionBoost #ShopifyHacks