在电子商务中，产品的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编号，为客户提供更多关于产品的有用信息。这对于提高购物体验和订单处理非常有帮助。
