在电子商务中，产品的SKU（库存单位）编号是一个重要的标识，有助于跟踪库存、订单处理和管理产品。在Shopify上，可以轻松地在产品页面上显示SKU编号，以便和客户更好地了解产品的详细信息。本文将详细介绍如何在Shopify产品页面上显示SKU编号。

1：进入Shopify后台。

首先，需要登录到Shopify帐户，并进入后台管理界面。

登录到Shopify帐户。

在后台管理界面中，转到“在线商店”>“模板”。

2：编辑模板代码。

接下来，需要编辑在线商店模板，以便在产品页面上显示SKU编号。这个步骤可能因模板而异，但我们将提供不同情况下的说明。

1）对于大多数Shopify模板。

如果使用的是大多数Shopify模板，可以按照以下步骤进行操作：

找到要编辑的模板，然后点击模板名称后的“...”按钮以打开操作菜单。

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

查找以下Liquid标记，它负责呈现产品标题的代码：

liquid

Copy code

{{ product.title }}

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

liquid

Copy code

{% assign current_variant = product.selected_or_first_available_variant %}

<span>{{ current_variant.sku }}</span>

点击保存。

2）对于Boundless模板。

如果使用的是Boundless模板，操作步骤稍有不同：

在“Assets”目录中，点击“theme.js.liquid”。

查找 variant.sku。

在文件底部，粘贴以下代码：

javascript

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

});

点击保存。

3：保存并预览。

完成上述步骤后，确保保存模板更改。接下来，可以预览产品页面，以查看SKU编号是否已成功显示。

通过这个简单的教程，可以在Shopify产品页面上轻松显示SKU编号，为客户提供更多关于产品的有用信息。这对于提高购物体验和订单处理非常有帮助。