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