Show The Number of Products Left in Stock on Your Shopify Product Page

Andrew Durot

8 min read

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:

{% comment %} Inventory tracking on product page {% endcomment %}
            <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.

{% for variant in product.variants %}

                 <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

Show The Number of Products Left in Stock on Your Shopify Product Page

Show The Number of Products Left in Stock on Shopify

Shopify Products Left in Stock

Leave a comment

Guides

Leave a comment

LEARN MORE

Get ahead with the latest in e-commerce and Shopify Plus