Product page shows in stock, even when inventory is depleted.

Shopify Plus
,
1

I recently set some of our items to reflect live inventory on shopify. Unfortunately, once the item has been sold out and no inventory remains, the product page will still show “In Stock”, although the inventory is listed as zero. Customer’s are becoming upset because they believed the item could ship immediately.

I have these items listed as “Track Inventory”, with the actual inventory count input. I also have “Continue selling when out of stock” checked, because we still want clients to be able to place orders for the items as many items are built to order.

How can we change the product page to show out of stock (OR a custom message such as “Ships in 2-3 weeks”) once the inventory count hits zero?

1 Like
2

You can only access totalInventory of a product via Storefront API.

https://shopify.dev/docs/api/storefront/2024-07/queries/product

query getProductById($handle: String!) {
  product(handle: $handle) {
    title
    totalInventory
  }
}

Fetch for it using js then capture the totalInventory

if (totalInventory > 0) // show the message

3

Sorry I’m very unfamiliar with this type of action. How would I use the code you mentioned above to both show the actual inventory, and when sold out show the message?

4

@PattersonD

Note

you need to get Storefront API access to use this code

Add this to your js file or anywhere above the theme preferably theme.liquid before body.

const STOREFRONT_ACCESS_TOKEN = {{ YOUR STORE FRONT ACCESS }};
const GRAPHQL_URL = '/api/2024-07/graphql.json';

const GRAPHQL_BODY = (query) => {
	return {
		async: true,
		crossDomain: true,
		method: 'POST',
		headers: {
			'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN,
			'Content-Type': 'application/graphql',
		},
		body: query,
	};
};

const fetchStore = async (query) => {
	if (!STOREFRONT_ACCESS_TOKEN) return;
	return await fetch(GRAPHQL_URL, GRAPHQL_BODY(query));
};

const getProductTotalInventory = async (handle) => {
	const queryGetProductTotalInventory = `
		query {
			product(handle: "${handle}") {
				title
				totalInventory
			}
		}
	`;
	const response = await fetchStore(queryGetProductTotalInventory);
	const json = await response?.json();

	return json.data?.product?.totalInventory;
}

And then add this to the location where you want to show the custom message (probably in pdp)

{% if product %}

	
Ships in 2-3 weeks

	
		Theres only  left in our stock!
	

{% endif %}

Let me know if you need help integrating the code to your theme

Cheers

5

Continue selling when out of stock is going to allow customers to add the item to cart and to not display it as out of stock.