在产品页面上显示 SKU 编号

已于 May 31, 2023 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku。

SKU（货号）由数字（通常是字母数字）组成，用于帮助识别产品和跟踪库存。如果商店使用 SKU，则每个单独的产品多属性都会分配到唯一的编号。您可以通过编辑模板代码来在产品页面上显示多属性的 SKU 编号：

分区模板和未分区模板

备注：本教程的步骤将根据您使用的是分区模板还是未分区模板而有所不同。分区模板支持通过拖放来安排主页的布局，未分区模板则不支持。

如果想了解您的模板是否支持分区，请转到模板的编辑代码页面。如果 Sections 目录中有文件，您则正在使用已分区模板。未分区模板是在 2016 年 10 月之前发布的，并且 Sections 目录中没有文件。

如果您使用已分区模板，请点击 Sectioned themes（已分区模板）按钮并按照说明进行操作。如果您使用较旧的未分区模板，请点击 Non-sectioned themes（未分区模板）按钮并按照说明进行操作。

在产品页面上显示 SKU 编号

若要编辑您的模板以在产品页面上显示 SKU 编号，请执行以下操作：

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

在 Sections 目录中，点击 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 步骤

在 Assets 目录中，点击 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 的步骤

在 Assets 目录中，点击 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 的步骤

在 Assets 目录中，点击 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 的步骤

在 Layout 目录中，点击 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 步骤

在 Assets 目录中，点击 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 的步骤

在 Assets 目录中，点击 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 的步骤

在 Assets 目录中，点击 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 的步骤

在 Assets 目录中，点击 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 的步骤

在 Assets 目录中，点击 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 编号

备注：此自定义设置不适用于未分区的 Boundless 模板。未分区模板在 2016 年 10 月之前发布，并且在 Sections 目录中没有文件。

若要编辑您的模板以在产品页面上显示 SKU 编号，请执行以下操作：

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

在 Shopify 应用中，轻触商店。
在销售渠道部分中，轻触在线商店。
轻触 Manage themes（管理模板）。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

在 Templates 目录中，点击 product.liquid。
查找以下 Liquid 标记：

{{ product.title }}

这是在产品页面上呈现产品标题的代码。

在包含 {{ product.title }} 的代码行下方的新行中，粘贴以下内容：

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

点击保存。
如果您使用的是 Brooklyn 和 Venture 以外的免费 Shopify 模板，请查找以下代码行：

var selectCallback = function(variant, selector) {

如果您在 product.liquid 中找不到上述代码行，您可以在 Layout 目录中的 theme.liquid 中找到它。

Brooklyn 和 Venture：如果您使用的是 Brooklyn 或 Venture，则需要查找和编辑其他代码行。在 Assets 目录中，点击 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 进行销售了吗？