Shopify: Add inventory quantities to variant product pages

I recently had a frustrated customer, as the product page in my store was not showing her how much stock was available and so a product had run out while she was in the process of considering her order.

I wanted to make it obvious on-screen when stock levels were low – this is great customer service, and can also be a powerful Call To Action to order quickly before you miss out.

However, I felt it was giving out too much information to show the exact quantities I had of everything. I don’t want people wondering whether I have large amounts of one product because it is less popular, or more popular, or I got a bulk deal, or it has a looming Use By date – especially when it is usually only that I felt like focussing sales in a different direction for a while.

I also wanted to make sure that no information was displayed for products whose inventory was not tracked by Shopify, as it makes no sense to show stock levels for made-on-demand items.

Anyway, it’s fairly easy to add code to your Shopify site to achieve this. I used the code from the Shopify docs which gave the basic functionality, and then modified it to make sure it only gave an actual stock amount when units were getting low, and also prevented it from displaying anything whenever a product’s inventory was not tracked by Shopify.

As with all code, the main thing to keep an eye on is your spelling and your brackets. A mistake with either will screw things up in completely non-sensical ways. It’s why programmers copy and paste whenever possible, and save between every change no matter how small!

First, find the place to edit HTML in your theme. This is usually Online Store->Themes->Customize theme->Theme options->Edit HTML/CSS

From there open theme.liquid, and find code (usually near the bottom) which says if (variant). This if (variant) section will end with a line that just has );
You need to paste the following code in just before that final line:

if (variant) {
if (variant.inventory_management == "shopify") {
if (variant.inventory_policy != "continue") {
if (variant.inventory_quantity > 0) {
jQuery('#variant-inventory').text('Hurry! Only ' + variant.inventory_quantity + ' remaining!');
} else {
jQuery('#variant-inventory').text("This product is sold out");
}
if (variant.inventory_quantity > 10) {
jQuery('#variant-inventory').text('More than 10 available.');
}
} else {
jQuery('#variant-inventory').text("Available");
}
}
} else {
jQuery('#variant-inventory').text("");
}

Then open product.liquid. Wherever you want the stock level to appear you need to paste in the following:
<span id="variant-inventory"></span>

Now you will want to modify the text so that it suits your use case. Mine is set so that if there is more than ten units it just generically reports that there is more than ten, rather than giving the actual figure. You can change this number in the line “(variant.inventory_quantity > 10) “.
You should also customise the various display texts so that they suit the tone of your store.