Tutorial: Add inventory information on your product page

If you're managing inventory with Shopify, here's a method to add some inventory information into your product page. 

Example result when inventory is running low - Less than 10 items available:

Example when inventory is high - More than 10 items available (does not show actual numbers):

Example with item is out of stock:

If you allow to sell a product when out of stock:

Example of an out of stock product with Add to Cart button still active:

If an item is not managed by Shopify's Inventory, no message will appear:

Example non-tracked product:

How to:

1

Make a duplicate of your theme

This is important as we are going to replace some key parts of your theme. You'll need the duplicate if there is any issue with the code changes or if you'd like to go back to the original format of the theme.

Draft themes: If you're make this code modification to a draft theme, then duplicate that version. Use Actions link associated to the theme you're duplicating:

2

Edit product-form.liquid file

Return to the theme you're going to make the code modification to. This can be your live theme or if you're making the modification to a draft theme, return to that theme. Just make sure it's different from the duplicate we just made as that will be saved as a backup.

Edit code - Example from live theme:

From the Snippets folder, open product-form.liquid:

Note: If you are running an older version of Pipeline, you won't have this file. We recommend you update to the latest version of Pipeline. 

At the very top of the file, add a couple blank lines.

Next, add the following code (click link to view code) to the top of the file:

Click to view code - Snippet 1 of 2

Example:

Save the file:

3

Edit the Javascript file in Pipeline - theme.js

From the Assets folder, open theme.js:

4

Find the correct line

Find the following line. In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

Select a valid variant if available

Locate this line and then right above it, add a couple blank links:

Example after adding a couple black lines:

Next, add the following code in the blank space - Be sure it's  above the "// Select a valid variant if available" line:

Click to view code - Snippet 2 of 2

Example:

Double-check you've added the code in the right position as shown. Must be after the "if (variant) {" line and before the "// Select a valid variant if available" line.

Save the file:

That's it! 

Notes

The code will display inventory numbers if the inventory is below 10. If you'd like that number to be a lower value or higher, modify there in the Javascript code from Snippet 2:

Change to 6 if you want inventory value to be shown only when 5 or less is available or change to 20 if you want to show value if 19 or less. 

If you'd to position the inventory message lower down on the page instead of of the top below the product title - You can place the code in Step 2 at the very bottom of product-form.liquid rather than the top (be sure it's at the bottom after any of the original theme code).  That will place the message after the Buy buttons and above the social share icons. It is not possible to place between. 

Example:

Example result:

Troubleshooting

If you find any issues with this customization, use your duplicate you made in Step 1 to return to your original state - Be sure you make that duplicate before starting this tutorial. Then make another duplicate and start again. This tutorial and screenshots is based off Pipeline version 4.5.1