【官網設計】如何在商品頁面顯示「商品編號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(''); 

}```



![](https://storage.crisp.chat/users/helpdesk/website/fd59cdc49279f000/fcf397e2-602e-4455-9c04-68e19b_80t5he.png)



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



---





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



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

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

  

2. 找到 {% app_snippet 'product/field_bottom' %} → 於上方粘貼以下原始碼  



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

  



![](https://storage.crisp.chat/users/helpdesk/website/159160162b00fa00/227d96a8-de98-4d80-8e8d-76ee73_1qic5wc.png)



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('');

}```



  



![](https://storage.crisp.chat/users/helpdesk/website/164e23c09a637600/528ff942-ea67-43d5-ad0f-280c92_15fbxnj.png)



3. 點擊儲存  

   



---



設定結果：

![](https://storage.crisp.chat/users/helpdesk/website/3cf7ca32d1601800/97d3e8ac-01a0-4edb-a518-adf80d_4wfi7.png)



 

---



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



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



2. 複製以下原始碼



``` #product-sku-display { 

color: #000000; 

}```



  



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



![](https://storage.crisp.chat/users/helpdesk/website/e975be3336f30800/4d0868af-84ff-4e4b-904f-9d404f_xjhema.png)



4. 點擊儲存，完成！

Updated on: 12/01/2024