在产品页面上显示 SKU 编号

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

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

多属性 SKU 示例

分区模板和未分区模板

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

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

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

本页相关主题

适用于分区模板的步骤

在产品页面上显示 SKU 编号

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  3. 在 Sections 目录中，点击 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. 在 Assets 目录中，点击 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. 在 Assets 目录中，点击 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. 在 Assets 目录中，点击 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. 在 Layout 目录中，点击 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. 在 Assets 目录中，点击 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. 在 Assets 目录中，点击 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. 在 Assets 目录中，点击 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. 在 Assets 目录中，点击 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. 在 Assets 目录中，点击 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. 在 Templates 目录中，点击 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. 如果您使用的是 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) {
  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 进行销售了吗？

免费试用