在产品页面上显示 SKU 编号备注如果您使用Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅Support

目录

• 答案
• 文章目录
• shopify产品显示 SKU 编号和添加SKU编号步骤详细回答

shopify产品显示 SKU 编号和添加SKU编号步骤详细回答

在产品页面上显示 SKU 编号

备注

如果您使用 Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅 Support for themes。

备注

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

• 找到您的模板架构版本

• 探索“Online Store 2.0”模板自定义

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

分区模板和未分区模板

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

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

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

• Sectioned themes

•  

• Non-sectioned themes

本页相关主题

• 在产品页面上显示 SKU 编号

• 从后台向产品多属性添加 SKU 编号

在产品页面上显示 SKU 编号

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

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Sections 目录中，点击 product.liquid 或 product-template.liquid。

2. 查找以下 Liquid 标记：

{{ product.title }}

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

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

{% assign current_variant = product.selected_or_first_available_variant %} <span>{{ current_variant.sku }}</span>

1. 点击保存。

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Sections 目录中，点击 product.liquid 或 product-template.liquid。

2. 查找以下 Liquid 标记：

{{ product.title }}

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

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

{% assign current_variant = product.selected_or_first_available_variant %} <span>{{ current_variant.sku }}</span>

1. 点击保存。

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Sections 目录中，点击 product.liquid 或 product-template.liquid。

2. 查找以下 Liquid 标记：

{{ product.title }}

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

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

{% assign current_variant = product.selected_or_first_available_variant %} <span>{{ 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. 点击保存。

从后台向产品多属性添加 SKU 编号

若要在产品页面上显示 SKU，您必须从 Shopify 后台向产品多属性添加 SKU 编号。

1. 在 Shopify 后台中，转到产品。

2. 点击您要编辑的产品。

3. 对于具有多个多属性的产品，请在多属性分区中添加 SKU 编号：

1. 对于没有多属性的产品，请在库存分区中添加 SKU 编号：

1. 点击保存。

Shopify商户官网原文详情：

Show SKU numbers on product pages

Note

If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version

• Explore Online Store 2.0 theme customizations

SKUs (stock keeping units) are numbers, typically alphanumeric, that are used to help identify products and track inventory. If a store uses SKUs, then a unique number is assigned to each individual product variant. You can show SKU numbers for variants on your product pages by editing your theme code:

Sectioned and non-sectioned themes

Note

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme lets you drag and drop to arrange the layout of your home page, and a non-sectioned theme doesn't.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, click the Non-sectioned themes button and follow the instructions.

• Sectioned themes

•  

• Non-sectioned themes

On this page

• Show SKU numbers on product pages

• Add SKU numbers to your product variants from the admin

Show SKU numbers on product pages

To edit your theme to show SKU numbers on product pages:

PC：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Sections directory, click product.liquid or product-template.liquid.

2. Find the following Liquid tag:

   {{ product.title }}

   This is the code that renders your product titles on the product page.

3. On a new line below the line of code that includes {{ product.title }}, paste the following code:

   {% assign current_variant = product.selected_or_first_available_variant %} <span>{{ current_variant.sku }}</span>

4. Click Save.

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Sections directory, click product.liquid or product-template.liquid.

2. Find the following Liquid tag:

   {{ product.title }}

   This is the code that renders your product titles on the product page.

3. On a new line below the line of code that includes {{ product.title }}, paste the following code:

   {% assign current_variant = product.selected_or_first_available_variant %} <span>{{ current_variant.sku }}</span>

4. Click Save.

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Sections directory, click product.liquid or product-template.liquid.

2. Find the following Liquid tag:

   {{ product.title }}

   This is the code that renders your product titles on the product page.

3. On a new line below the line of code that includes {{ product.title }}, paste the following code:

   {% assign current_variant = product.selected_or_first_available_variant %} <span>{{ current_variant.sku }}</span>

4. Click Save.

Select your theme

The next steps for this customization vary depending on your theme. Click the button for your theme and follow the instructions.

Steps for Boundless

1. In the Assets directory, click theme.js.liquid.

2. Look for variant.sku.

   If you're able to find variant.sku, then you have completed the customization.

   If you're unable to find variant.sku, then continue to the next step.

3. At the bottom of the file, paste the following code:

   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); });

4. Click Save.

Add SKU numbers to your product variants from the admin

To have SKUs appear on your product pages, you must add SKU numbers to your product variants from in Shopify admin.

1. From your Shopify admin, go to Products.

2. Click on the product that you would like to edit.

3. For products with multiple variants, in the Variants section, add your SKU numbers:

1. For products without variants, in the Inventory section, add your SKU number:

1. Click Save.

文章内容来源：Shopify商户官方网站