How to add inventory quantities to the product page

This tutorial is going to show you how to add the inventory quantity to your product pages.

A few things to note:

  • Your store must be using jQuery
  • If you have multiple variants, this relies on having the OptionSelector javascript installed
  • This will only work for variants that have their Inventory Policy set to 'Shopify Tracks this variant's inventory'
  • This is incompatible with the "Clearflex" theme

1. We are going to add a container to the product page. It will display the quantity for the first variant.

In product.liquid - place this code where you would like the quantity displayed:

<div id="variant-inventory">
{% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 0 %}
We currently have {{ product.variants.first.inventory_quantity }} in stock.
{% endif %}
</div>

2. Look for the selectCallback function:

If you are using multiple product variants, we'll need to check the inventory for that product, and update quantity accordingly.

Most Shopify themes will already have the selectCallback function. It is usually located towards the bottom of the theme.liquid file, or at the bottom of the product.liquid file. Look for this piece of code: 

var selectCallback = function(variant, selector) {

If your theme doesn’t have this, you will need to follow the OptionSelector tutorial first.

If you are using the New Standard theme - it will be located in product.liquid file.

Add the following code:

if (variant) {        
  if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
    if (variant.inventory_quantity > 0) {
      jQuery('#variant-inventory').text('We have ' + variant.inventory_quantity + ' in stock.');
    } else {
      jQuery('#variant-inventory').text("This product is sold out");
    }
  } else {
    jQuery('#variant-inventory').text("This product is available");
  }
} else {
    jQuery('#variant-inventory').text("");
}

That’s it! Your variant quantities should now be displayed nicely on your product pages.

Back to Tutorials