> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Display product quantity & SKU on product page (2020 themes)

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

|| 📌 Note: These steps require to edit coding file that found in the theme come before Candy theme, example: X-force, Prisme, DOUX, & etc. For 2022 themes, may refer [this link](/en/article/display-product-quantity-sku-on-product-page-2022-themes-1lmo8a8/)

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_6dwrvg.png)

###### In this article :
1.  [Display product quantity on product page ](#1-1-display-product-quantity-on-product-page)   
2.  [Display product SKU on product page ](#1-2-display-product-sku-on-product-page)   
3.  [Change the colour of the wording](#1-3-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.
    
![](https://storage.crisp.chat/users/helpdesk/website/680b3bfa422dc800/77eccda8-9e01-47a2-9366-4a6a64_rtves8.png)

---
# 1. Display product quantity on product page

**Step 1:** Go to [EasyStore Admin](https://admin.easystore.co/) > 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>`

|| 📌 **Note**: For larger font, you can replace **"h6"** with **"h3"** or **"h4"**

![](https://storage.crisp.chat/users/helpdesk/website/ced8852a00673000/34d3071b-4f44-46de-babb-9ced48_zc5qel.png)

**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(''); }`

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

![](https://storage.crisp.chat/users/helpdesk/website/e7db9b6695429000/90dca720-6d0b-4c2b-a178-4efa0b_1cn3mbi.png)

**Step 5** : Save and you're done

**Attached GIF image as extra reference:**

![](https://storage.crisp.chat/users/helpdesk/website/d5873a1c6ad3e800/63658ef9-fd7c-4ee4-bfff-9d2696_7qhopu.gif)

---
# 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.

![](https://storage.crisp.chat/users/helpdesk/website/99574a66ede81800/8a2cb742-71cc-462e-b34b-22fcb1_1iviqk1.png)

**Step 1:** Go to [EasyStore Admin](https://admin.easystore.co/) > 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' %}**

![](https://storage.crisp.chat/users/helpdesk/website/450f6aa8e848cc00/b9abd0d8-da23-47f9-8cbc-3b1856_idwack.png)

**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)**

![](https://storage.crisp.chat/users/helpdesk/website/65687beba4ed2c00/1bcc4481-71db-45bd-a274-57d985_1fno4pa.png)

**Step 5 :** Save

**Result :**

![](https://storage.crisp.chat/users/helpdesk/website/1268f4a068ba3800/3d9df302-5f05-493a-abc5-d2a893_1wefolx.png)

---
# 3. Change the colour of the wording

**Step 1:** Go to [EasyStore Admin](https://admin.easystore.co/) > 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](https://www.rapidtables.com/web/color/html-color-codes.html)**

![](https://storage.crisp.chat/users/helpdesk/website/1d487d58e7ea7800/963b2d1c-8c42-4876-8bc1-69f164_oab2qj.png)

**Step 3 :** Save and here's the result

![](https://storage.crisp.chat/users/helpdesk/website/d0e60bd36ff20000/1fd634a6-0b77-4b4c-84d9-8c37b3_1nj3nlq.png)