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

# 【官網設計】如何在商品頁面顯示「商品庫存數量」

此文章將講解如何在商品頁面顯示目前商品的庫存數量，路徑會分為 「Aroma 或其後發佈之佈景主題（新版主題）」和「Candy 或之前發佈之佈景主題（舊版主題）」

# Aroma 或其後發佈之佈景主題

此方法適用於 Aroma 或其後發佈之佈景主題主題（新版主題）

###### 步驟一 ： 編輯原始碼

1. 前往編輯原始碼 → 找到 main-product.liquid 文件 → 找到 {% app\_snippet 'product/button' %}  → 然後在前面加上  

```
<div id="product-stock-display"></div>
```

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

2. main-product.liquid 文件 → 找到 selectCallback → 在以下截圖位置新增以下代碼

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

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

💡 小提醒：你可自由更換代碼中的中文字眼「只剩」「件」；若更換文字位置可能會導致代碼錯誤而無法顯示在前台

###### 步驟二：點擊儲存，完成！

### 設定結果：

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

# Candy 或之前發佈之佈景主題（舊版主題）

此方法適用於 Candy 或之前佈景主題。

###### 步驟一 ： 編輯原始碼

1. 前往編輯原始碼 → templates/product.liquid 裡搜尋 {% app\_snippet 'product/button' %} → 在下方新增這段  <div id="product-stock-display" class="h6"></div>

如果需要修改為較大的字體可以把 "h6" 換成"h3"或"h4"

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

2. 接著到 assets/timber.js 裡搜尋 Select a valid variant if available 然後在上方貼上這段程式

```html
if(variant.available && variant.inventory_quantity > 0){
$('#product-stock-display').text(' 熱賣中！只剩'+variant.inventory_quantity+'件'); if(variant.title != 'Default Title'){
$('#product-stock-display').text(' 熱賣中！'+variant.title+' 只剩 '+variant.inventory_quantity+'件');
}
}else{
$('#product-stock-display').text('');
}
```

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

小提示：你也可以自行在代碼裡更換「熱賣中」字眼！

###### 步驟二：點擊儲存，完成！

結果如下：

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/31_45ejwm.gif)

若要修改商品數量的字體顏色，可以參考以下步驟：

步驟一：萬網 Theme.scss 原始碼文件

步驟二：複製以下原始碼

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

步驟三：粘貼在 Theme.scss 裡，顏色編號可以參考 [這裡](https://www.rapidtables.com/web/color/html-color-codes.html)。

步驟四：點擊儲存，完成！