How to Show Inventory on Shopify Product Pages

Time needed: 5 minutes

This workflow allows you to display real-time inventory levels from each warehouse or retail location directly on your Shopify product pages. It retrieves current stock data from your locations and shows item availability, updating as stock levels change, and providing accurate information to customers before purchase.

1. Set up Web Request

   Initiate a Web request to collect inventory data. This step sets the stage for fetching data from your Shopify store.

2. Use Code to gather inventory levels 

   Run a Code step to process the inventory data. This queries the Shopify GraphQL API to obtain the inventory levels by location for specific product variants. It extracts location names and available quantities, and prepares the data for display.
   
   const Mesa = require('vendor/Mesa.js');
const ShopifyGraphql = require('vendor/ShopifyGraphql.js');
/**
 * A Mesa Script exports a class with a script() method.
 */
module.exports = new class {
  script = (payload, context) => {
    let vars = context.steps;
    let variantId = vars.webrequest.querystring.variant_id;
    let query = `
      {
        productVariant(id:"gid://shopify/ProductVariant/${variantId}") {
          sku
          inventoryItem {
            inventoryLevels(first:10) {
              nodes {
                location {
                  name
                }
                quantities(names:"available") {
                  available: quantity
                }
              }
            }
          }
        }
      }
    `;
    const r = ShopifyGraphql.send(query, null);
    Mesa.output.next({"response": r.data.productVariant.inventoryItem.inventoryLevels.nodes});
  }
}
   
   

3. Copy then paste your workflow’s webhook URL 

   Copy your workflow’s Webhook URL from the MESA workflow trigger and replace the “Add your webhook URL here” (line 5 in the code snippet above) for the theme snippet in the next step.

4. Add theme snippet to the product template 

   Output the processed inventory levels, organized by location, with a theme snippet on the product page. This step ensures the data is ready to be displayed on your product page, allowing customers to view where items are in stock.
   
   Navigate to your theme’s product template. In the Product Information section, add a block for Custom Liquid.Paste the following snippet:
   
   <fieldset class="js product-form__input">
  <legend class="form__label">Available Inventory</legend>
  <div id="mesa-output"></div>
</fieldset>
<script type="text/javascript">
  const WEBHOOK_URL =
    'Add your webhook URL here';
  function fetchJSON(url) {
    return fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .catch((error) => {
        console.error('There was a problem with the fetch operation:', error);
      });
  }
  function showInventoryForVariant(variantId) {
    const outputDiv = document.getElementById('mesa-output');
    outputDiv.style.opacity = 0.5;
    url = WEBHOOK_URL + '&variant_id=' + variantId;
    console.log("MESA fetching inventory levels data: " + url);
    fetchJSON(url).then((response) => {
      let data = response.response;
      console.log("MESA inventory levels data: ", data);
      let levels = data.map((object) => {
        return object.location.name + ': ' + object.quantities[0].available;
      });
      let output = levels.join('<br>');
      outputDiv.style.opacity = 1;
      outputDiv.innerHTML = output;
    });
  }
  window.addEventListener('DOMContentLoaded', () => {
    let variantId = '{{product.selected_or_first_available_variant.id}}';
    showInventoryForVariant(variantId);
    subscribe(PUB_SUB_EVENTS.variantChange, (event) => {
      console.log('Variant change event:', event);
      let variantId = event.data.variant.id;
      showInventoryForVariant(variantId);
    });
  });
</script>
   
   

5. Turn “On” this workflow

   Be sure to run your workflow once to ensure it correctly makes Shopify show inventory product levels on the product page. Then, turn “On” this workflow to have it run automatically any time a user views a product page.