Using Section Blocks for Inventory Listing


A while ago the Founders of Goverre: a modern re-sealable to-go cup used for wine reached out to me to help them design a landing page where their sales reps could easily see what products they had in stock.

Goverre Inventory Section Listing Block

They wanted something that was easily editable from the Shopify admin to show product pictures, select and show product availability, and indicate the title/UPC value. In addition, they wanted it to be password protected.

Turns out Shopify has an excellent tool with their new sections called โ€œsection blocksโ€. Using section blocks, you can easily loop a set attributes and different offers set using the schema.

Creating a new Section

Using Shopifyโ€™s liquid editor, I first created a section called inventory-listing.liquid (or whatever you want to call it). The template and CSS grids are handled with the free Boundless theme designed and developed by Shopify. And the page is protected by the app Locksmith. Which turned out to accomplish the job quite well.

Elements I added to edit are title, sub title, product title, product image, and availability.

Define html and schema elements within html.

Hereโ€™s the markup for html:

Create the schema settings

Once your html is set you can build out your schema which will be the settings in the admin where the user types in data, picks the image and sets product availability. See below:

Read more about Shopify sections for a full explanation!