How to display variant inventory count on Shopify product pages

How to display variant inventory count on Shopify product pages

A user selects the red variant, without ever realizing that there are only 3 units in stock as opposed to 200. They add the product to their cart and eventually decide to leave the page to “think about it” and never return to complete the purchase. With a simple note on the page stating “Only 3 left”, the product would have been purchased immediately.

Showing inventory counts per variant is one of the simplest conversion tricks on Shopify. It creates urgency without fake countdown timers or flashy pop-ups. Just a real number, tied to a real variant, updated in real time. The Baymard Institute found that 32% of shoppers check stock availability before purchasing, and showing low-stock indicators lifts add-to-cart rates by up to 11% according to a 2024 Invesp study on scarcity psychology.

This guide covers four ways to show variant-level inventory on your product page, from no-code theme settings to custom Liquid. We also cover what NOT to do, because fake scarcity backfires fast.

In this post

Why showing variant inventory counts works

Scarcity isn’t just a tactic. It’s one of the six universal drivers of human behavior, according to psychologist Robert Cialdini. And online, it can have a powerful impact on your customers’ behavior in the cart.

When a shopper sees “Only 4 left in stock” next to a specific variant of a product they are interested in, three things are generally true.

  1. Decision speed increases. The fear of missing out compresses the “I will come back later” window into “I should buy now.”
  2. Trust goes up. Real inventory data signals transparency. The store is not hiding information or faking urgency.
  3. Return intent drops. Shoppers who buy under genuine scarcity are less likely to have buyer’s remorse than those pushed by countdown timers.

Use this technique for products with real limited inventory. Think one-of-a-kind handmade products, limited colors, seasonal product releases or low-MOQ products (like embroidery or screen printing with long setup times). 10,000 units of white t-shirts in stock doesn’t tell customers much. You need to set a threshold to make this clear.

Method 1: built-in theme settings (easiest)

Some Shopify themes may include a built in stock indicator that you just need to turn on!

All Dawn themes (and most free OS 2.0 themes): Theme editor > Product page template > product section. Check “Show inventory quantity”. Dawn theme allows you to set a threshold for displaying quantity (e.g. you can show it only when inventory is 10 or 5 instead of 50).

Prestige, Impact, Impulse, Warehouse: These paid themes have ‘Product’ content sections with different settings in the Visual Builder. Usually the paid themes have an option to include an “Inventory indicator” or “Stock countdown” in the product block settings. The exact names might vary, but they usually are right after or inside the product content section settings.

What this looks like: A line below the variant selector that says “Only 3 left!” or “In stock” depending on the current inventory level. This line updates dynamically as the customer selects different color or size variants, as the theme is re-rendering the product information.

Pros: zero code, zero apps, zero cost. Cons: limited styling control, threshold options vary by theme, and some themes only show “In stock” or “Sold out” without actual numbers.

Method 2: custom Liquid code

If theme doesn’t support inventory counts natively (or you want control how it’s displayed) you can add a small piece of Liquid code to the product template.

Here is a basic implementation that shows the count only when stock is below a threshold:

{% for variant in product.variants %}
  {% if variant == current_variant %}
    {% if variant.inventory_management == 'shopify' %}
      {% if variant.inventory_quantity <= 10 and variant.inventory_quantity > 0 %}
        <p class="variant-stock-count">
          Only {{ variant.inventory_quantity }} left in stock
        </p>
      {% elsif variant.inventory_quantity == 0 %}
        <p class="variant-stock-count sold-out">Sold out</p>
      {% endif %}
    {% endif %}
  {% endif %}
{% endfor %}

This snippet does three things: it checks if Shopify inventory tracking is enabled for the variant, shows the count only below 10 units, and displays “Sold out” at zero. You can change the threshold number to whatever makes sense for your store.

Liquid is rendered on the server, so using something like `variant` will not increment the inventory count because the themes render change of variants using JavaScript, which Liquid is not. You would need a small amount of code to update the text when the variant changes. Most themes fire an event for `variant:changed` etc and you would need to add an on:change event to listen to it.

Here is the JavaScript part you would add to your theme’s product page:

document.addEventListener('variant:changed', function(event) {
  const variant = event.detail.variant;
  const stockEl = document.querySelector('.variant-stock-count');
  if (!stockEl) return;
  
  if (variant.inventory_quantity <= 10 && variant.inventory_quantity > 0) {
    stockEl.textContent = 'Only ' + variant.inventory_quantity + ' left in stock';
    stockEl.style.display = 'block';
  } else if (variant.inventory_quantity === 0) {
    stockEl.textContent = 'Sold out';
    stockEl.style.display = 'block';
  } else {
    stockEl.style.display = 'none';
  }
});

The event name changes between themes. Dawn uses “changed”, Prestige uses “variant-change”. Check the theme’s JavaScript or ask your developer.

A note on inventory_quantity exposure

Variant.inventory_quantity in Shopify is by default accessible in Liquid templates. This means that unless you change it, variant.inventory_quantity will output in your site’s source code, showing how much of a particular item is in stock. For most stores this is no big deal, but for stores that sell high-demand items, it may be wise to display that there are “Less than 5 left in stock” rather than the exact figure, as this information can be used by competitors to plan a stock clearance sale by simply scrapping your site for information.

Method 3: Shopify apps

Most visual control over inventory display can be gained through using an app. While there are some apps that do inventory display as a primary feature, there are also several apps on the Shopify App Store that offer features like color swatches and variant pickers which can also display inventory in some way.

What to look for in a stock indicator app:

  • Threshold-based display (show count only below X units)
  • Color-coded badges (green for in-stock, orange for low, red for last few)
  • Updates dynamically when the shopper switches variants
  • Works with your theme’s variant selector (not only its own)
  • Does not add another external JavaScript file that slows your page down

Many product page apps can enhance your product pages by showing an inventory count. There are some apps that deal with displaying variants, such as variant image apps that might filter images per variant or display product swatches. However, most of these apps will hide sold out variants. Here are some apps that display inventory count as well.

Many themes and product pages come with built in app support, so check before you install!

Method 4: metafield-based display

This is an advanced solution, showing you how to display inventory accurately (opposite to how Shopify normally displays it) by storing the rounded display inventory quantity in a metafield.

Why bother? Two reasons:

  1. Privacy. You can store “Less than 5” or “Low stock” in a metafield instead of exposing the exact number.
  2. Custom messaging. Instead of just a number, you can write “Selling fast, 3 left” or “Last one, grab it” and update it via Shopify Flow automation.

Insert variant metafield setting. Setting: custom:stock_message, type: single-line text. Then use it in your theme::

{% if current_variant.metafields.custom.stock_message != blank %}
  <p class="stock-urgency">
    {{ current_variant.metafields.custom.stock_message }}
  </p>
{% endif %}

You can automate this with Shopify Flow. Create a workflow that triggers when inventory changes, checks the quantity, and writes the appropriate message to the metafield. When inventory hits 5, write “Only 5 left.” When it hits 0, write “Sold out, back soon.” When it goes above 10, clear the metafield so nothing shows.

Best practices and common mistakes

Displaying your current inventory can be a very powerful tool; or a very ugly one, depending on how you do it.

Do this

  • Set a display threshold. Show counts only when inventory is below 10 (or 5, depending on your velocity). Nobody is impressed by “847 in stock.”
  • Update in real time. If the count does not change when a shopper selects a different variant, you have a broken implementation. This is especially important for products with many color or size variants.
  • Match the visual style. The stock indicator should look like it belongs on your product page. Use your brand colors, your font, your spacing. A bright red “HURRY!” badge on a minimalist store looks like spam.
  • Combine with swatch UX. When you pair inventory counts with visual color swatches instead of dropdowns, shoppers can scan availability at a glance. A swatch that says “2 left” under it is more powerful than a dropdown that hides the count until after selection.

Avoid this

  • Never fake the numbers. If you have 500 units but show “Only 3 left,” you are lying to customers. Shopify’s inventory tracking is the source of truth. Use it.
  • Do not pair inventory counts with countdown timers. One is honest (stock data). The other is artificial (time pressure). Together they scream manipulation. Pick one.
  • Do not show inventory for every variant. If a product has 30 size/color combinations, showing “In stock” next to each one clutters the page. Only show counts for the currently selected variant.
  • Do not forget mobile. The stock indicator needs to be visible on mobile without scrolling past the add-to-cart button. If shoppers cannot see it, it does nothing.

Pairing inventory counts with variant images for maximum impact

An inventory count is only useful to a customer if they are going to be persuaded to buy now. By showing an inventory count the urgency to buy is created, but then the product gallery can betray that by showing an alternative colour to the one that has been chosen, in this case the shopper has chosen the navy blue version but the white version is shown.

This is where variant-specific image filtering makes the inventory count more effective. When a shopper selects a color:

  1. The gallery updates to show only images for that color
  2. The inventory count updates to show stock for that specific variant
  3. The shopper sees the right product AND the right urgency at the same time

Apps like Rubik Variant Images handle the gallery filtering side. They show only the images that belong to the selected variant and hide everything else, including hiding sold-out variant swatches if you want. The inventory count display then layers on top of this clean variant experience, whether through native theme settings, Liquid, or a separate app.

If you list individual products in different colors (such as blue, red, black etc) to tally up separate sales figures (common with apparel and footwear), Rubik Combined Listings also allows you to display these products together on your collection pages, with colour swatches. Each product linked together in the Rubik Combined Listings will have its own stock figures, so if a customer clicks on a different swatch, the up to date stock figures will be displayed.

Rubik Variant Images swatches with hide sold-out option on Shopify product page

Which method should you use?

MethodDifficultyCostDynamic updateStyling controlBest for
Theme settingsEasyFreeYes (built-in)LimitedStores on Dawn, Prestige, Impact
Custom LiquidMediumFreeNeeds JS callbackFullDevelopers, custom themes
AppsEasy$0-15/monthYes (built-in)GoodNon-technical merchants
Metafields + FlowAdvancedFree (Shopify plan)Automated via FlowFullStores with custom messaging needs

Theme settings should be enough for most stores. If your theme doesn’t support theme settings, jump to Method 2 (Liquid) or Method 3 (Apps). If you need custom urgency messaging beyond just a number, use Method 4.

See the live demo store, or read the getting started guide.

Frequently asked questions

Does showing inventory count affect page speed?

No. The native theme settings in Liquid to enable these features do not add any external requests to your store. The data for the inventory is already in the product JSON which is included in every shopify page by default. While some Apps may include a small script tag to enable certain features, typically an inventory display App will be very light weight (typically under 5 KB).

Can I show inventory counts per variant on collection pages?

Not easily with native Shopify. Collection pages only show products, not their variants. Most apps will add variants for different colors and display inventory on the collection page for those variants. Alternatively you can use combined listings where each color is a separate product with its own inventory. In this case collection pages will also naturally show the stock level for each product.

Should I show exact numbers or ranges like “less than 5”?

Exact numbers create stronger urgency. “Only 2 left” is more compelling than “Low stock.” But if your competitors could use your data against you, then you should use ranges. For most retailers, using exact inventory numbers is fine and more effective.

What if I sell one-of-a-kind items with stock of 1 per variant?

Show “Last one available” or “1 left” for every variant. Use this for vintage shops, handmade shops, and custom apparel shops. Recommend pairing this with “Hide sold out variants” so customers only see products that are in stock.

Does the inventory count update when another customer buys while I am on the page?

Not with Liquid theme settings or the native theme included with Shopify, as this count is what the store will display to customers at the time of page load. Real-time updates such as “Someone just bought this” require additional functionality through third-party apps or a WebSocket connection/polling API, and most stores are fine with page-load accuracy.