The fluctuation of product inventory levels in all Shopify stores is inevitable. As visitors make purchases, products or product lines are withdrawn from sale. And at a core level, Shopify stays on top of these ever-changing inventory levels by making adjustments for its merchants, and automatically preventing users from purchasing products that are out of stock. 

But depending on your exact Shopify theme and use case, your storefront might benefit from more specific code that could make your site even more intelligent and inventory aware. Lucky for you, we’re on the case! Keep reading for our tips on how to use quantity checks to make your Shopify product pages inventory more aware. 

Troubleshooting Low Inventory Levels

Let’s talk about low inventory levels using an example scenario. Imagine that a customer is looking to purchase 5 - 10 coffee mugs in a Shopify store. They find the mug that they want to purchase, and because the product exists in inventory in some capacity, the customer sees an active ‘add to cart’ button. As far as they’re concerned, the stock levels of the mug appear healthy. And why would they think otherwise?

Well, what our example customer doesn’t know, is that the mug that they want actually has a low available inventory level, and there are only 3 mugs left. So what happens when they try to add the desired 5 - 10 mugs to their cart, exceeding the available inventory? The Shopify theme will make an attempt to do so, and the Shopify API will return an error. It’s typically a code 422 error with a message that looks something like this:

You can't add more [product name] to the cart.

While this error message technically works, and successfully stops the customer from purchasing inventory that doesn’t exist, it’s not the most eloquently worded warning, and can feel ambiguous to a non-technical user. 

It’s also not a targeted or informative message. In our example, the customer was adding these products to their cart for the first time, so they weren’t adding more as the error suggests. In addition, the error message doesn’t explain why the user can’t add these products. It doesn’t explicitly state that the purchase can’t be completed because the requested quantity exceeds the available inventory level.

So what can we do to improve the usability here? First, as the saying goes: prevention is better than cure. Rather than letting the customer be blind to the fact that the quantity they want is not in stock, it’s better usability to display the inventory level on the page when it’s low. This way, the user knows right away how many units are available and there are no surprises if they try to exceed that.

We can do this by utilizing the variant.inventory_quantity property on the product page. 

Here’s how we would display a warning on the page, so that if the inventory quantity of the product drops below 10, the user is advised of the available quantity left:

{% if variant.inventory_quantity > 0 and variant.inventory_quantity < 10 %}
<div class=”warning”>Only {{ variant.inventory_quantity }} left in stock</div>
{% endif %}

With this code, we ensure that the message only displays when there is also an inventory quantity greater than zero. (Otherwise the product would be out of stock, rendering the ‘low inventory’ warning unnecessary.)

Improving Generic Shopify Error Text

While the above message is a great addition to a product page, it does come with a limitation: it only reflects the inventory quantity at the time the page loads. 

So what happens if your store experiences a large volume of sales in a short period of time, for example: a busy spell like Black Friday where customers are buying in large quantities? In an instance like this, you might have a product with an inventory quantity of 7 when a user loads the page, but in the few minutes it took them to read about the product before adding it to their cart, 7 other users ordered the product, rendering it out of stock. 

Unfortunately, in a case like this, the user would be unable to add the desired product to their cart, and by default they would see the generic Shopify error text we talked about above. While there’s no way to prevent this scenario from happening, we can at least improve the wording of the error message so that it’s clear to the user what went wrong. Here’s our fix:

$.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: $('form').serialize(),
    dataType: 'json', 
    success: function (data) { 
        // Display success message
    },
    error: function (jqXHR, textStatus, errorThrown) { 
        if (jqXHR.status === 422) {
            alert('Sorry, that product is out of stock. Check back again soon to see if it is available.');
        }
    }
});

With this edit, if the user tries to add the out of stock product, they get a much more user-friendly error message that clearly states why they can no longer add the product to their cart. For all future users that visit this out of stock product’s page, when the page loads the ‘add to cart’ button will automatically be disabled and display whichever ‘out of stock’ state your theme uses. 

Conclusion

Inventory levels in Shopify stores fluctuate, and that’s a good thing - it means your business is moving in the right direction! But don’t underestimate the power of well constructed, user-friendly error messaging. It can be the difference between a customer saving a purchase for a later date, or throwing in the towel altogether. Take the time to create messaging that informs users, and makes them feel empowered when shopping in your store!