Show The Number of Products Left in Stock on Your Shopify Product Page
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.
Guides
- How To Create CUSTOM PRODUCT OPTIONS on Shopify 2.0
- How To Open External Links In A New Tab - Easy Shopify Tutorial
- How To Add Before And After Slider To Shopify - Easy 2022 Tutorial
- How To Add a Background Video To Shopify For Free
- How To Embed TikTok Videos To Any Shopify Page For Free
- Create Product Bundles Without The App - 2022 Easy Shopify Tutorial!
- Add Back to Top Button on Shopify Using Code: Detailed Tutorial
- How to Add A Custom Cart Icon on Shopify Using Code: Detailed Tutorial
- How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code
- How to Add Sales Countdown Timer to Your Shopify Store
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Ask How Customers Heard About Your Store On The Cart Page - 2022 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2022 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2022
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store
LEARN MORE
Get ahead with the latest in e-commerce and Shopify Plus

How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours