Knowledge Base

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.

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