【官網設計】如何在商品頁面顯示「商品編號SKU」?
需確保商品有輸入商品編號 SKU。
![](https://storage.crisp.chat/users/helpdesk/website/898e31815fff2000/250687b1-5463-40f6-93d4-bc46b4_rzqnrq.png)
前往 EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → main-product.liquid 文件
搜尋 {% app_snippet 'product/button' %} → 於上方加入 <div id="product-sku-display" class="h6"></div>
![](https://storage.crisp.chat/users/helpdesk/website/5e8eeb3229d63c00/5dba28f7-44cf-4fb8-b876-34d89b_14oxioo.png)
在 main-product.liquid 文件裡搜尋 selectCallback → 於 selectcallback 代碼下方新增以下代碼
![](https://storage.crisp.chat/users/helpdesk/website/fd59cdc49279f000/fcf397e2-602e-4455-9c04-68e19b_80t5he.png)
前往 EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → product liquid 文件
找到 {% 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)
點擊儲存
找到 Select a valid variant if available
於上方粘貼以下原始碼
![](https://storage.crisp.chat/users/helpdesk/website/164e23c09a637600/528ff942-ea67-43d5-ad0f-280c92_15fbxnj.png)
點擊儲存
設定結果:
![](https://storage.crisp.chat/users/helpdesk/website/3cf7ca32d1601800/97d3e8ac-01a0-4edb-a518-adf80d_4wfi7.png)
💡 小提醒:若要修改商品編號 SKU 的字體顏色,可以參考以下步驟:(僅適用於舊版主題,新版主題會根據佈景主題設定)
編輯原始碼 → Theme.scss 文件
複製以下原始碼
粘貼在 Theme.scss 文件裡,顏色編號可以參考 這裡。
![](https://storage.crisp.chat/users/helpdesk/website/e975be3336f30800/4d0868af-84ff-4e4b-904f-9d404f_xjhema.png)
點擊儲存,完成!
![](https://storage.crisp.chat/users/helpdesk/website/898e31815fff2000/250687b1-5463-40f6-93d4-bc46b4_rzqnrq.png)
Aroma 或更新發佈之佈景主題(新版主題)
步驟一:編輯原始碼
前往 EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → main-product.liquid 文件
搜尋 {% app_snippet 'product/button' %} → 於上方加入 <div id="product-sku-display" class="h6"></div>
![](https://storage.crisp.chat/users/helpdesk/website/5e8eeb3229d63c00/5dba28f7-44cf-4fb8-b876-34d89b_14oxioo.png)
在 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 或之前發佈之佈景主題(舊版主題)
步驟一:編輯原始碼
前往 EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → product liquid 文件
找到 {% 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)
點擊儲存
步驟二:前往 timber.js 文件
找到 Select a valid variant if available
於上方粘貼以下原始碼
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)
點擊儲存
設定結果:
![](https://storage.crisp.chat/users/helpdesk/website/3cf7ca32d1601800/97d3e8ac-01a0-4edb-a518-adf80d_4wfi7.png)
💡 小提醒:若要修改商品編號 SKU 的字體顏色,可以參考以下步驟:(僅適用於舊版主題,新版主題會根據佈景主題設定)
編輯原始碼 → Theme.scss 文件
複製以下原始碼
#product-sku-display {
color: #000000;
}
粘貼在 Theme.scss 文件裡,顏色編號可以參考 這裡。
![](https://storage.crisp.chat/users/helpdesk/website/e975be3336f30800/4d0868af-84ff-4e4b-904f-9d404f_xjhema.png)
點擊儲存,完成!
更新時間: 24/10/2023
感謝!