This article will guide you to have product quantity & SKU displayed on your website. With this, your customers would be able to identify how many products are left. When clicked, it will expand to show the available quantity for all variations too!

By having product quantity displayed on the product page, there are 2 files that need to be edited:

• product.liquid
• timber.js

In this article :

1. Display product quantity on product page
2. Display product SKU on product page
3. Change the colour of the wording
   

• Above all code editing, you will need to re-edit the code again if you switch to a new theme template
  
• We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons
  
• Make sure that you have selected EasyStore tracks inventory of this product
  
• Make sure the inventory quantity is not 0nor else the product quantity will not be displayed on the product page.
  
  

1. Display product quantity on product page

Step 1: Go to EasyStore Admin > Channels > Online Store > Edit source > under templates > product.liquid

Step 2 : Look for {% app_snippet 'product/button' %} and add the code below

<div id="product-stock-display" class="h6"></div>

Step 3 : Save

Step 4 : Select timber.js under assets and look for // Select a valid variant if available

and add the code below before it

if(variant.available && variant.inventory_quantity > 0){ $('#product-stock-display').text(variant.inventory_quantity+' piece available'); if(variant.title != 'Default Title'){ $('#product-stock-display').text(variant.title+' '+variant.inventory_quantity+' piece available'); } }else{ $('#product-stock-display').text(''); }

Step 5 : Save and you're done

Attached GIF image as extra reference:

2. Display product SKU on product page

Step 1: Go to EasyStore Admin > Channels > Online Store > Edit source > templates > product.liquid

Step2 ：Add this code <div id="product-sku-display" class="h6"></div> here before {% app_snippet 'product/field_bottom' %}

Step 3 : Save

Step 4 : Select timber.js from assets and look for // Select a valid variant if available

if (variant.available)

Copy this code

if(variant.available && variant.sku != ''){$('#product-sku-display').text('SKU: '+variant.sku);}else{$('#product-sku-display').text('');}

and paste it before // Select a valid variant if available if (variant.available)

Step 5 : Save

Result :

3. Change the colour of the wording

Step 1: Go to EasyStore Admin > Channels > Online Store > Edit source > theme.scss

Step2 : Copy this code

Product Quantity:

#product-stock-display { color: #000000; }

Product SKU:

#product-sku-display { color: #000000; }

and paste it at the bottom of the theme.scss file. You may get the color hex code (#EA2121) of your preferred color **here**

Step 3 : Save and here's the result

Updated on: 22/01/2024