在產品頁面上顯示存貨單位 (SKU) 編號
此頁面列印時間為 May 13, 2024。如須最新版本,請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku。
存貨單位 (SKU) 編號通常為字母數位,用來協助識別產品和追蹤庫存。如果商店使用存貨單位 (SKU),則系統會將唯一編號指派給每個個別產品子類選項。您可以編輯佈景主題程式碼,以在產品頁面上顯示子類的存貨單位 (SKU) 編號:
區段式佈景主題和非區段式佈景主題
備註
此教學課程的步驟會因您使用的是區段式 或非區段式 佈景主題而有所不同。區段式佈景主題可供您拖放以安排首頁的版面配置,而非區段式佈景主題則無法如此執行此操作。
若要確定您的佈景主題是否支援區段,請前往佈景主題的「編輯程式碼」 頁面。如果區段 目錄中有檔案,就表示您正在使用區段式佈景主題。非區段式佈景主題是在 2016 年 10 月前發佈,且在區段 目錄中沒有檔案。
如果您使用的是區段式佈景主題,請按一下「區段式佈景主題」 按鈕,並依照說明進行操作。如果您使用的是較舊的非區段式佈景主題,請按一下「非區段式佈景主題」 按鈕,並依照說明進行操作。
區段式佈景主題的步驟 在產品頁面上顯示存貨單位 (SKU) 編號
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「區段 」目錄中,點擊「product.liquid
」或「product-template.liquid
」。
找到 下列 Liquid 標籤:
{{ product . title }}
這是在產品頁面上轉譯產品名稱的程式碼。
在包含 {{ product.title }}
的程式碼行下方新的一行,貼上下列程式碼:
{% assign current_variant = product . selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant . sku }} </span>
點擊「儲存 」。
選擇佈景主題 此自訂程序接下來的步驟因佈景主題而異。點擊佈景主題的按鈕,然後依照下列指示操作。
Boundless 的步驟
在「資產」 目錄中,按一下 theme.js.liquid
。
尋找 variant.sku
:
如果您能找到 variant.sku
,則已完成自訂功能設定。
如果您無法找到 variant.sku
,請繼續下一步。
在檔案底部貼上下列程式碼:
document . addEventListener ( ' DOMContentLoaded ' , () => {
setTimeout ( function () {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
}, 100 );
});
點擊「儲存 」。
Brooklyn 的步驟
在「資產」 目錄中,按一下 theme.js.liquid
。
尋找 variant.sku
:
如果您能找到 variant.sku
,則已完成自訂功能設定。
如果您無法找到 variant.sku
,請繼續下一步。
在檔案底部貼上下列程式碼:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const productInfo = JSON . parse ( product . innerHTML );
const radioButtons = document . querySelector ( ' .single-option-radio ' );
let inputSelects ;
if ( radioButtons !== null ) {
inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-radio ' )];
} else {
inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector__radio ' )];
}
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
if ( radioButtons !== null ) {
inputValues . push ( input . firstElementChild . value );
} else {
inputValues . push ( input . value );
}
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . target . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . currentTarget );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
點擊「儲存 」。
Debut 的步驟
在「資產」 目錄中,按一下 theme.js
。
尋找 variant.sku
:
如果您能找到 variant.sku
,則已完成自訂功能設定。
如果您無法找到 variant.sku
,請繼續下一步。
在檔案底部貼上下列程式碼:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
點擊「儲存 」。
Express 的步驟
在「版面配置」 目錄中,按一下 theme.liquid
。
找到 結束標籤 </body>
。
在結束標籤 </body>
正上方一行,貼上下列程式碼:
<script>
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [data-product-json] ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = " shopify-section- " + product . closest ( ' [data-section-id] ' ). dataset . sectionId ;
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .form__input--select ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
</script>
點擊「儲存 」。
Minimal 的步驟
在「資產」 目錄中,按一下 theme.js
。
尋找 variant.sku
:
如果您能找到 variant.sku
,則已完成自訂功能設定。
如果您無法找到 variant.sku
,請繼續下一步。
在檔案底部貼上下列程式碼:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
點擊「儲存 」。
Narrative 的步驟
在「資產」 目錄中,按一下 custom.js
。
在檔案底部貼上下列程式碼:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [data-product-json] ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = " shopify-section- " + product . closest ( ' [data-section-id] ' ). dataset . sectionId ;
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
點擊「儲存 」。
Simple 的步驟
在「資產」 目錄中,按一下 theme.js.liquid
。
尋找 variant.sku
:
如果您能找到 variant.sku
,則已完成自訂功能設定。
如果您無法找到 variant.sku
,請繼續下一步。
在檔案底部貼上下列程式碼:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
點擊「儲存 」。
Supply 的步驟
在「資產」 目錄中,按一下 theme.js.liquid
。
尋找 variant.sku
:
如果您能找到 variant.sku
,則已完成自訂功能設定。
如果您無法找到 variant.sku
,請繼續下一步。
在檔案底部貼上下列程式碼:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
點擊「儲存 」。
Venture 的步驟
在「資產」 目錄中,按一下 theme.js
。
尋找 variant.sku
:
如果您能找到 variant.sku
,則已完成自訂功能設定。
如果您無法找到 variant.sku
,請繼續下一步。
在檔案底部貼上下列程式碼:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
點擊「儲存 」。
從管理介面將存貨單位 (SKU) 編號新增至產品子類選項 若要讓存貨單位 (SKU) 顯示在產品頁面上,您必須在 Shopify 管理介面中為產品子類選項新增存貨單位 (SKU) 編號。
在 Shopify 管理介面 中,前往「產品 」。
點擊要編輯的產品。
若產品有多個子類,請於「子類 」區段新增您的存貨單位 (SKU) 編號:
點擊「儲存 」。
非區段式佈景主題的步驟 在產品頁面上顯示存貨單位 (SKU) 編號
步驟如下:
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「範本 」目錄中,按一下「product.liquid
」。
找到 下列 Liquid 標籤:
{{ product . title }}
這是在產品頁面上轉譯產品名稱的程式碼。
在包含 {{ product.title }}
的程式碼下方新的一行,貼上:
{% assign current_variant = product . selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant . sku }} </span>
點擊「儲存 」。
如果您使用的是免費 Shopify 佈景主題而非 Brooklyn 或 Venture,請找到 下列程式碼行:
var selectCallback = function ( variant , selector ) {
如果您在 product.liquid
中無法找到上述程式碼行,則可以在「版面配置 」目錄的 theme.liquid
中找到。
Brooklyn 和 Venture :如果您使用 Brooklyn 或 Venture,則需要找到並編輯另一行程式碼。在「資產 」目錄中,點擊「theme.js.liquid
」,然後找到 下列程式碼行:
theme . productVariantCallback = function ( variant , selector ) {
在下方新的一行,貼上下列程式碼:
if ( variant ) {
document . querySelector ( ' .variant-sku ' ). innerText = variant . sku ;
}
else {
document . querySelector ( ' .variant-sku ' ). innerText = '' ;
}
您的程式碼應類似下列所示:
var selectCallback = function ( variant , selector ) {
if ( variant ) {
document . querySelector ( ' .variant-sku ' ). innerText = variant . sku ;
}
else {
document . querySelector ( ' .variant-sku ' ). innerText = '' ;
}
self . productPage ({
money_format : theme . moneyFormat ,
variant : variant ,
selector : selector ,
translations : {
add_to_cart : theme . productStrings . addToCart ,
sold_out : theme . productStrings . soldOut ,
unavailable : theme . productStrings . unavailable
}
});
};
點擊「儲存 」。
從管理介面將存貨單位 (SKU) 編號新增至產品子類選項 若要讓存貨單位 (SKU) 顯示在產品頁面上,您必須在 Shopify 管理介面中為產品子類選項新增存貨單位 (SKU) 編號。
在 Shopify 管理介面 中,前往「產品 」。
點擊要編輯的產品。
若產品有多個子類,請於「子類 」區段新增您的存貨單位 (SKU) 編號: 若商品沒有子類,請於「庫存 」區段新增您的存貨單位 (SKU) 編號:
點擊「儲存 」。