How to Show a Blinking Low Stock Indicator on Your Shopify Product Page (Horizon Theme)

Want to alert customers when a product is running low in stock? In this tutorial, we’ll show you how to create a simple Shopify snippet that displays a blinking red or green indicator depending on product availability.

What You’ll Build

You’ll create a blinking inventory indicator:

• 🔴 Red dot blinks when stock is less than or equal to 5.
• 🟢 Green dot blinks when stock is more than 5.
• Displays the current quantity for the selected product variant.

Step 1: Create the Inventory Snippet

In your Shopify Admin:

1. Go to Online Store > Themes
2. Click Actions > Edit Code
3. In the Snippets folder, click Add a new snippet
4. Name it: inventory-status

Paste the following code inside inventory-status.liquid:

{% assign stock_qty = product.selected_or_first_available_variant.inventory_quantity %}

<style>
  .stock-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
  }

  .blinker {
    animation: blinker 1s linear infinite;
    width: 14px;
    height: 14px;
    border-radius: 50%;
  }

  .green {
    background-color: #28a745;
  }

  .red {
    background-color: #dc3545;
  }

  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }
</style>

<div class="stock-indicator">
  {% if stock_qty <= 5 %}
    <span class="blinker red"></span>
    <span>Only {{ stock_qty }} left in stock!</span>
  {% else %}
    <span class="blinker green"></span>
    <span>In Stock ({{ stock_qty }} available)</span>
  {% endif %}
</div>

Step 2: Include the Snippet in Your Product Page

Still in the theme code editor:

1. Open main-product.liquid or the file where your product details render (in Dawn / Horizon , go to main-product.liquid)
2. Paste this where you want the stock message to appear (typically just below the price):

{% render 'inventory-status' %}

Optional Improvements

• Replace the dots with SVG icons for better visuals.
• Add a screen reader-friendly label for accessibility.
• Extend functionality to show “Sold Out” if inventory is 0.

Result

Now, when a customer views a product:

• If only 3 are left → they’ll see a blinking red dot with a warning.
• If 20 are available → they’ll see a blinking green dot confirming stock.

Here’s what it looks like:

🔴 Only 3 left in stock!
🟢 In Stock (20 available)

Conclusion

Creating small visual cues like this can boost urgency and increase conversions. Plus, it’s a lightweight improvement that doesn’t need any apps!

Let us know in the comments if you want a version with SVG icons or animations – we’ll be happy to help.