Show inventory quantities on product pages

Caution

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.

Caution

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.

Tip

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:

  2. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

  4. 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 %}
    </div>
    
    

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 {
    jQuery('#variant-inventory').text("");
}

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

View the demo: http://shopify-tutorials.myshopify.com/products/chair

Want to discuss this page?

Visit the Shopify Community