Show the remaining inventory of a variant on product pages

You can add a message on the product page or featured product section that displays the number of items you have in stock when inventory runs low on a product variant. For this message to display, you need to activate inventory tracking for the product.

The steps for this customization vary depending on your theme. Click the button for your theme and follow the instructions.

Steps for Debut

Edit `theme.liquid`

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click the ... button > Edit code.
From the Layout directory, open theme.liquid.
Find the closing </head> tag in the code. On a new line above the closing </head> tag, paste the following code:

<script>
  var variantStock = {};
</script>

Click Save.

Edit `product-template.liquid` or `featured-product.liquid`

From the Sections directory, open product-template.liquid or featured-product.liquid:
- Open product-template.liquid to add this feature to product pages.
- Open featured-product.liquid to add this feature to the featured product section on the home page.
Find {% form 'product'. Above this tag, add the following code:

<div class="inventoryWrapper">
  {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include {{ current_variant.inventory_quantity }} in your  tags.

At the bottom of the file, add the following code:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

Click Save.

Edit `theme.js.liquid` or `theme.js`

The changes that you need to make to these files depend on the version of Debut that you're using.

Versions 17.8.0 and below

Open theme.js.liquid or theme.js.
Find theme.Product = (function(). Below this.selectors = {, add the following code:

inventoryHtml: '.inventoryWrapper',

In the same file, find _updateAddToCart: function(evt) {. Directly below, add the following code:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

Find if (variant.available) {. Before the } else { statement, add the following code:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
      inventoryWrapper.innerHTML = inventoryHtml;
    } else {
      inventoryWrapper.innerHTML = '';
}

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include ${variantStock[variant.id]} in your  tags.

Click Save.

Versions 17.9.0 and above

Open theme.js.liquid or theme.js.
Find theme.Product = (function(). Below this.selectors = {, add the following code:

    inventoryHtml: '.inventoryWrapper',

In the same file, find _setProductState: function(evt) {. Directly below, add the following code:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

In the same function, find if (!variant) {. After the closing } bracket, add the following code:

else {
  if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
    const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
    inventoryWrapper.innerHTML = inventoryHtml;
  } else {
    inventoryWrapper.innerHTML = '';
  }
}

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include ${variantStock[variant.id]} in your  tags.

Click Save.

Steps for Brooklyn

Edit `theme.liquid`

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click the ... button > Edit code.
From the Layout directory, open theme.liquid.
Find the closing </head> tag in the code. On a new line above the closing </head> tag, paste the following code:

<script>
  var variantStock = {};
</script>

Click Save.

Edit `product-template.liquid` or `featured-product.liquid`

From the Sections directory, open product-template.liquid or featured-product.liquid:
- Open product-template.liquid to add this feature to product pages.
- Open featured-product.liquid to add this feature to the featured product section on the home page.
Find {% form 'product'. Above this tag, add the following code:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include {{current_variant.inventory_quantity }} in your  tags.

At the bottom of the file, add the following code:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

Click Save.

Edit `theme.js.liquid` or `theme.js`

Open theme.js.liquid or theme.js.
Find theme.Product = (function(). Below this.selectors = {, add the following code:

inventoryHtml: '.inventoryWrapper',

In the same file, find if (variant.available) {. Before the } else { statement, add the following code:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include ${variantStock[variant.id]} in your  tags.

Click Save.

Steps for Simple

Edit `theme.liquid`

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click the ... button > Edit code.
From the Layout directory, open theme.liquid.
Find the closing </head> tag in the code. On a new line above the closing </head> tag, paste the following code:

<script>
  var variantStock = {};
</script>

Click Save.

Edit `product-template.liquid` or `featured-product.liquid`

From the Sections directory, open product-template.liquid or featured-product.liquid:
- Open product-template.liquid to add this feature to product pages.
- Open featured-product.liquid to add this feature to the featured product section on the home page.
Find {% form 'product'. Above this tag, add the following code:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include {{current_variant.inventory_quantity }} in your  tags.

At the bottom of the file, add the following code:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

Click Save.

Edit `theme.js.liquid` or `theme.js`

Open theme.js.liquid or theme.js.
Find theme.Product = (function(). Below this.selectors = {, add the following code:

inventoryHtml: '.inventoryWrapper',

In the same file, find if (variant.available) {. Before the } else { statement, add the following code:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include ${variantStock[variant.id]} in your  tags.

Click Save.

Steps for Minimal

Edit `theme.liquid`

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click the ... button > Edit code.
From the Layout directory, open theme.liquid.
Find the closing </head> tag in the code. On a new line above the closing </head> tag, paste the following code:

<script>
  var variantStock = {};
</script>

Click Save.

Edit `product-template.liquid` or `featured-product.liquid`

From the Sections directory, open product-template.liquid or featured-product.liquid:
- Open product-template.liquid to add this feature to product pages.
- Open featured-product.liquid to add this feature to the featured product section on the home page.
Find {% form 'product'. Above this tag, add the following code:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include {{current_variant.inventory_quantity }} in your  tags.

At the bottom of the file, add the following code:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

Click Save.

Edit `theme.js.liquid` or `theme.js`

Open theme.js.liquid or theme.js.
Find theme.Product = (function(). Below this.selectors = {, add the following code:

inventoryHtml: '.inventoryWrapper',

In the same file, find if (variant.available) {. Before the } else { statement, add the following code:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include ${variantStock[variant.id]} in your  tags.

Click Save.

Steps for Boundless

Edit `theme.liquid`

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click the ... button > Edit code.
From the Layout directory, open theme.liquid.
Find the closing </head> tag in the code. On a new line above the closing </head> tag, paste the following code:

    <script>
  var variantStock = {};
    </script>

Click Save.

Edit `product-template.liquid` or `featured-product.liquid`

From the Sections directory, open product-template.liquid or featured-product.liquid:
- Open product-template.liquid to add this feature to product pages.
- Open featured-product.liquid to add this feature to the featured product section on the home page.
Find {% form 'product'. Above this tag, add the following code:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include {{current_variant.inventory_quantity }} in your  tags.

At the bottom of the file, add the following code:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

Click Save.

Edit `theme.js.liquid` or `theme.js`

Open ‘theme.js.liquid’ *or *‘theme.js’.
Find theme.Product = (function(). Below var selectors = {, add the following code:

    inventoryHtml: '.inventoryWrapper',

In the same file, find $(selectors.SKU, this.$container).html(variant.sku);. Directly below, add the following code:

    if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include ${variantStock[variant.id]} in your  tags.

Click Save.

Steps for Narrative

Edit `theme.liquid`

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click the ... button > Edit code.
From the Layout directory, open theme.liquid.
Find the closing </head> tag in the code. On a new line above the closing </head> tag, paste the following code:

    <script>
      var variantStock = {};
    </script>

Click Save.

Edit `product-template.liquid` or `featured-product.liquid`

From the Sections directory, open product-template.liquid or featured-product.liquid:
- Open product-template.liquid to add this feature to product pages.
- Open featured-product.liquid to add this feature to the featured product section on the home page.
Find {% include 'product-form' %}. Above this tag, add the following code:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and  current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
      {% endif %}
</div>

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include {{current_variant.inventory_quantity }} in your  tags.

At the bottom of the file, add the following code:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

Click Save.

Edit `custom.js`

Open custom.js.
At the bottom of the file, add the following code:

    var sections = window.theme.sections;
    var inventorySelectorHtml = '.inventoryWrapper';
    var productExtension = {
      init: function() {
          this.on('variant_change_successful', this._updateInventory.bind(this));
          this.on('variant_change_undefined', this._removeInventory.bind(this));
      },
      _removeInventory: function() {
    $(inventorySelectorHtml, this.container).html('');
      },
      _updateInventory: function(event, instance, product, variant) {
    if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      $(inventorySelectorHtml, this.container).html(`<p>Stock: ${variantStock[variant.id]}</p>`);
    } else {
      $(inventorySelectorHtml, this.container).html('');
    }
  }
};
    sections.extend('product-template', productExtension);
    sections.extend('featured-product', productExtension);

The code above outputs Stock: x. You can change the wording by adjusting the content in the  tags. Make sure to include ${variantStock[variant.id]} in your  tags.

Click Save.

Show the remaining inventory of a variant on product pages

Steps for Debut

Edit theme.liquid

Edit product-template.liquid or featured-product.liquid

Edit theme.js.liquid or theme.js

Versions 17.8.0 and below

Versions 17.9.0 and above

Steps for Brooklyn

Edit theme.liquid

Edit product-template.liquid or featured-product.liquid

Edit theme.js.liquid or theme.js

Steps for Simple

Edit theme.liquid

Edit product-template.liquid or featured-product.liquid

Edit theme.js.liquid or theme.js

Steps for Minimal

Edit theme.liquid

Edit product-template.liquid or featured-product.liquid

Edit theme.js.liquid or theme.js

Steps for Boundless

Edit theme.liquid

Edit product-template.liquid or featured-product.liquid

Edit theme.js.liquid or theme.js

Steps for Narrative

Edit theme.liquid

Edit product-template.liquid or featured-product.liquid

Edit custom.js

Edit `theme.liquid`

Edit `product-template.liquid` or `featured-product.liquid`

Edit `theme.js.liquid` or `theme.js`

Edit `theme.liquid`

Edit `product-template.liquid` or `featured-product.liquid`

Edit `theme.js.liquid` or `theme.js`

Edit `theme.liquid`

Edit `product-template.liquid` or `featured-product.liquid`

Edit `theme.js.liquid` or `theme.js`

Edit `theme.liquid`

Edit `product-template.liquid` or `featured-product.liquid`

Edit `theme.js.liquid` or `theme.js`

Edit `theme.liquid`

Edit `product-template.liquid` or `featured-product.liquid`

Edit `theme.js.liquid` or `theme.js`

Edit `theme.liquid`

Edit `product-template.liquid` or `featured-product.liquid`

Edit `custom.js`