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

若要在商品页面显示商品库存数量，需要编辑以下 2 个文件档：

• main-product.liquid
• section-main-product.css

在这篇文章中：

1. 在商品页面显示商品库存数量
2. 在商品页面显示 SKU
3. 更换文本颜色

• 若更换其他主题模版，您必须重新编辑原始码 (HTML/CSS)。

• 出于安全原因，我们不开放更改或编辑 结帐页面 的原始码（包括运输和付款方式）

• 请确保您已选择 EasyStore 追踪库存数量

• 需确保库存数量多于 0，否则商品页面不会显示商品库存数量。

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

步骤 1: 到 EasyStore 后台 > 销售渠道 > 线上网店 > 布景主题 > HTML/CSS > sections > main-product.liquid

步骤 2 : 搜寻 {% app_snippet 'product/button' %} 并将原始码 <div id="product-stock-display"></div> 贴在 上方 .

步骤 3 : 储存。

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

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

步骤 5 : 储存就完成啦！

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

2. 在商品页面显示 SKU

步骤 1： 到 EasyStore 后台 > 销售渠道 > 线上网店 > HTML/CSS > sections > main-product. Liquid

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

步骤 3 : 储存。

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

复制以下原始码：

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

步骤 5 : 储存。

效果：

效果：

3. 更换文本颜色

步骤 1： 到 EasyStore 后台 > 销售渠道 > 线上网店 > HTML/CSS > assets > section-main-product.css

步骤 2： 复制原始码

商品库存数量：

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

商品 SKU：

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

并贴在 section-main-product.css 文档的最下方。 您可以在 这里 取得喜欢的颜色所属代码 hex code (#EA2121)。

步骤 3 : 储存即完成。

更新于： 15/01/2024