在产品页面上显示 SKU 编号

注意

Theme Store 中不提供经典模板。经典模板没有 Shopify 的 Online Store 2.0 模板中包含的功能，并且 Shopify 免费经典模板不会收到除安全性修复以外的更新。

备注

如果您使用的是 Shopify 提供的免费模板，那么您可以联系 Shopify 支持以获取关于此教程的帮助。此教程需要 15 分钟的设计时间。详细了解 Shopify 设计政策。

备注

此自定义用于经典 Shopify 模板，不适用于“Online Store 2.0”模板。

• 找到您的模板架构版本
• 探索“Online Store 2.0”模板自定义

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

分区模板和未分区模板

备注

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

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

如果您使用分区模板，请点击分区模板按钮并按照说明进行操作。如果您使用较旧的未分区模板，请点击未分区模板按钮并按照说明进行操作。

适用于分区模板的步骤

在产品页面上显示 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

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

针对 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

针对 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

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

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

适用于 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

适用于 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

针对 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

适用于 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 编号

备注

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

步骤：

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 编号：

   

   ；对于没有多属性的产品，请在库存部分添加 SKU 编号：

   

4. 点击保存。