Display Variant Inventory Count On Product Page - Dawn Theme, No App, Shopify 2.0

This is a tutorial for showing how many items you have left in stock. It's just notes for the above video, so if you don't understand something, watch the video!

I already made a tutorial for doing this for a product with no variants (e.g. size or color). So if you don't have variants then I recommend following that tutorial as its much easier to do. 

Watch it here: https://youtu.be/uycL8dxe2C4

If you do have variants, then the following tutorial is for you. We will use javascript to update the number whenever a customer selects a different variant. 

We are going to build this as a new type of block. Which will make it easy for you to add/remove and drag around to wherever you want it to be. 

This tutorial is for Dawn, as well as all the other free Shopify 2.0 themes e.g. Craft, Taste, Sense, Crave etc...

If you have a different theme, you will need at least a beginner knowledge of javascript. If you don't know any code and need help, then please get in touch via my contact form. 

Let's begin. 

Step 1: Create the block schema

Inside main-product.liquid we will add the following code as a block. I put mine after the quantity selector block. It doesn't really matter which order you put it in, just don't mess up the schema indentation/formatting. 

{
      "type": "inventory_count",
      "name": "Inventory Count",
      "limit": 1,
      "settings": [
        {
          "type": "number",
          "id": "show_inventory_threshold",
          "label": "Show Inventory Threshold",
          "default": 0,
          "info": "Show the inventory count if it falls to this number. Leave at 0 to always show inventory."
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color"
        }
      ]
    },

Step 2: Create the block

I put this code directly before the {%- when 'popup' -%}. 

{%- when 'inventory_count' -%} 
  <div id="inventory-{{ section.id }}" {{ block.shopify_attributes }} style="color: {{ block.settings.text_color }};"> 
{% if product.selected_or_first_available_variant.inventory_quantity <= block.settings.show_inventory_threshold or block.settings.show_inventory_threshold == 0 %}
<p>Only <strong>{{ product.selected_or_first_available_variant.inventory_quantity }}</strong> left in stock</p>
{% endif %}
</div>

Step 3: Add the block to the page via theme editor

Open your theme customizer and visit the product page. You should be able to add the block and see it appear. 

You will notice that it doesn't change the number when you select a different variant. 

Step 4: Adding Javascript 

Open a file called global.js and search for the block where the function renderProductInfo() is defined. 

We are going to add code in 3 places: 

4a: Add code inside renderProductInfo()

On a new line, under the line that starts with const price, let's assign our new block to a variable: 

const inventory = document.getElementById(`inventory-${this.dataset.section}`);

On a new line under the line that starts with if (price), add this line, which unhides the block and triggers updateInventory() function: 

if (inventory) inventory.classList.remove('visibility-hidden'), this.updateInventory(html);

4b: Add a updateInventory() function

Under the entire renderproductInfo() function block, add a new function:  

updateInventory(html) {
    const id = `inventory-${this.dataset.section}`;
    const destination = document.getElementById(id);
    const source = html.getElementById(id);
  
    if (source && destination) destination.innerHTML = source.innerHTML;
  }

4c: Add code to setUnavailable()

This is a just-in-case thing, when a variant is unavailable we probably want to hide the stock count. By default the price is hidden so the stock count probably should be hidden too. 

On a new line under const price, we need to define our inventory variable again:

const inventory = document.getElementById(`inventory-${this.dataset.section}`);

And at the bottom of the function, hide the inventory:

if (inventory) inventory.classList.add('visibility-hidden');

Back to blog

2 comments

Thank you for this clear tutorial! I´ve added it to my shop, but it says ´10 in stock´ for every single product and that is not correct. I have way more products… is this actually linked to the official amount in stock or is it just a marketing trick and you just pick a number? Hope to hear from you!

Chris

Thanks for the Tutorial! Works great!!

Sridhar Rajagopal

Leave a comment

Please note, comments need to be approved before they are published.