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

# 在商品页面显示库存数量&SKU

此篇文章将指导您在网店上显示商品的库存数量和 SKU。 这样一来您的客户将能够确定还剩下多少件商品。 

若要在商品页面显示商品库存数量，需要编辑以下 2 个文件档：
*   main-product.liquid   
*   section-main-product.css

|| 📌 小笔记： 此教学仅适用于较新的主题模版，例如： Aroma, Kiddy, Vivid & 等等。

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

###### 在这篇文章中：
1.  在商品页面显示商品库存数量
2.  在商品页面显示 SKU 
3.  更换文本颜色
    
||| ⚠️ 请注意：

*   若更换其他主题模版，您必须重新编辑原始码 (HTML/CSS)。
    
*   出于安全原因，我们不开放更改或编辑 **结帐页面** 的原始码（包括运输和付款方式）
    
*   请确保您已选择 **EasyStore 追踪库存数量**

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2024-01-12-at-55853_aoegtb.png)
    
*   需确保库存数量多于 0，否则商品页面不会显示商品库存数量。
    
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2024-01-12-at-60300_1m72m3h.png)

---
# 1. 在商品页面显示商品库存数量

**步骤 1:** 到 [EasyStore 后台](https://admin.easystore.co/) > 销售渠道 > 线上网店 > 布景主题 > HTML/CSS > sections > **main-product.liquid**
**步骤 2** : 搜寻 `{% app_snippet 'product/button' %}` 并将原始码 `<div id="product-stock-display"></div>` 贴在 **上方** .

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

**步骤 3 :** 储存。

**步骤 4 :** 搜寻 `VariantSelector.onVariantChange(variant)` 并将以下原始码贴在其 **下方** 。

```css
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'; }
```

|| 📌 **小笔记：** 您可以将 "`piece available`" 更换成您喜欢的文字。

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

**步骤 5** : 储存就完成啦！

**附上 GIF 图片作为额外参考：**

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/new-coding-aroma_1a1bju6.gif)

---
# 2. 在商品页面显示 SKU 

||| **📌 重要通知：** 请确保您已经在 **商品管理页面** 填入 **SKU** 方可显示在商品页面。

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2024-01-15-at-10380_1h65xgp.png)

**步骤 1：** 到 [EasyStore 后台](https://admin.easystore.co/) > 销售渠道 > 线上网店 > HTML/CSS > sections > **main-product. Liquid**

**步骤 2 ：**将此原始码 `<div id="product-sku-display"></div>`  贴在 `{% app_snippet 'product/button' %}` 上方

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

**步骤 3 :** 储存。

**步骤 4 :** 搜寻 `VariantSelector.onVariantChange(variant)` 并将以下原始码贴在其下方。 **如 (有商品规格)**

复制以下原始码：

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

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

**步骤 5 :** 储存。

**效果：**

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

| 💡 小贴士： 如要将 SKU 及商品库存交换显示位置， 请将原始码 `<div id="product-sku-display"></div>` & `<div id="product-stock-display"></div>` 更换位置即可。

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

效果：

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

---
# 3. 更换文本颜色

**步骤 1：** 到 [EasyStore 后台](https://admin.easystore.co/) > 销售渠道 > 线上网店 > HTML/CSS > assets > **section-main-product.css**

**步骤 2：** 复制原始码

**商品库存数量：**

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

**商品 SKU：**

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

并贴在 **section-main-product.css** 文档的最下方。 您可以在 [这里](https://www.rapidtables.com/web/color/html-color-codes.html) 取得喜欢的颜色所属代码 hex code (#EA2121)。

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

**步骤 3 :** 储存即完成。

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