Website Building » Shopify » How Do I Show Low Stock on Shopify?

How Do I Show Low Stock on Shopify?

Last updated on January 8, 2023 @ 6:44 am

If you’re running a Shopify store, you may have noticed that the default “low stock” notification is pretty basic. It simply says “Low stock” in the product description, without giving any indication of how many units are left. This can be confusing for customers, and it doesn’t give them a sense of urgency to buy the product before it runs out.

In this article, we’ll show you how to add a more specific low stock notification to your Shopify store. We’ll also give you some tips on how to style your notification so it stands out and grabs attention.

Here’s what we’ll cover:

How to add a low stock notification in Shopify
1. Go to your Shopify admin panel
2. In the left-hand sidebar, navigate to Online Store > Themes.
3. Find the theme you’re currently using, and then click Actions > Edit code.
4. In the Layout section, click on theme.liquid.
5. Find the <head>-</head> section of code, and add the following code snippet just below it:

<!-- Low Stock Notification -->
<script type="text/javascript">
  var lowStockThreshold = 2;

  $('.product-single__meta').each(function() {   

// Loop through each product on the page

    var stockCount = Number($(this).find('.product-single__stock span').html());  // Get the current stock level

    if (stockCount <= lowStockThreshold) {   // If stock is low (<= 2 units)

    }
});  
</script>

<!-- End Low Stock Notification -->
// Script courtesy of https://gist.github.com/kiranveerassamy/9fdbbdddca4787fdd1b8df4117d1caa4 -->

      $(this).prepend('<div class="product-single__stock product-single__stock--low" style="background-color: #FFC107; border-radius: 5px; padding: 5px 10px; font-weight: bold;">LOW STOCK

6. Save your changes.

That’s it! Now when you view your store, you should see a “low stock” notification next to any products that have fewer than 2 units in stock. You can customize the threshold (2 units in this example) to whatever you like. For example, you could set it to 1 unit if you only want to be notified when a product is about to run out of stock completely.

Or you could set it to 5 units if you want to be notified when your inventory starts getting low.

PRO TIP: If you are thinking about using Shopify to show low stock on your website, beware! There are a few things you should know before using this feature. First, it is important to remember that Shopify is a hosted platform. This means that your website will be hosted on Shopify’s servers and they will have full control over your website. This also means that if Shopify decides to shut down your website, you will lose all of your data and your website will no longer be available.

Second, when you use Shopify to show low stock on your website, you are giving up a lot of control over how your website looks and functions. Shopify will be in charge of deciding how your low stock warning appears on your website and they may also change the way your website looks and operates in other ways.

Third, using Shopify to show low stock on your website can be expensive. Shopify charges a monthly fee for their service and they also take a percentage of each sale that is made through your website. If you are not making many sales, this can end up being quite expensive.

Fourth, if you decide to use Shopify to show low stock on your website, be sure to read their terms of service carefully. There

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.