Shopify in store stock checker
Update: Shopify now adds a pretty similar functionality if you have Local Pickup enabled as a shipping method on your store and locations.
Theme dev guide | Store setup info
Shopify supports multiple locations to store inventory and fulfill orders from. Great for a business with more than one store, or perhaps an online warehouse and showroom store.
You might want to offer your customers the ability to check the stock of a product in each of your stores on your website. So on a product page they can see if the product will be available at the store nearest them, without needing to call or email ahead.
Whilst this isn’t something available within the Liquid templating language, you can make use of the GraphQL API to fetch this info and present it to the customer.
Rather than calling the API directly and as a result putting your API keys in the open. Instead I’d opt for the idea of wrapping up the call to the API in a NodeJS script hosted on Amazon’s Lambda platform, then exposing it via their API gateway. This also means we can tailor the output so that it has a nice small payload for the customer’s browser.
The GraphQL query
The main bit of data we need to get stock levels is the Variant ID, which will be available from the product object.
Then we look at the inventoryLevels for that variant which will tell us if the variant is available. We also get the location and it’s name along with isActive and shipsInventory as some people might find them useful.
The “3” in the inventoryLevels argument is a slight magic number, in our use case because we have three locations.
{
productVariant(id: "gid://shopify/ProductVariant/1234567890") {
inventoryItem {
locationsCount
inventoryLevels(first: 3) {
edges {
node {
available
location {
name
isActive
shipsInventory
}
}
}
}
}
}
}The API
So we have a simple Node JS script (code available in the Repo linked at the bottom) we are making the GraphQL request, then doing a little bit of work with the output to make it smaller and to show a simple boolean for the stock level instead of the actual amount.
We host this as a lambda function on AWS then expose it via API Gateway as a GET endpoint such as this:
/stockchecker/{variantId}Which has a mapping template like this:
#set($inputRoot = $input.path('$'))
{
"variantId": "$input.params('variantId')"
}The UI
Keeping the UI simple, with a link, that onClick shows a loading spinner. Whilst the request to the API is made. Then show the locations listed with whether they are in stock or not. Along with a link to the store details page for that location, which in our case the handle of the location name is also the page URL handle.
This is available as a raw JavaScript class below.
Implementing on your store
This is possibly a little advanced for many Shopify store owners, so I would recommend passing on this article, which links to code they can use as a starting block for a stock checker on your site.
