Show Inventory Levels By Location On Your Product Page

This workflow and code snippet for your product page will pull inventory levels by location on the fly and show them on your product page.

How It Looks

Watch The Demo

Preview Workflow

The workflow simply responds to a web request that will be coming via Javascript and responds with the inventory levels.

Liquid Code

You’ll want to copy and paste this code into a Custom Liquid section in the Theme Editor for your Product Page.

<fieldset class="js product-form__input">
  <legend class="form__label">Available Inventory</legend>
  <div id='mesa-output'></div>

<script type="text/javascript">

  const WEBHOOK_URL = '';

  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);

  let variantId = '{{}}';
  url = WEBHOOK_URL + '&variant_id=' + variantId;

    .then(response => {
      let data = response.response;
      let levels = => {
        return + ": " + object.quantities[0].available
      let output = levels.join('<br>');
      const outputDiv = document.getElementById('mesa-output');
      outputDiv.innerHTML = output;


How do I use this demo file?

  1. Add MESA from the Shopify App Store. Enjoy a 7-day free trial to start.
  2. Import this download to My Workflows. Navigate to your automations then follow the prompt to import a workflow. Upload the downloaded ZIP file from this demo.
  3. That's it! Personalize any step if you want. You got this.
  4. Questions? Shoot me an email: [email protected]
We literally wrote the book on Shopify automation

Learn how to make Shopify work easier with your business processes.

Get the playbook - Free!

shopify automation playbook PDF