在產品頁面上顯示存貨單位 (SKU) 編號

此頁面列印時間為 May 28, 2023。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku。

存貨單位 (SKU) 編號通常為字母數位，用來協助識別產品和追蹤庫存。如果商店使用存貨單位 (SKU)，則系統會將唯一編號指派給每個個別產品子類選項。您可以編輯佈景主題程式碼，以在產品頁面上顯示子類的存貨單位 (SKU) 編號：

區段式佈景主題和非區段式佈景主題

在產品頁面上顯示存貨單位 (SKU) 編號

編輯佈景主題以在產品頁面上顯示存貨單位 (SKU) 編號：

在 Shopify 管理介面，前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

在 Shopify 應用程式中，點一下「商店」。
在銷售管道畫面上，點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

在 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。
在檔案底部貼上下列程式碼：

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。
在檔案底部貼上下列程式碼：

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。
在檔案底部貼上下列程式碼：

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。
在檔案底部貼上下列程式碼：

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。
在檔案底部貼上下列程式碼：

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。
在檔案底部貼上下列程式碼：

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。
在檔案底部貼上下列程式碼：

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) 編號

編輯佈景主題以在產品頁面上顯示存貨單位 (SKU) 編號：

在 Shopify 管理介面，前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

在 Shopify 應用程式中，點一下「商店」。
在銷售管道畫面上，點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

在 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) 編號

區段式佈景主題和非區段式佈景主題

此頁面上

在產品頁面上顯示存貨單位 (SKU) 編號

選擇佈景主題

Boundless 的步驟

Brooklyn 的步驟

Debut 的步驟

Express 的步驟

Minimal 的步驟

Narrative 的步驟

Simple 的步驟

Supply 的步驟

Venture 的步驟

從管理介面將存貨單位 (SKU) 編號新增至產品子類選項

在產品頁面上顯示存貨單位 (SKU) 編號

從管理介面將存貨單位 (SKU) 編號新增至產品子類選項

準備好開始透過 Shopify 銷售商品了嗎？