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