{"id":12994,"date":"2025-03-06T16:00:00","date_gmt":"2025-03-06T16:00:00","guid":{"rendered":"https:\/\/www.getmesa.com/blog\/?p=12994"},"modified":"2026-02-27T14:59:41","modified_gmt":"2026-02-27T14:59:41","slug":"shopify-show-inventory-on-product-page","status":"publish","type":"post","link":"https:\/\/www.getmesa.com/blog\/shopify-show-inventory-on-product-page\/","title":{"rendered":"How to Show Inventory on Shopify Product Pages"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Having Shopify show inventory product details on product pages has become a popular move for online retailers. This simple but effective feature can significantly impact the customer experience and buying decisions. Merchants can build trust, create urgency, and streamline their business by showing real-time stock.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we\u2019ll discuss the benefits, options, and practical advice. Whether you\u2019re a seasoned Shopify merchant or just starting, this guide will help you use inventory visibility to optimize your online store.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-alpha-channel-opacity has-cyan-bluish-gray-background-color has-background is-style-dots\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>TL;DR: <strong>Skip the step-by-step tutorial<\/strong>.&nbsp;<\/strong>Use this template to show inventory counts on your Shopify product pages with just a few clicks.<\/p>\n\n\n<div class=\"mesa-template-backend frontend-hidden\">\n    <p><strong>MESA Template ID<\/strong><\/p>\n    <p>inventory-level-by-location-shopify-product-page<\/p>\n<\/div>\n\n<div class=\"mesa-template\" data-template=\"inventory-level-by-location-shopify-product-page\"><\/div>\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\t\t<style>.mesa-template-backend {\n    background: rgba(139, 139, 150, 0.1);\n    padding: 22px;\n}\n\n.mesa-template-backend h5,\n.mesa-template-backend p {\n    margin: 0 0 5px;\n}\n\n.mesa-template-backend p {\n    font-size: 16px;\n}\n\n.mesa-template-backend p:last-child {\n    display: inline-block;\n    background: #fff;\n    padding: 5px 10px;\n}\n\n.mesa-template-backend p strong {\n    font-size: 12px;\n}<\/style>\n\t\t\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents:<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.getmesa.com/blog\/shopify-show-inventory-on-product-page\/#How-to-show-inventory-levels-by-location-on-your-product-page\" >How to show inventory levels by location on your product page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.getmesa.com/blog\/shopify-show-inventory-on-product-page\/#Why-show-inventory-on-product-pages\" >Why show inventory on product pages?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.getmesa.com/blog\/shopify-show-inventory-on-product-page\/#Popular-ways-to-display-inventory-levels\" >Popular ways to display inventory levels<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.getmesa.com/blog\/shopify-show-inventory-on-product-page\/#Tips-for-displaying-inventory-levels-on-product-pages\" >Tips for displaying inventory levels on product pages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.getmesa.com/blog\/shopify-show-inventory-on-product-page\/#Common-questions-about-showing-inventory-levels\" >Common questions about showing inventory levels<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-how-to-show-inventory-levels-by-location-on-your-product-page\"><span class=\"ez-toc-section\" id=\"How-to-show-inventory-levels-by-location-on-your-product-page\"><\/span><strong>How to show inventory levels by location on your product page<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"schema-how-to wp-block-yoast-how-to-block\"><p class=\"schema-how-to-total-time\"><span class=\"schema-how-to-duration-time-text\">Time needed:&nbsp;<\/span>5 minutes<\/p><p class=\"schema-how-to-description\">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.<\/p> <ol class=\"schema-how-to-steps\"><li class=\"schema-how-to-step\" id=\"how-to-step-1740509137463\"><strong class=\"schema-how-to-step-name\"><strong>Set up Web Request<\/strong><\/strong> <p class=\"schema-how-to-step-text\">Initiate a <a href=\"https:\/\/www.getmesa.com\/apps\/web-request\/integrate\" target=\"_blank\" rel=\"noreferrer noopener\">Web request<\/a> to collect inventory data. This step sets the stage for fetching data from your Shopify store.<img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"370\" class=\"wp-image-12996\" alt=\"Set up Web Request\" src=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-86.png\" style=\"max-width:100%;\" srcset=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-86.png 1536w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-86-300x72.png 300w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-86-1024x247.png 1024w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-86-768x185.png 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1740509285417\"><strong class=\"schema-how-to-step-name\"><strong>Use Code to gather inventory levels\u00a0<\/strong><\/strong> <p class=\"schema-how-to-step-text\">Run a <a href=\"https:\/\/www.getmesa.com\/apps\/code\/integrate\">Code<\/a> 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.<br\/><br\/><code>const Mesa = require('vendor\/Mesa.js');<br\/>const ShopifyGraphql = require('vendor\/ShopifyGraphql.js');<br\/>\/**<br\/>\u00a0* A Mesa Script exports a class with a script() method.<br\/>\u00a0*\/<br\/>module.exports = new class {<br\/>\u00a0\u00a0script = (payload, context) => {<br\/>\u00a0\u00a0\u00a0\u00a0let vars = context.steps;<br\/>\u00a0\u00a0\u00a0\u00a0let variantId = vars.webrequest.querystring.variant_id;<br\/>\u00a0\u00a0\u00a0\u00a0let query = `<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0productVariant(id:\"gid:\/\/shopify\/ProductVariant\/${variantId}\") {<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sku<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0inventoryItem {<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0inventoryLevels(first:10) {<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodes {<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0location {<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0quantities(names:\"available\") {<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0available: quantity<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<br\/>\u00a0\u00a0\u00a0\u00a0`;<br\/>\u00a0\u00a0\u00a0\u00a0const r = ShopifyGraphql.send(query, null);<br\/>\u00a0\u00a0\u00a0\u00a0Mesa.output.next({\"response\": r.data.productVariant.inventoryItem.inventoryLevels.nodes});<br\/>\u00a0\u00a0}<br\/>}<\/code><br\/><br\/><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"992\" class=\"wp-image-12997\" alt=\"Use Code to gather inventory levels \" src=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-87.png\" style=\"max-width:100%;\" srcset=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-87.png 1536w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-87-300x194.png 300w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-87-1024x661.png 1024w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-87-768x496.png 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1740509409117\"><strong class=\"schema-how-to-step-name\"><strong>Copy then paste your workflow\u2019s webhook URL\u00a0<\/strong><\/strong> <p class=\"schema-how-to-step-text\">Copy your workflow&#8217;s Webhook URL from the MESA workflow trigger and replace the \u201cAdd your webhook URL here\u201d (line 5 in the code snippet above) for the theme snippet in the next step.<img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"868\" class=\"wp-image-12998\" alt=\"Copy then paste your workflow\u2019s webhook URL \" src=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-88.png\" style=\"max-width:100%;\" srcset=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-88.png 1536w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-88-300x170.png 300w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-88-1024x579.png 1024w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-88-768x434.png 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1740509527211\"><strong class=\"schema-how-to-step-name\"><strong>Add theme snippet to the product template\u00a0<\/strong><\/strong> <p class=\"schema-how-to-step-text\">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.<br><br>Navigate to your theme\u2019s product template. In the Product Information section, add a block for Custom Liquid. Paste the following snippet:<br><br><code>&lt;fieldset class=\"js product-form__input\"><br>\u00a0\u00a0&lt;legend class=\"form__label\">Available Inventory&lt;\/legend><br>\u00a0\u00a0&lt;div id=\"mesa-output\">&lt;\/div><br>&lt;\/fieldset><\/code><br><br><img loading=\"lazy\" decoding=\"async\" width=\"983\" height=\"551\" class=\"wp-image-13000\" style=\"max-width:100%;\" src=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-89.png\" alt=\"Add theme snippet to the product template \" srcset=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-89.png 983w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-89-300x168.png 300w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-89-768x430.png 768w\" sizes=\"auto, (max-width: 983px) 100vw, 983px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1772204014053\"><strong class=\"schema-how-to-step-name\">Also, a<strong>dd this script snippet to the product template\u00a0<\/strong><\/strong> <p class=\"schema-how-to-step-text\">Add the following JavaScript:<br><br><code>const WEBHOOK_URL =<br>\u00a0\u00a0\u00a0\u00a0'Add your webhook URL here';<br>\u00a0\u00a0function fetchJSON(url) {<br>\u00a0\u00a0\u00a0\u00a0return fetch(url)<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then((response) => {<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!response.ok) {<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0throw new Error('Network response was not ok');<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response.json();<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.catch((error) => {<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.error('There was a problem with the fetch operation:', error);<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});<br>\u00a0\u00a0}<br>\u00a0\u00a0function showInventoryForVariant(variantId) {<br>\u00a0\u00a0\u00a0\u00a0const outputDiv = document.getElementById('mesa-output');<br>\u00a0\u00a0\u00a0\u00a0outputDiv.style.opacity = 0.5;<br>\u00a0\u00a0\u00a0\u00a0url = WEBHOOK_URL + '&amp;variant_id=' + variantId;<br>\u00a0\u00a0\u00a0\u00a0console.log(\"MESA fetching inventory levels data: \" + url);<br>\u00a0\u00a0\u00a0\u00a0fetchJSON(url).then((response) => {<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let data = response.response;<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\"MESA inventory levels data: \", data);<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let levels = data.map((object) => {<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return object.location.name + ': ' + object.quantities[0].available;<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let output = levels.join('&lt;br>');<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0outputDiv.style.opacity = 1;<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0outputDiv.innerHTML = output;<br>\u00a0\u00a0\u00a0\u00a0});<br>\u00a0\u00a0}<br>\u00a0\u00a0window.addEventListener('DOMContentLoaded', () => {<br>\u00a0\u00a0\u00a0\u00a0let variantId = '{{product.selected_or_first_available_variant.id}}';<br>\u00a0\u00a0\u00a0\u00a0showInventoryForVariant(variantId);<br>\u00a0\u00a0\u00a0\u00a0subscribe(PUB_SUB_EVENTS.variantChange, (event) => {<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Variant change event:', event);<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let variantId = event.data.variant.id;<br>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0showInventoryForVariant(variantId);<br>\u00a0\u00a0\u00a0\u00a0});<br>\u00a0\u00a0});<\/code><img loading=\"lazy\" decoding=\"async\" width=\"1746\" height=\"1166\" src=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/custom-liquid-script.png\" class=\"attachment-full size-full\" alt=\"custom liquid script\" style=\"max-width: 100%; height: auto;\" srcset=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/custom-liquid-script.png 1746w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/custom-liquid-script-300x200.png 300w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/custom-liquid-script-1024x684.png 1024w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/custom-liquid-script-768x513.png 768w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/custom-liquid-script-1536x1026.png 1536w\" sizes=\"auto, (max-width: 1746px) 100vw, 1746px\" \/><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1740509692574\"><strong class=\"schema-how-to-step-name\"><strong>Turn \u201cOn\u201d this workflow<\/strong><\/strong> <p class=\"schema-how-to-step-text\">Be sure to run your workflow once to ensure it correctly makes Shopify show inventory product levels on the product page. Then, turn \u201cOn\u201d this workflow to have it run automatically any time a user views a product page.<img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"998\" class=\"wp-image-13001\" style=\"max-width:100%;\" src=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-90.png\" alt=\"Show inventory levels by location on your product page\" srcset=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-90.png 1536w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-90-300x195.png 300w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-90-1024x665.png 1024w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-90-768x499.png 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/><\/p> <\/li><\/ol><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-alpha-channel-opacity has-cyan-bluish-gray-background-color has-background is-style-dots\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Save yourself the setup. <\/strong>Use this template instead:<\/p>\n\n\n<div class=\"mesa-template-backend frontend-hidden\">\n    <p><strong>MESA Template ID<\/strong><\/p>\n    <p>inventory-level-by-location-shopify-product-page<\/p>\n<\/div>\n\n<div class=\"mesa-template\" data-template=\"inventory-level-by-location-shopify-product-page\"><\/div>\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-show-inventory-on-product-pages\"><span class=\"ez-toc-section\" id=\"Why-show-inventory-on-product-pages\"><\/span><strong>Why show inventory on product pages?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Showing <a href=\"https:\/\/community.shopify.com\/c\/shopify-design\/display-inventory-quantity-on-the-product-page\/m-p\/424904\" target=\"_blank\" rel=\"noreferrer noopener\">inventory on product pages<\/a> has several benefits for both merchants and customers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Build trust\u2014<\/strong>In a world where online shopping can sometimes feel uncertain, knowing a product is in stock and ready to ship gives peace of mind. This transparency builds reliability and encourages customers to complete their purchases with confidence.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Create urgency<\/strong>\u2014When customers see there are only a few left, it taps into the fear of missing out (FOMO) and gets them to act fast. This psychological trigger can be potent during sales or promotions, as it adds scarcity to the shopping experience. By using this urgency, merchants can increase conversions and reduce cart abandonment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Reduce customer support questions about product availability\u2014<\/strong>When stock is visible on product pages, customers can self-serve and find the necessary answers without contacting support teams. This improves the customer experience and frees support time for more complex issues.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-popular-ways-to-display-inventory-levels\"><span class=\"ez-toc-section\" id=\"Popular-ways-to-display-inventory-levels\"><\/span><strong>Popular ways to display inventory levels<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The most precise way is to show the exact <a href=\"https:\/\/help.shopify.com\/en\/manual\/online-store\/themes\/themes-by-shopify\/vintage-themes\/customizing-vintage-themes\/show-remaining-quantity\" target=\"_blank\" rel=\"noreferrer noopener\">quantity remaining for each variant<\/a>. This level of detail gives customers a transparent view of availability so they can make informed decisions.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-91.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"725\" data-id=\"13002\" src=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-91-1024x725.png\" alt=\"Show quantity remaining for each variant. \" class=\"wp-image-13002\" srcset=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-91-1024x725.png 1024w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-91-300x212.png 300w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-91-768x544.png 768w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-91.png 1034w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Another common way is to use stock status indicators. Instead of showing exact quantities, these indicators give a binary availability view. Green checkmarks or \u201cin stock\u201d labels tell customers the product is available, while red crosses or \u201cout of stock\u201d messages manage expectations and prevent disappointment.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-92.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"733\" src=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-92-1024x733.png\" alt=\"Use stock status indicators showing availability view. \" class=\"wp-image-13004\" srcset=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-92-1024x733.png 1024w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-92-300x215.png 300w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-92-768x550.png 768w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-92.png 1050w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Low-stock alerts are another way to show inventory and create urgency. When a product\u2019s stock falls below a certain threshold, merchants can display attention-grabbing messages like \u201cLimited stock remaining\u201d or \u201cAct fast, only a few left.\u201d These alerts capitalize on the scarcity principle and get customers to act fast before the opportunity disappears.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-93.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"734\" src=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-93-1024x734.png\" alt=\"Use low-stock alerts to show inventory and create urgency.\" class=\"wp-image-13006\" srcset=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-93-1024x734.png 1024w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-93-300x215.png 300w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-93-768x550.png 768w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-93.png 1054w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For businesses with multiple physical stores or warehouses, showing inventory by location can be a game-changer for the customer experience. In fact, this display option allows customers to see which specific locations have the product in stock, so it becomes easier to find and buy from a nearby store. This is especially useful for retailers with a strong brick-and-mortar presence or those that offer in-store pickup; it\u2019s a big win for the customer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-94.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"716\" src=\"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-94-1024x716.png\" alt=\"Show inventory by location. \" class=\"wp-image-13008\" srcset=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-94-1024x716.png 1024w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-94-300x210.png 300w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-94-768x537.png 768w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/image-94.png 1086w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<aside class=\"section-single-related\" aria-labelledby=\"related-heading-6417\">\n\t<p id=\"related-heading-6417\">\n\t\tRelated article:\n\t<\/p>\n\n\t<article class=\"card-aside\">\n\t\t<a href=\"https:\/\/www.getmesa.com/blog\/how-to-automate-product-inventory-on-shopify\/\" class=\"card-aside__link\">\n\t\t\t<figure class=\"card__image\">\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/how-to-automate-product-inventory-on-shopify-1024x576.png\" class=\"attachment-large size-large wp-post-image\" alt=\"automate product inventory on shopify\" srcset=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/how-to-automate-product-inventory-on-shopify-1024x576.png 1024w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/how-to-automate-product-inventory-on-shopify-300x169.png 300w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/how-to-automate-product-inventory-on-shopify-768x432.png 768w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/how-to-automate-product-inventory-on-shopify-553x311.png 553w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/how-to-automate-product-inventory-on-shopify-356x200.png 356w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/how-to-automate-product-inventory-on-shopify-764x430.png 764w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/how-to-automate-product-inventory-on-shopify-284x160.png 284w, https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/how-to-automate-product-inventory-on-shopify.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>\t\t\t<\/figure><!-- \/.card__image -->\n\n\t\t\t<p class=\"card__title\">\n\t\t\t\t<strong>How to automate product inventory on Shopify<\/strong>\n\t\t\t<\/p><!-- \/.card__title -->\n\n\t\t\t<span class=\"btn btn--outline card__btn card__btn--alt\" aria-hidden=\"true\">\n\t\t\t\tRead article\t\t\t<\/span>\n\t\t<\/a>\n\t<\/article>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tips-for-displaying-inventory-levels-on-product-pages\"><span class=\"ez-toc-section\" id=\"Tips-for-displaying-inventory-levels-on-product-pages\"><\/span><strong>Tips for displaying inventory levels on product pages<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Showing inventory on your product pages requires consideration to ensure it enhances the user experience without slowing down your store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One thing to keep in mind is the impact of product page loads on your automation.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each time a customer visits a product page, it triggers an automation to retrieve and display the latest stock information. By optimizing your automation and being selective about which pages show inventory, you can strike a balance between real-time data and efficiency.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For businesses with large product catalogs or high sales volumes, the Unlimited plan from MESA is the way to go. This plan offers unlimited automation to handle uninterrupted product page requests, so your inventory data stays up to date across your entire Shopify store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-common-questions-about-showing-inventory-levels\"><span class=\"ez-toc-section\" id=\"Common-questions-about-showing-inventory-levels\"><\/span><strong>Common questions about showing inventory levels<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1740510381291\"><strong class=\"schema-faq-question\"><strong>Can I show different inventory displays for different products?<\/strong><\/strong> <p class=\"schema-faq-answer\">Because this is incorporated into the theme, the display of inventory levels will appear on all product pages.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1740510397772\"><strong class=\"schema-faq-question\"><strong>How often does the inventory count update?<\/strong><\/strong> <p class=\"schema-faq-answer\">The count displays the most recent value every time the product page is loaded.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1740510406009\"><strong class=\"schema-faq-question\"><strong>What happens when an item sells out?<\/strong><\/strong> <p class=\"schema-faq-answer\">The display will show \u201c0\u201d unless you create custom conditions to show something else.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1740510420226\"><strong class=\"schema-faq-question\"><strong>Can specific locations be hidden from appearing on the product page?<\/strong><\/strong> <p class=\"schema-faq-answer\">Certainly. Specific locations could be filtered from the workflow before the results are sent to the product page, or, using Liquid, the location could be hidden in the theme template. <a href=\"https:\/\/www.getmesa.com\/support\">Contact us<\/a> if you need help with either approach.<\/p> <\/div> <\/div>\n\n\n\n<div class=\"card-next-steps\">\n\t<div class=\"card__content\">\n\t\t<h4>What to do next&#8230;<\/h4>\n<p>The fastest way to automate anything is to start with a single task.<\/p>\n<ol>\n<li><a href=\"https:\/\/www.getmesa.com\/pricing\"><strong>Try MESA free<\/strong><\/a> \u2014 7-day free trial included<\/li>\n<li><a href=\"https:\/\/www.getmesa.com\/templates\"><strong>Start from a template<\/strong><\/a> \u2014 pre-built workflows for the most common tasks<\/li>\n<li><a href=\"https:\/\/www.getmesa.com\/yedric\"><strong>Describe your workflow<\/strong><\/a> \u2014 let our AI assistant build it for you<\/li>\n<\/ol>\n\t<\/div><!-- \/.card__content -->\n\n\t<\/div><!-- \/.card-next-steps -->\n","protected":false},"excerpt":{"rendered":"<p>Having Shopify show inventory product details on product pages has become a popular move for online retailers. This simple but&#8230;<\/p>\n","protected":false},"author":1,"featured_media":13011,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[48],"tags":[285,267],"class_list":["post-12994","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-workflow-tutorials","tag-code","tag-web-request"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Show Inventory Levels on Shopify Product Pages<\/title>\n<meta name=\"description\" content=\"Learn how to make Shopify show inventory product details on your storefront. Display stock levels and manage inventory with ease.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Show Inventory Levels on Shopify Product Pages\" \/>\n<meta property=\"og:description\" content=\"Learn how to make Shopify show inventory product details on your storefront. Display stock levels and manage inventory with ease.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/\" \/>\n<meta property=\"og:site_name\" content=\"MESA\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/web.facebook.com\/mesabyshoppad\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-06T16:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-27T14:59:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/inventory-product-page.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ryan ODonnell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@getmesa\" \/>\n<meta name=\"twitter:site\" content=\"@getmesa\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ryan ODonnell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.getmesa.com/blog\\\/shopify-show-inventory-on-product-page\\\/\"},\"author\":{\"name\":\"Ryan ODonnell\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/#\\\/schema\\\/person\\\/37dc9b968192b2be49af3950022179cc\"},\"headline\":\"How to Show Inventory on Shopify Product Pages\",\"datePublished\":\"2025-03-06T16:00:00+00:00\",\"dateModified\":\"2026-02-27T14:59:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.getmesa.com/blog\\\/shopify-show-inventory-on-product-page\\\/\"},\"wordCount\":1033,\"publisher\":{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.getmesa.com/blog\\\/wp-content\\\/uploads\\\/inventory-product-page.png\",\"keywords\":[\"code\",\"Web Request\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\\\/\\\/www.getmesa.com/blog\\\/shopify-show-inventory-on-product-page\\\/\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/\",\"name\":\"How to Show Inventory Levels on Shopify Product Pages\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.getmesa.com/blog\\\/wp-content\\\/uploads\\\/inventory-product-page.png\",\"datePublished\":\"2025-03-06T16:00:00+00:00\",\"dateModified\":\"2026-02-27T14:59:41+00:00\",\"description\":\"Learn how to make Shopify show inventory product details on your storefront. Display stock levels and manage inventory with ease.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510381291\"},{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510397772\"},{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510406009\"},{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510420226\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.getmesa.com/blog\\\/wp-content\\\/uploads\\\/inventory-product-page.png\",\"contentUrl\":\"https:\\\/\\\/www.getmesa.com/blog\\\/wp-content\\\/uploads\\\/inventory-product-page.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Show Inventory on Shopify Product Pages\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/\",\"name\":\"MESA\",\"description\":\"Discover how to automate your Shopify growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/#organization\",\"name\":\"MESA - AI automation Platform\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.getmesa.com/blog\\\/wp-content\\\/uploads\\\/mesa-shoppad.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.getmesa.com/blog\\\/wp-content\\\/uploads\\\/mesa-shoppad.jpeg\",\"width\":225,\"height\":225,\"caption\":\"MESA - AI automation Platform\"},\"image\":{\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/web.facebook.com\\\/mesabyshoppad\\\/\",\"https:\\\/\\\/x.com\\\/getmesa\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/shoppad\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCqsf_WhcGEsZMvms1idivyw\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/#\\\/schema\\\/person\\\/37dc9b968192b2be49af3950022179cc\",\"name\":\"Ryan ODonnell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62bb965c979cc1de4c6f046fb47a28a57bc194da441ebe43b3dfbe2f2f893563?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62bb965c979cc1de4c6f046fb47a28a57bc194da441ebe43b3dfbe2f2f893563?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62bb965c979cc1de4c6f046fb47a28a57bc194da441ebe43b3dfbe2f2f893563?s=96&d=mm&r=g\",\"caption\":\"Ryan ODonnell\"},\"sameAs\":[\"https:\\\/\\\/www.getmesa.com\"]},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510381291\",\"position\":1,\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510381291\",\"name\":\"Can I show different inventory displays for different products?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Because this is incorporated into the theme, the display of inventory levels will appear on all product pages.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510397772\",\"position\":2,\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510397772\",\"name\":\"How often does the inventory count update?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The count displays the most recent value every time the product page is loaded.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510406009\",\"position\":3,\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510406009\",\"name\":\"What happens when an item sells out?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The display will show \u201c0\u201d unless you create custom conditions to show something else.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510420226\",\"position\":4,\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#faq-question-1740510420226\",\"name\":\"Can specific locations be hidden from appearing on the product page?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Certainly. Specific locations could be filtered from the workflow before the results are sent to the product page, or, using Liquid, the location could be hidden in the theme template. <a href=\\\"https:\\\/\\\/www.getmesa.com\\\/support\\\">Contact us<\\\/a> if you need help with either approach.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"HowTo\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#howto-1\",\"name\":\"How to Show Inventory on Shopify Product Pages\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.getmesa.com/blog\\\/shopify-show-inventory-on-product-page\\\/#article\"},\"description\":\"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.\",\"totalTime\":\"P0DT0H5M\",\"step\":[{\"@type\":\"HowToStep\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#how-to-step-1740509137463\",\"name\":\"Set up Web Request\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Initiate a Web request to collect inventory data. This step sets the stage for fetching data from your Shopify store.\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#schema-image-79be159de9fde4137aec7416d384d126\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/wp-content\\\/uploads\\\/image-86.png\",\"contentUrl\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/wp-content\\\/uploads\\\/image-86.png\"}},{\"@type\":\"HowToStep\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#how-to-step-1740509285417\",\"name\":\"Use Code to gather inventory levels\u00a0\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"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');\\\/**\u00a0* A Mesa Script exports a class with a script() method.\u00a0*\\\/module.exports = new class {\u00a0\u00a0script = (payload, context) => {\u00a0\u00a0\u00a0\u00a0let vars = context.steps;\u00a0\u00a0\u00a0\u00a0let variantId = vars.webrequest.querystring.variant_id;\u00a0\u00a0\u00a0\u00a0let query = `\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0productVariant(id:\\\"gid:\\\/\\\/shopify\\\/ProductVariant\\\/${variantId}\\\") {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sku\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0inventoryItem {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0inventoryLevels(first:10) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodes {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0location {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0quantities(names:\\\"available\\\") {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0available: quantity\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0`;\u00a0\u00a0\u00a0\u00a0const r = ShopifyGraphql.send(query, null);\u00a0\u00a0\u00a0\u00a0Mesa.output.next({\\\"response\\\": r.data.productVariant.inventoryItem.inventoryLevels.nodes});\u00a0\u00a0}}\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#schema-image-9c8b691320044848abf9b5da8fbe328d\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/wp-content\\\/uploads\\\/image-87.png\",\"contentUrl\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/wp-content\\\/uploads\\\/image-87.png\"}},{\"@type\":\"HowToStep\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#how-to-step-1740509409117\",\"name\":\"Copy then paste your workflow\u2019s webhook URL\u00a0\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Copy your workflow's Webhook URL from the MESA workflow trigger and replace the \u201cAdd your webhook URL here\u201d (line 5 in the code snippet above) for the theme snippet in the next step.\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#schema-image-aed60b62c5f50bc8d06abcbcab3bd7ff\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/wp-content\\\/uploads\\\/image-88.png\",\"contentUrl\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/wp-content\\\/uploads\\\/image-88.png\"}},{\"@type\":\"HowToStep\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#how-to-step-1740509527211\",\"name\":\"Add theme snippet to the product template\u00a0\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"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\u2019s product template. In the Product Information section, add a block for Custom Liquid. Paste the following snippet:\u00a0\u00a0Available Inventory\u00a0\u00a0\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#schema-image-852920ede02ea9d74fb0e9591c6f7e2c\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/wp-content\\\/uploads\\\/image-89.png\",\"contentUrl\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/wp-content\\\/uploads\\\/image-89.png\"}},{\"@type\":\"HowToStep\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#how-to-step-1772204014053\",\"name\":\"Also, add this script snippet to the product template\u00a0\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Add the following JavaScript:const WEBHOOK_URL =\u00a0\u00a0\u00a0\u00a0'Add your webhook URL here';\u00a0\u00a0function fetchJSON(url) {\u00a0\u00a0\u00a0\u00a0return fetch(url)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then((response) => {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!response.ok) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0throw new Error('Network response was not ok');\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response.json();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.catch((error) => {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.error('There was a problem with the fetch operation:', error);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0}\u00a0\u00a0function showInventoryForVariant(variantId) {\u00a0\u00a0\u00a0\u00a0const outputDiv = document.getElementById('mesa-output');\u00a0\u00a0\u00a0\u00a0outputDiv.style.opacity = 0.5;\u00a0\u00a0\u00a0\u00a0url = WEBHOOK_URL + '&variant_id=' + variantId;\u00a0\u00a0\u00a0\u00a0console.log(\\\"MESA fetching inventory levels data: \\\" + url);\u00a0\u00a0\u00a0\u00a0fetchJSON(url).then((response) => {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let data = response.response;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\\\"MESA inventory levels data: \\\", data);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let levels = data.map((object) => {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return object.location.name + ': ' + object.quantities[0].available;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let output = levels.join('');\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0outputDiv.style.opacity = 1;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0outputDiv.innerHTML = output;\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0}\u00a0\u00a0window.addEventListener('DOMContentLoaded', () => {\u00a0\u00a0\u00a0\u00a0let variantId = '{{product.selected_or_first_available_variant.id}}';\u00a0\u00a0\u00a0\u00a0showInventoryForVariant(variantId);\u00a0\u00a0\u00a0\u00a0subscribe(PUB_SUB_EVENTS.variantChange, (event) => {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Variant change event:', event);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let variantId = event.data.variant.id;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0showInventoryForVariant(variantId);\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0});\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#schema-image-511b16fbc191c234957cca91b3e08dcd\",\"url\":\"https:\\\/\\\/www.getmesa.com/blog\\\/wp-content\\\/uploads\\\/custom-liquid-script.png\",\"contentUrl\":\"https:\\\/\\\/www.getmesa.com/blog\\\/wp-content\\\/uploads\\\/custom-liquid-script.png\",\"width\":1746,\"height\":1166,\"caption\":\"custom liquid script\"}},{\"@type\":\"HowToStep\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#how-to-step-1740509692574\",\"name\":\"Turn \u201cOn\u201d this workflow\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Be sure to run your workflow once to ensure it correctly makes Shopify show inventory product levels on the product page. Then, turn \u201cOn\u201d this workflow to have it run automatically any time a user views a product page.\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/shopify-show-inventory-on-product-page\\\/#schema-image-2a43b395fea65c20b61254624209df14\",\"url\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/wp-content\\\/uploads\\\/image-90.png\",\"contentUrl\":\"https:\\\/\\\/www.getmesa.com\\\/blog\\\/wp-content\\\/uploads\\\/image-90.png\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Show Inventory Levels on Shopify Product Pages","description":"Learn how to make Shopify show inventory product details on your storefront. Display stock levels and manage inventory with ease.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/","og_locale":"en_US","og_type":"article","og_title":"How to Show Inventory Levels on Shopify Product Pages","og_description":"Learn how to make Shopify show inventory product details on your storefront. Display stock levels and manage inventory with ease.","og_url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/","og_site_name":"MESA","article_publisher":"https:\/\/web.facebook.com\/mesabyshoppad\/","article_published_time":"2025-03-06T16:00:00+00:00","article_modified_time":"2026-02-27T14:59:41+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/inventory-product-page.png","type":"image\/png"}],"author":"Ryan ODonnell","twitter_card":"summary_large_image","twitter_creator":"@getmesa","twitter_site":"@getmesa","twitter_misc":{"Written by":"Ryan ODonnell","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#article","isPartOf":{"@id":"https:\/\/www.getmesa.com/blog\/shopify-show-inventory-on-product-page\/"},"author":{"name":"Ryan ODonnell","@id":"https:\/\/www.getmesa.com\/blog\/#\/schema\/person\/37dc9b968192b2be49af3950022179cc"},"headline":"How to Show Inventory on Shopify Product Pages","datePublished":"2025-03-06T16:00:00+00:00","dateModified":"2026-02-27T14:59:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.getmesa.com/blog\/shopify-show-inventory-on-product-page\/"},"wordCount":1033,"publisher":{"@id":"https:\/\/www.getmesa.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#primaryimage"},"thumbnailUrl":"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/inventory-product-page.png","keywords":["code","Web Request"],"articleSection":["Tutorials"],"inLanguage":"en-US"},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/www.getmesa.com/blog\/shopify-show-inventory-on-product-page\/","url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/","name":"How to Show Inventory Levels on Shopify Product Pages","isPartOf":{"@id":"https:\/\/www.getmesa.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#primaryimage"},"image":{"@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#primaryimage"},"thumbnailUrl":"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/inventory-product-page.png","datePublished":"2025-03-06T16:00:00+00:00","dateModified":"2026-02-27T14:59:41+00:00","description":"Learn how to make Shopify show inventory product details on your storefront. Display stock levels and manage inventory with ease.","breadcrumb":{"@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510381291"},{"@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510397772"},{"@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510406009"},{"@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510420226"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#primaryimage","url":"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/inventory-product-page.png","contentUrl":"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/inventory-product-page.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.getmesa.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Show Inventory on Shopify Product Pages"}]},{"@type":"WebSite","@id":"https:\/\/www.getmesa.com\/blog\/#website","url":"https:\/\/www.getmesa.com\/blog\/","name":"MESA","description":"Discover how to automate your Shopify growth","publisher":{"@id":"https:\/\/www.getmesa.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.getmesa.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.getmesa.com\/blog\/#organization","name":"MESA - AI automation Platform","url":"https:\/\/www.getmesa.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.getmesa.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/mesa-shoppad.jpeg","contentUrl":"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/mesa-shoppad.jpeg","width":225,"height":225,"caption":"MESA - AI automation Platform"},"image":{"@id":"https:\/\/www.getmesa.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/web.facebook.com\/mesabyshoppad\/","https:\/\/x.com\/getmesa","https:\/\/www.linkedin.com\/company\/shoppad\/","https:\/\/www.youtube.com\/channel\/UCqsf_WhcGEsZMvms1idivyw"]},{"@type":"Person","@id":"https:\/\/www.getmesa.com\/blog\/#\/schema\/person\/37dc9b968192b2be49af3950022179cc","name":"Ryan ODonnell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/62bb965c979cc1de4c6f046fb47a28a57bc194da441ebe43b3dfbe2f2f893563?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/62bb965c979cc1de4c6f046fb47a28a57bc194da441ebe43b3dfbe2f2f893563?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/62bb965c979cc1de4c6f046fb47a28a57bc194da441ebe43b3dfbe2f2f893563?s=96&d=mm&r=g","caption":"Ryan ODonnell"},"sameAs":["https:\/\/www.getmesa.com"]},{"@type":"Question","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510381291","position":1,"url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510381291","name":"Can I show different inventory displays for different products?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Because this is incorporated into the theme, the display of inventory levels will appear on all product pages.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510397772","position":2,"url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510397772","name":"How often does the inventory count update?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"The count displays the most recent value every time the product page is loaded.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510406009","position":3,"url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510406009","name":"What happens when an item sells out?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"The display will show \u201c0\u201d unless you create custom conditions to show something else.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510420226","position":4,"url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#faq-question-1740510420226","name":"Can specific locations be hidden from appearing on the product page?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Certainly. Specific locations could be filtered from the workflow before the results are sent to the product page, or, using Liquid, the location could be hidden in the theme template. <a href=\"https:\/\/www.getmesa.com\/support\">Contact us<\/a> if you need help with either approach.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"HowTo","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#howto-1","name":"How to Show Inventory on Shopify Product Pages","mainEntityOfPage":{"@id":"https:\/\/www.getmesa.com/blog\/shopify-show-inventory-on-product-page\/#article"},"description":"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.","totalTime":"P0DT0H5M","step":[{"@type":"HowToStep","url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#how-to-step-1740509137463","name":"Set up Web Request","itemListElement":[{"@type":"HowToDirection","text":"Initiate a Web request to collect inventory data. This step sets the stage for fetching data from your Shopify store."}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#schema-image-79be159de9fde4137aec7416d384d126","url":"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-86.png","contentUrl":"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-86.png"}},{"@type":"HowToStep","url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#how-to-step-1740509285417","name":"Use Code to gather inventory levels\u00a0","itemListElement":[{"@type":"HowToDirection","text":"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');\/**\u00a0* A Mesa Script exports a class with a script() method.\u00a0*\/module.exports = new class {\u00a0\u00a0script = (payload, context) => {\u00a0\u00a0\u00a0\u00a0let vars = context.steps;\u00a0\u00a0\u00a0\u00a0let variantId = vars.webrequest.querystring.variant_id;\u00a0\u00a0\u00a0\u00a0let query = `\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0productVariant(id:\"gid:\/\/shopify\/ProductVariant\/${variantId}\") {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sku\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0inventoryItem {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0inventoryLevels(first:10) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodes {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0location {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0quantities(names:\"available\") {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0available: quantity\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0`;\u00a0\u00a0\u00a0\u00a0const r = ShopifyGraphql.send(query, null);\u00a0\u00a0\u00a0\u00a0Mesa.output.next({\"response\": r.data.productVariant.inventoryItem.inventoryLevels.nodes});\u00a0\u00a0}}"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#schema-image-9c8b691320044848abf9b5da8fbe328d","url":"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-87.png","contentUrl":"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-87.png"}},{"@type":"HowToStep","url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#how-to-step-1740509409117","name":"Copy then paste your workflow\u2019s webhook URL\u00a0","itemListElement":[{"@type":"HowToDirection","text":"Copy your workflow's Webhook URL from the MESA workflow trigger and replace the \u201cAdd your webhook URL here\u201d (line 5 in the code snippet above) for the theme snippet in the next step."}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#schema-image-aed60b62c5f50bc8d06abcbcab3bd7ff","url":"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-88.png","contentUrl":"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-88.png"}},{"@type":"HowToStep","url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#how-to-step-1740509527211","name":"Add theme snippet to the product template\u00a0","itemListElement":[{"@type":"HowToDirection","text":"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\u2019s product template. In the Product Information section, add a block for Custom Liquid. Paste the following snippet:\u00a0\u00a0Available Inventory\u00a0\u00a0"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#schema-image-852920ede02ea9d74fb0e9591c6f7e2c","url":"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-89.png","contentUrl":"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-89.png"}},{"@type":"HowToStep","url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#how-to-step-1772204014053","name":"Also, add this script snippet to the product template\u00a0","itemListElement":[{"@type":"HowToDirection","text":"Add the following JavaScript:const WEBHOOK_URL =\u00a0\u00a0\u00a0\u00a0'Add your webhook URL here';\u00a0\u00a0function fetchJSON(url) {\u00a0\u00a0\u00a0\u00a0return fetch(url)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then((response) => {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!response.ok) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0throw new Error('Network response was not ok');\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response.json();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.catch((error) => {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.error('There was a problem with the fetch operation:', error);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0}\u00a0\u00a0function showInventoryForVariant(variantId) {\u00a0\u00a0\u00a0\u00a0const outputDiv = document.getElementById('mesa-output');\u00a0\u00a0\u00a0\u00a0outputDiv.style.opacity = 0.5;\u00a0\u00a0\u00a0\u00a0url = WEBHOOK_URL + '&variant_id=' + variantId;\u00a0\u00a0\u00a0\u00a0console.log(\"MESA fetching inventory levels data: \" + url);\u00a0\u00a0\u00a0\u00a0fetchJSON(url).then((response) => {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let data = response.response;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\"MESA inventory levels data: \", data);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let levels = data.map((object) => {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return object.location.name + ': ' + object.quantities[0].available;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let output = levels.join('');\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0outputDiv.style.opacity = 1;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0outputDiv.innerHTML = output;\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0}\u00a0\u00a0window.addEventListener('DOMContentLoaded', () => {\u00a0\u00a0\u00a0\u00a0let variantId = '{{product.selected_or_first_available_variant.id}}';\u00a0\u00a0\u00a0\u00a0showInventoryForVariant(variantId);\u00a0\u00a0\u00a0\u00a0subscribe(PUB_SUB_EVENTS.variantChange, (event) => {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Variant change event:', event);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let variantId = event.data.variant.id;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0showInventoryForVariant(variantId);\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0});"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#schema-image-511b16fbc191c234957cca91b3e08dcd","url":"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/custom-liquid-script.png","contentUrl":"https:\/\/www.getmesa.com/blog\/wp-content\/uploads\/custom-liquid-script.png","width":1746,"height":1166,"caption":"custom liquid script"}},{"@type":"HowToStep","url":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#how-to-step-1740509692574","name":"Turn \u201cOn\u201d this workflow","itemListElement":[{"@type":"HowToDirection","text":"Be sure to run your workflow once to ensure it correctly makes Shopify show inventory product levels on the product page. Then, turn \u201cOn\u201d this workflow to have it run automatically any time a user views a product page."}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.getmesa.com\/blog\/shopify-show-inventory-on-product-page\/#schema-image-2a43b395fea65c20b61254624209df14","url":"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-90.png","contentUrl":"https:\/\/www.getmesa.com\/blog\/wp-content\/uploads\/image-90.png"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.getmesa.com/blog\/wp-json\/wp\/v2\/posts\/12994","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.getmesa.com/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.getmesa.com/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.getmesa.com/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.getmesa.com/blog\/wp-json\/wp\/v2\/comments?post=12994"}],"version-history":[{"count":15,"href":"https:\/\/www.getmesa.com/blog\/wp-json\/wp\/v2\/posts\/12994\/revisions"}],"predecessor-version":[{"id":18366,"href":"https:\/\/www.getmesa.com/blog\/wp-json\/wp\/v2\/posts\/12994\/revisions\/18366"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.getmesa.com/blog\/wp-json\/wp\/v2\/media\/13011"}],"wp:attachment":[{"href":"https:\/\/www.getmesa.com/blog\/wp-json\/wp\/v2\/media?parent=12994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.getmesa.com/blog\/wp-json\/wp\/v2\/categories?post=12994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.getmesa.com/blog\/wp-json\/wp\/v2\/tags?post=12994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}