Your safety is important to us. If you notice any suspicious emails that appear to come from Shopify, please forward them to Visit the Help Center page on phishing for more information.

Show inventory quantities on product pages


This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.


This document has not been verified to work with sectioned themes. We are currently reviewing our documentation and will update them soon. You can try to implement this on your theme, but keep in mind that it may not function.


The solution presented here won't work in the following themes: Venture, Clearflex, and Boundless.

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

  • 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'

There are two important steps to achieve this.

  1. Add a container to the product page - it will display the quantity for the first variant. Here's how:

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. Left click to open the 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 %}

4 . 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 - click here.

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

Product page inventories 1

Add the following code below it:

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 {

Your variant quantities should now be displayed nicely on your product pages.

View the demo:

Want to discuss this page?

Visit the Shopify Community