Check out my Youtube channel

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');


Want posts like this in your inbox? Subscribe to the newsletter.

Comments

7 comments
  • Fleur Kenters

    HIi ed,

    thankyou, but I am stuck at the 4a: Add code inside renderProductInfo() part... I don't find the block when I search with command F. What is the best thing I can do now?


  • Ramiz

    This is great! everything is done at my end except step 4, I did everything with precision but the variant stock is not reflecting, can you help me here please?


  • Amy Wang

    This worked perfectly! Thank you! Would you do a tutorial for the same thing to show up in the quick order list, please?


  • Monokron

    Hi,
    I commented on your youtube video for this already but I just wanted to put the question here as well. My quantities are not updating when I select a new variant. I have 4 variants, 2 sizes and 2 colors and even though all the inventories are different for the variants, it just keeps outputting 6 remaining no matter what I do. The existing Inventory status block also just keeps outputting 6. I've seen online where that block should work as yours has. I'd be really grateful if you could help me out.

    Thank you


  • Gianluca Bianchezi

    Hi Ed,

    Thank you for your help! Everything works very nice until the hiding the stock count part. If one of the variants is out of stock, the stock count does not hide. It shows "Only 0 left in stock". I tried adding the code in section 4c but it was already there in the Ride theme although it is not working since the price and the stock count still shows even when the variant is not out of stock. Could you help me with this? Thanks a lot!

    Best,
    Gian


    1 reply
    • Olu

      Hi Ed, great work. Just that the stock count shows as Only 0 left in stock", when the quantity for a selected variant is 0. The hide function that should hide the stock count when quantity is 0 doesn't seem to work. How do I resolve this issue? Please help.
      Regards


  • Tim Bickerton Work

    Hi Ed,
    I've installed the code on Dawn 9.0.0 but i think its stopped the ability to change qty in cart (- and +), the displayed sku doesn't change when the variant is selected, plus the QTY displayed in your code does not change when a different variant is selected. Domain is workplaceneckwear.com.au, message me for password. thanks Tim

    edit: I found a duplicate line of code "const inventory = document.getElementById(`inventory-${this.dataset.section}`);" which was already in my theme but i added it anyway. I've removed that and i think problem resolved but just testing still.


  • Ivan

    Hi! Thanks a lot - all was really easy to implement

    But there is one issue - the variant count does not update in the quick add menu on the main page.

    Your help will be much appreciated!