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
orfeatured-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.
- Open
-
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 <p>
tags. Make sure to include {{ current_variant.inventory_quantity }}
in your <p>
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
ortheme.js
. -
Find
theme.Product = (function()
. Belowthis.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 <p>
tags. Make sure to include ${variantStock[variant.id]}
in your <p>
tags.
- Click Save.
Versions 17.9.0 and above
- Open
theme.js.liquid
ortheme.js
. -
Find
theme.Product = (function()
. Belowthis.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 <p>
tags. Make sure to include ${variantStock[variant.id]}
in your <p>
tags.
- Click Save.