How to show inventory quantity on the product page on Shopify

We will see in this tutorial how you can display the stock on your shopify product page

It is important for your customer to know if you have any units left in stock for your products and it also makes your product page more attractive.

Remember that in this tutorial we will display the real stock that combines all variants. This means that it is not recommended for dropshipping stores because the notion of out of stock is not the same.

You can see the end result on this demo store : https://speed-ecom-tutorials.myshopify.com/products/product-1

Password : Speedecom

Let’s get technical ! 🙂

How to install the code

Go to the code editor of your shopify theme and open the “sections” folder.

Find the product-template.liquid file and use the search bar with Ctrl + F (or cmd + R) to find the line that contains “price”. Here is an example for the Debut theme.

If you can’t find this area try putting a random word at different places and refresh your product page to find the right spot.

You will now copy/paste the following code to that spot

<style>
.sd-items-count p { color:#ff2200; font-size:15px; padding:7px 0; margin:0; }
.sd-items-count img { float:left; width:20px !important;height:auto !important;margin:0 7px 0 0; padding:0; }
</style>
{% assign product_qty = 0 %}
{% for variant in product.variants %}
{% if variant.inventory_quantity > 0 %}
{% assign product_qty = product_qty | plus: variant.inventory_quantity %}
{% endif %}
{% endfor %}
{% if product_qty > 0 %}
<div class="sd-items-count">          
<p><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDM5LjQxMSAzOS40MTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM5LjQxMSAzOS40MTE7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8Zz4KCTxnPgoJCTxnPgoJCQk8cGF0aCBkPSJNMTkuNzA2LDIzLjQxMWMtMC4wNzYsMC0wLjE1My0wLjAxOC0wLjIyNC0wLjA1M0wzLjYzNywxNS40MzdjLTAuMTY5LTAuMDg1LTAuMjc2LTAuMjU4LTAuMjc2LTAuNDQ3ICAgICBzMC4xMDctMC4zNjIsMC4yNzYtMC40NDdsMTIuNjMyLTYuMzE1YzAuMjQ3LTAuMTIzLDAuNTQ3LTAuMDI0LDAuNjcxLDAuMjI0YzAuMTIzLDAuMjQ3LDAuMDIzLDAuNTQ3LTAuMjI0LDAuNjcxTDQuOTc5LDE0Ljk4OSAgICAgbDE0LjcyNyw3LjM2M2wxNC43MjctNy4zNjNsLTExLjU4LTUuNzljLTAuMjQ3LTAuMTI0LTAuMzQ3LTAuNDI0LTAuMjI0LTAuNjcxYzAuMTI1LTAuMjQ3LDAuNDI1LTAuMzQ1LDAuNjcxLTAuMjI0bDEyLjQ3NSw2LjIzNyAgICAgYzAuMTY5LDAuMDg1LDAuMjc2LDAuMjU4LDAuMjc2LDAuNDQ3cy0wLjEwNywwLjM2Mi0wLjI3NiwwLjQ0N2wtMTUuODQ1LDcuOTIyQzE5Ljg1OSwyMy4zOTQsMTkuNzgyLDIzLjQxMSwxOS43MDYsMjMuNDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCQk8cGF0aCBkPSJNMTkuNzA2LDM5LjQxMWMtMC4wNzYsMC0wLjE1My0wLjAxOC0wLjIyNC0wLjA1M0wzLjYzNywzMS40MzdjLTAuMjQ3LTAuMTI0LTAuMzQ3LTAuNDI0LTAuMjI0LTAuNjcxICAgICBjMC4xMjUtMC4yNDcsMC40MjQtMC4zNDUsMC42NzEtMC4yMjRsMTUuNjIxLDcuODFsMTUuNjIxLTcuODFjMC4yNDgtMC4xMjIsMC41NDctMC4wMjMsMC42NzEsMC4yMjQgICAgIGMwLjEyMywwLjI0NywwLjAyMywwLjU0Ny0wLjIyNCwwLjY3MWwtMTUuODQ1LDcuOTIyQzE5Ljg1OSwzOS4zOTQsMTkuNzgyLDM5LjQxMSwxOS43MDYsMzkuNDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCQk8cGF0aCBkPSJNMzUuNTUsMzEuNDg5Yy0wLjI3NiwwLTAuNS0wLjIyNC0wLjUtMC41di0xNmMwLTAuMjc2LDAuMjI0LTAuNSwwLjUtMC41czAuNSwwLjIyNCwwLjUsMC41djE2ICAgICBDMzYuMDUsMzEuMjY2LDM1LjgyNywzMS40ODksMzUuNTUsMzEuNDg5eiIgZmlsbD0iIzAwMDAwMCIvPgoJCQk8cGF0aCBkPSJNMTkuNzA2LDM5LjQxMWMtMC4yNzYsMC0wLjUtMC4yMjQtMC41LTAuNXYtMTZjMC0wLjI3NiwwLjIyNC0wLjUsMC41LTAuNXMwLjUsMC4yMjQsMC41LDAuNXYxNiAgICAgQzIwLjIwNiwzOS4xODgsMTkuOTgyLDM5LjQxMSwxOS43MDYsMzkuNDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCQk8cGF0aCBkPSJNMy44NjEsMzEuNDg5Yy0wLjI3NiwwLTAuNS0wLjIyNC0wLjUtMC41di0xNmMwLTAuMjc2LDAuMjI0LTAuNSwwLjUtMC41czAuNSwwLjIyNCwwLjUsMC41djE2ICAgICBDNC4zNjEsMzEuMjY2LDQuMTM3LDMxLjQ4OSwzLjg2MSwzMS40ODl6IiBmaWxsPSIjMDAwMDAwIi8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPHBhdGggZD0iTTE5LjcwNiwxMy4yMzhjLTAuMjc2LDAtMC41LTAuMjI0LTAuNS0wLjVWMC41YzAtMC4yNzYsMC4yMjQtMC41LDAuNS0wLjVzMC41LDAuMjI0LDAuNSwwLjV2MTIuMjM4ICAgIEMyMC4yMDYsMTMuMDE1LDE5Ljk4MiwxMy4yMzgsMTkuNzA2LDEzLjIzOHoiIGZpbGw9IiMwMDAwMDAiLz4KCQk8cGF0aCBkPSJNMjQuNTU1LDUuODVjLTAuMTI4LDAtMC4yNTYtMC4wNDktMC4zNTQtMC4xNDZsLTQuNDk1LTQuNDk2bC00LjQ5Nyw0LjQ5NmMtMC4xOTUsMC4xOTUtMC41MTIsMC4xOTUtMC43MDcsMCAgICBzLTAuMTk1LTAuNTEyLDAtMC43MDdsNC44NTEtNC44NUMxOS40NDcsMC4wNTMsMTkuNTc0LDAsMTkuNzA3LDBsMCwwYzAuMTMzLDAsMC4yNiwwLjA1MywwLjM1NCwwLjE0Nmw0Ljg0OSw0Ljg1ICAgIGMwLjE5NSwwLjE5NSwwLjE5NSwwLjUxMiwwLDAuNzA3QzI0LjgxMSw1LjgwMSwyNC42ODMsNS44NSwyNC41NTUsNS44NXoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
There are <span class="sd-count"><strong>{{ product_qty }}</strong></span> units left in stock.</p>
</div>
{% endif %}

If you want to put it on the featured product of your homepage, you will just have to find the file featured-product.liquid file in the sections folder.

Depending on the theme the name of the file may not necessarily be the same but if it is well coded then it will be 😉.

This tutorial is also available in video format

Hope you found this tutorial helpful !

You have any ideas for new tutorials ? Any questions about this one ? Leave me a comment 😉

Share this article

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

6 Responses

  1. This was EXCELENT and did almost exactly what I was looking for!

    One thing, is it possible to do the same thing for variants? So it shows inventory on a specific variant enventory…

    Example:
    Shoe Size
    9 (5 in stock)
    10 (2 in stock)
    11(Out Of Stock)
    12 (Out Of Stock)
    13 (1 in stock)

    instead of how it is now that shows 8 In Stock regardless of what variant you click on.

    Here’s one of my products as example…
    https://www.hellonwheelsperformanceltd.ca/products/fleece-second-gen-hardware-kit?_pos=1&_sid=c05702763&_ss=r

    1. Thank you for your comment 🙂

      Hmm, unfortunately, from what it know it is not possible on Shopify because of technical limitations, not out of lack of wanting. Shopify groups the stock of all variants together.

  2. I want to hide product variants if variant quantity is less than three. or show out of stock if variant quantity is less than three.

  3. Thank you very much! It was very easy to follow your instructions and I was able to display the total quantities remaining for the total number of variants.

    Is it easy to modifiy the code to only show the quanities for specific items with a specific tag referenced?

Leave a Reply

Your email address will not be published. Required fields are marked *