How to output an inventory table on the product page

This tutorial is going to provide the code needed to output an inventory table for 1 or 2 product options. If you are using 3 options, it will use the first 2.

This tutorial assumes you are tracking your product inventory, if not the inventory will appear as “1”.

1. In your template editor, create a new snippet called inventory-table and paste the code from this gist: https://gist.github.com/kyleaparker/7356064

2. In product.liquid paste the below code where you would like the inventory table displayed:

{% include 'inventory-table' %}

That’s it! The table should now be showing up on each of your product pages.

3. OPTIONAL CSS:

If you would like the table to look the same as in the demo, add the following to your stylesheet: 

#inventory { padding: 20px 0; }
#inventory table { width: 100%; }
#inventory table th { background: #f6f6f6; }
#inventory table th, #inventory table td { padding: 5px; border-top: 1px solid #EEE; text-align: left; }

4. ADVANCED: CREATE A MULTI VARIANT ORDER