Story theme - Add inventory to your product page

If you're managing inventory with Shopify, here's a tutorial on how to add inventory messaging on your Story product pages. 

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:

At the very bottom of the file, add the following code:

Click to view code - Snippet 1 of 2

Example:

Save the file:

3

Edit the Javascript file in Story - 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:

updateAddToCartState

Your search will find two instances, we need to work with the second section of code:

Verify below is this line:

var variant = evt.variant;

After that line "var variant = evt.variant;" - Add add a couple blank lines and then paste the following code below:

Click to view code - Snippet 2 of 2

Example:

Important - Be sure you've added after the var variant line and before the if (variant) line as shown above. 

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. 

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 Story version 1.1