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:
main-product.liquid
section-main-product.css

📌 Note: These steps require to edit coding file that found in the new theme, example: Aroma, Kiddy, Vivid & etc. For 2020 or older themes, may refer this link

In this article :

Display product quantity on product page
Display product SKU on product page
Change the colour of the wording

⚠️ Kindly take note:

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 > sections > main-product.liquid
Step 2 : Look for {% app_snippet 'product/button' %} and add <div id="product-stock-display"></div> code above it.



Step 3 : Save

Step 4 : Look for VariantSelector.onVariantChange(variant) and paste code below it.

document.getElementById('product-stock-display').innerHTML = ''; if(variant.available && variant.inventory_quantity > 0){ document.getElementById('product-stock-display').innerHTML = variant.inventory_quantity+' piece available'; if(variant.title != 'Default Title') document.getElementById('product-stock-display').innerHTML = +variant.inventory_quantity+' piece available'; }

📌 Note : You can change the word "`piece available`" into your preferred text



Step 5 : Save and you're done

Attached GIF image as extra reference:

2. Display product SKU on product page

📌 Important Note : Make sure you have filled in the SKU section at products page to display SKU on product page.



Step 1: Go to EasyStore Admin > Channels > Online Store > Edit source > sections > main-product. Liquid

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



Step 3 : Save

Step 4 : Look for VariantSelector.onVariantChange(variant) and paste code below it. if (variant.available)

Copy this code

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

Step 5 : Save

Result :



💡 Tips: To switch position between SKU & product quantity display, change the code position <div id="product-sku-display"></div> & <div id="product-stock-display"></div> will do.



Result:

3. Change the colour of the wording

Step 1: Go to EasyStore Admin > Channels > Online Store > Edit source > assets > section-main-product.css

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 section-main-product.css file. You may get the color hex code (#EA2121) of your preferred color here



Step 3 : Save and here's the result

Updated on: 23/10/2023