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

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

有關的文章： [官網設計](/zh-tw/category/5a6y57ay6kit6kii-1kvbh2w/)

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

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

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

  
  
*   前往編輯原始碼 → 找到 main-product.liquid 文件 → 找到 {% app_snippet 'product/button' %} → 然後在前面加上
    
  
  
![](https://storage.crisp.chat/users/helpdesk/website/743ebc41afa2b800/d8a5603e-1ce7-4702-990e-907979_lvprli.png)  
  
*   main-product.liquid 文件 → 找到 selectCallback → 在下方新增以下代碼
  
  
  

``` 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.title+' '+variant.inventory_quantity+' piece available'; }```

  
  
  
  
  
  
![](https://storage.crisp.chat/users/helpdesk/website/afdfcc40a8004000/3e98cf48-11c9-4ef5-81ee-e5f9e1_1a8ku2b.png)  
  

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

  
  
  

### Candy 或之前發佈之佈景主題

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

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

  
  
*   前往編輯原始碼 → templates/product.liquid 裡搜尋 {% app_snippet 'product/button' %} → 在下方新增這段
    
  
  
如果需要修改為較大的字體可以把 "h6" 換成"h3"或"h4"  
  
![](https://storage.crisp.chat/users/helpdesk/website/d8f1f09c06a9800/57a24ca8-c04f-452f-8d99-cd4245_xhx9m6.png)  
  
  
*   接著到 assets/timber.js 裡搜尋 Select a valid variant if available 然後在上方貼上這段程式
  
  

``` 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/3fa060d75aaf9200/43c0dc89-90c0-4ae5-8f74-d71e5a_1d748pd.png)  
  
小提示：你也可以自行在代碼裡更換「熱賣中」字眼！  
  

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

  
  
結果如下：  
  
  
![](https://storage.crisp.chat/users/helpdesk/website/27be8c04d41ff000/1a741707-49bf-4c37-9f15-66d0aa_1bs9gsu.gif)  
  
  
  
  
若要修改商品數量的字體顏色，可以參考以下步驟：  
  
步驟一：萬網 Theme.scss 原始碼文件  
  
步驟二：複製以下原始碼  
  

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

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

更新時間： 24/10/2023