Show Inventory Levels By Location On Your Product Page

Display real-time inventory counts from each warehouse or retail location directly on your Shopify product pages. This workflow pulls current stock levels from your connected locations and presents them in a clear format, letting shoppers see exactly where items are available. The location-specific inventory data updates as stock levels change, giving customers accurate availability information before they purchase. Please note, this template runs each time the product page is loaded so we recommend the Unlimited plan.

🔧 Setup is needed:
➕ Add a Custom Liquid block to the product template in the Theme Editor.
✏️ Copy and paste the code snippet into the Custom Liquid block. Change the Webhook URL to match your workflow.

Note: This template runs each time the product page is loaded; therefore, we recommend the Unlimited plan.

Follow the steps below to set up this workflow.

Step 1

Navigate to the Default product template within the Theme Editor in your Shopify admin.

Step 2

In the Product Information section, add a block for Custom Liquid.

Step 3

Click on the Custom liquid block and copy/paste the code snippet below into the empty field and Save.

Note: This works for Dawn themes, but custom themes may require specific adjustments. Contact us at contact@getmesa.com if you need help setting this up.

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

Step 4

Copy your workflow's Webhook URL from the MESA workflow trigger and replace  Add your webhook URL here (line 5 in the code snippet above).

Paste the webhook URL from your workflow inside the single quotations, as shown below:

Once it looks like the screenshot above, click Save at the top right of the Theme Editor page.

Step 5

Navigate back to the workflow in MESA and hit the  Save changes button at the top to save your workflow.

Step 6

At the top or bottom of the page, switch Off to On to turn on your workflow to start automating.

Step 7

After turning your workflow On, open a product page to see the inventory levels per location. It should look similar to the following:

✋ If you have any questions or encounter errors in this workflow, please contact our Customer Success Team. Different themes may require different setup methods.

Email us at contact@getmesa.com where actual humans are on standby, ready to help.