Add an inventory table to product pages

Note

You can add an inventory table to the product pages on your website by editing your theme.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click on the Snippets folder, then click on Add a new snippet. Name the snippet inventory-table, then click Create snippet.

    Add new snippet
  4. Paste the code from this gist into the online code editor, then click Save.

  5. Click on product.liquid in the Templates list, and copy+paste the following at the point in the file where you would like the inventory table to be displayed:


{% include 'inventory-table' %}

  1. Click Save and the inventory table will now appear on each of your product pages. You can view one of your products on your website to make sure you’re happy with the placement of the table.

Note

If you are not using Shopify to track a product’s inventory, the quantity available for that product is shown as 1 in the inventory table.

  1. To ensure that the inventory table has the same style as the rest of the page, you might need to edit the stylesheet. From the Edit HTML/CSS page for your theme, click on the Assets folder, then click on the CSS file (look for .css or in the filename) to open it. If more than one CSS file is listed, start by trying the file whose name seems the most generally-applicable to your theme.

  2. Type the following code at the bottom of your CSS 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; }
    
  3. Click Save.

Want to discuss this page?

Visit the Shopify Community