【官網設計】如何在商品頁面顯示「商品編號SKU」？

需確保商品有輸入商品編號 SKU。

Aroma 或更新發佈之佈景主題（新版主題）

步驟一：編輯原始碼

1. 前往 EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → main-product.liquid 文件

2. 搜尋 {% app_snippet 'product/button' %} → 於上方加入 <div id="product-sku-display" class="h6"></div>

3. 在 main-product.liquid 文件裡搜尋 selectCallback → 於 selectcallback 代碼下方新增以下代碼

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

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

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

步驟一：編輯原始碼

1. 前往 EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → product liquid 文件
   
2. 找到 {% app_snippet 'product/field_bottom' %} → 於上方粘貼以下原始碼

<div id="product-sku-display" class="h6"></div>

3. 點擊儲存

步驟二：前往 timber.js 文件

1. 找到 Select a valid variant if available

2. 於上方粘貼以下原始碼

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

3. 點擊儲存
   

設定結果：

💡 小提醒：若要修改商品編號 SKU 的字體顏色，可以參考以下步驟：（僅適用於舊版主題，新版主題會根據佈景主題設定）

1. 編輯原始碼 → Theme.scss 文件

2. 複製以下原始碼

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

3. 粘貼在 Theme.scss 文件裡，顏色編號可以參考 這裡。

4. 點擊儲存，完成！

更新時間： 24/10/2023