You can show the number of products left in stock on your Shopify product page using code, and this DIY tutorial by Ecom Experts is here to help you out.
Showing the number of products left in stock on your product page keeps you and your customers informed of how fast your products are moving or if they aren’t at all. Keeping count of the number of products left in stock lets you know how well your store is doing in terms of sales and when to put up the sold-out sign.
Monitoring stock is also a great marketing strategy to help you decide when to change your marketing plan or continue with the current one you are using.
Show The Number of Products Left in Stock on Shopify
Step 1: Duplicate your live theme
From your Shopify admin go to Online store and choose themes. Next to the live theme click on Actions and choose Duplicate. This way you will have a backup of your live theme in case you miss some step and mess up your store.
Step 2: Edit Product-Template.liquid
Now that you have the duplicate of your theme you can click on Actions again, but this time choose Edit Code.
From the navigation to the left go to Sections directory and choose Product-template.liquid. Find the place you want to show your message, maybe above add to cart button, and paste the following code:
<div id="variant-inventory" class="{% unless current_variant.available %} hide {% endunless %}">
{% if current_variant.inventory_management == "shopify" and current_variant.inventory_policy != "continue" %}
We have {{ current_variant.inventory_quantity }} in stock.
{% else %}
This product is available.
{% endif %}
</div>
In case you don't have multiple variants you can Click on Save and the message of quantity should be visible on your Site.
Step 3: Edit Product-Template.liquid
In case you have multiple variants you will need to add one additional line in the product-template.liquid.
Paste the following code right above the code you just pasted in the product-template.liquid and click on Save.
<div InventoryManagment data-id="{{variant.id}}" data-inventory="{{variant.inventory_quantity}}" style="display:none;"></div>
{% endfor %}
Step 4: Edit Theme.js
From the navigation to the left scroll down to the assets directory and choose theme.js. In this new js file search for the "variantchange". It's important to place the following code inside the variantchange block. In our case, we are using the Debut theme, it should be on the line 748.
let inventoryHash = document.querySelectorAll('[inventorymanagment]');
debugger;
Under that piece of code paste the following
Array.from(inventoryHash).forEach(
(Selectedvariant)=>{
if(Selectedvariant.dataset.id == variant.id){
if(Selectedvariant.dataset.inventory > 0)
{
$("#variant-inventory").html("We have "+ Selectedvariant.dataset.inventory +" in stock");
}
else{
$("#variant-inventory").html("Sold out!");
}
}
}
);
Click on Save and your message of quantity should be visible and working on your site.
Shopify Products Left in Stock
As a Shopify store owner, you and your customers must be kept updated on the number of products left in stock. This would prevent customers from placing orders on already sold-out products.
Let us know if this coding tutorial on how to Show The Number Of Products Left In Stock on the Shopify Product Page. Check out our other Shopify coding tutorials on Ecom Experts.
1 comment
Dear Team, I’ve followed the instructions very carefully in your video and the quantity of the first variant is displayed correctly but when I switched to a different variant the quantity did not change. I’ve saved both the modified product template.liquid and theme.js in 2 notepad files and will you be able to assist to please have a look?
Thank you so much for your help!
Kind Regards
Chantel