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

此頁面列印時間為 Apr 16, 2024。如須最新版本，請至 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) 編號

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  3. 在「區段」目錄中，點擊「product.liquid」或「product-template.liquid」。
  4. 找到下列 Liquid 標籤： 
{{ product.title }}

這是在產品頁面上轉譯產品名稱的程式碼。

  1. 在包含 {{ product.title }} 的程式碼行下方新的一行，貼上下列程式碼： 
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. 點擊「儲存」。

選擇佈景主題

此自訂程序接下來的步驟因佈景主題而異。點擊佈景主題的按鈕，然後依照下列指示操作。

Boundless 的步驟

  1. 在「資產」目錄中，按一下 theme.js.liquid。

  2. 尋找 variant.sku：

    • 如果您能找到 variant.sku，則已完成自訂功能設定。
    • 如果您無法找到 variant.sku，請繼續下一步。

  3. 在檔案底部貼上下列程式碼：

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);
});
  1. 點擊「儲存」。

Brooklyn 的步驟

  1. 在「資產」目錄中，按一下 theme.js.liquid。

  2. 尋找 variant.sku：

    • 如果您能找到 variant.sku，則已完成自訂功能設定。
    • 如果您無法找到 variant.sku，請繼續下一步。

  3. 在檔案底部貼上下列程式碼：

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;
      });
    });
  }
});
  1. 點擊「儲存」。

Debut 的步驟

  1. 在「資產」目錄中，按一下 theme.js。

  2. 尋找 variant.sku：

    • 如果您能找到 variant.sku，則已完成自訂功能設定。
    • 如果您無法找到 variant.sku，請繼續下一步。

  3. 在檔案底部貼上下列程式碼：

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;
      });
    });
  }
});
  1. 點擊「儲存」。

Express 的步驟

  1. 在「版面配置」目錄中，按一下 theme.liquid。
  2. 找到結束標籤 </body>。
  3. 在結束標籤 </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>
  1. 點擊「儲存」。

Minimal 的步驟

  1. 在「資產」目錄中，按一下 theme.js。

  2. 尋找 variant.sku：

    • 如果您能找到 variant.sku，則已完成自訂功能設定。
    • 如果您無法找到 variant.sku，請繼續下一步。

  3. 在檔案底部貼上下列程式碼：

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;
      });
    });
  }
});
  1. 點擊「儲存」。

Narrative 的步驟

  1. 在「資產」目錄中，按一下 custom.js。
  2. 在檔案底部貼上下列程式碼： 
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;
      });
    });
  }
});
  1. 點擊「儲存」。

Simple 的步驟

  1. 在「資產」目錄中，按一下 theme.js.liquid。

  2. 尋找 variant.sku：

    • 如果您能找到 variant.sku，則已完成自訂功能設定。
    • 如果您無法找到 variant.sku，請繼續下一步。

  3. 在檔案底部貼上下列程式碼：

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;
      });
    });
  }
});
  1. 點擊「儲存」。

Supply 的步驟

  1. 在「資產」目錄中，按一下 theme.js.liquid。

  2. 尋找 variant.sku：

    • 如果您能找到 variant.sku，則已完成自訂功能設定。
    • 如果您無法找到 variant.sku，請繼續下一步。

  3. 在檔案底部貼上下列程式碼：

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;
      });
    });
  }
});
  1. 點擊「儲存」。

Venture 的步驟

  1. 在「資產」目錄中，按一下 theme.js。

  2. 尋找 variant.sku：

    • 如果您能找到 variant.sku，則已完成自訂功能設定。
    • 如果您無法找到 variant.sku，請繼續下一步。

  3. 在檔案底部貼上下列程式碼：

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;
      });
    });
  }
});
  1. 點擊「儲存」。

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

若要讓存貨單位 (SKU) 顯示在產品頁面上，您必須在 Shopify 管理介面中為產品子類選項新增存貨單位 (SKU) 編號。

  1. 在 Shopify 管理介面 中，前往「產品」。

  2. 點擊要編輯的產品。

  3. 若產品有多個子類，請於「子類」區段新增您的存貨單位 (SKU) 編號：

  4. 點擊「儲存」。

非區段式佈景主題的步驟

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

步驟如下：

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
  3. 在「範本」目錄中，按一下「product.liquid」。
  4. 找到下列 Liquid 標籤： 
{{ product.title }}

這是在產品頁面上轉譯產品名稱的程式碼。

  1. 在包含 {{ product.title }} 的程式碼下方新的一行，貼上： 
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. 點擊「儲存」。
  2. 如果您使用的是免費 Shopify 佈景主題而非 Brooklyn 或 Venture，請找到下列程式碼行： 
var selectCallback = function(variant, selector) {

如果您在 product.liquid 中無法找到上述程式碼行，則可以在「版面配置」目錄的 theme.liquid 中找到。

  • Brooklyn 和 Venture：如果您使用 Brooklyn 或 Venture，則需要找到並編輯另一行程式碼。在「資產」目錄中，點擊「theme.js.liquid」，然後找到下列程式碼行： 
theme.productVariantCallback = function (variant, selector) {
  1. 在下方新的一行，貼上下列程式碼： 
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
          }
        });
      };
  1. 點擊「儲存」。

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

若要讓存貨單位 (SKU) 顯示在產品頁面上，您必須在 Shopify 管理介面中為產品子類選項新增存貨單位 (SKU) 編號。

  1. 在 Shopify 管理介面 中，前往「產品」。

  2. 點擊要編輯的產品。

  3. 若產品有多個子類，請於「子類」區段新增您的存貨單位 (SKU) 編號：

    SKUs
    若商品沒有子類，請於「庫存」區段新增您的存貨單位 (SKU) 編號：
    SKU for products without variants

  4. 點擊「儲存」。

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

免費試用