Show Inventory Quantity on Product Pages

There are several ways of showing inventory quantity levels on the newer Dawn Shopify Theme and other modern themes built for Shopify Online Store 2.0 (OS 2.0).

This is the simplest way of showing products’ stock level that doesn’t involve much coding or external applications.

Example Of Final Result

We chose to show inventory level when it is less than 10 and show a static message when it’s greater. However, you can change that accordingly to your preferences.

Here is an example of the final result

Product with an inventory level of 7.

Product with an inventory level of more than 10.

 

Procedure

 

1. SELECT AND CUSTOMISE THEME

The first step is to select the theme and click on customise. We always recommend to Duplicate your theme prior to making any changes.

2. SELECT PRODUCT TEMPLATE

Once inside the Theme customizer, from the top-centre menu select products and choose the desired template, in this case, we are editing the Default product template.

 

3. ADD CUSTOM LIQUID BLOCK

In the left-side menu, inside the Product Information section, select Add Block and choose Custom liquid.

 

Grab the Custom liquid block and move it above the Buy buttons block, or wherever you desire to show the inventory quantity message.

 

4. COPY AND PASTE LIQUID CODE

Open the Custom liquid block and paste the following code:

 

5. SAVE

Don’t forget to Save.

5. RESULT

If the product is in stock, a message will show, telling customers how many items are in stock for the selected variant*.

If the stock is more than 10, a “We have more than 10 in stock” message will show but you can change that accordingly to your preference.

Example of a product with an inventory level of 7.

Example of a product with an inventory level of more than 10.

 

Please note that whatever you put in the ‘Custom Liquid’ block will only render once, when the page is first loaded. That means that the value displayed won’t change when selecting a different variant.

Follow the steps below to show the inventory quantity based on the variant selected.

 

6. UPDATING AND SHOWING INVENTORY LEVELS WHEN CHANGING VARIANT

In order for the stock inventory quantity to update when selecting a different variant, we’ll have to customise the code of the theme and add some custom Javascript.

If you feel comfortable enough in editing your theme code keep reading to see how to do it, alternatively contact us and we’ll be happy to assist you.

 

PROCEDURE

We always recommend duplicating your Shopify theme before making important customisations or changing the code.

1. Open code editor:

 

2. Open file theme.liquid and before the closing </head> tag paste the following code:

 

3. Open main-product.liquid and at the bottom of the page, before the opening {% schema %} tag, paste the following code:

 

4. Open the global.js file and search for the toggleAddButton function and replace it with this code

 

---

 

Having troubles? contact us