在Shopify平台上管理产品库存和销售信息是电商卖家的重要工作之一。本文将为您介绍如何在Shopify产品页面上隐藏或禁用已售罄的多属性产品,让您的店铺页面更加整洁和优化。

隐藏或禁用售罄的多属性产品可以帮助您避免顾客在选择产品时产生不必要的困扰,提升用户体验。不同类型的Shopify主题在实现此功能的具体步骤会有所不同,本文将针对不同主题类型分别说明操作方法。

分区主题和非分区主题的区别

Shopify主题可以分为两大类:分区主题和非分区主题。分区主题允许通过拖拽的方式自定义页面布局,而非分区主题没有此功能。

如果您想确认自己使用的是哪种主题类型,可以进入Shopify后台的"在线商店"-"主题"页面,查看主题编辑器中是否有"Sections"目录。如果有,说明您使用的是分区主题;如果没有,则为非分区主题。

分区主题操作步骤

1. 进入Shopify后台,找到要编辑的主题,点击"操作"-"编辑代码"。

2. 在"Assets"目录中,打开"theme.js"或"theme.js.liquid"文件。

3. 在文件底部,粘贴以下代码:

```javascript

document.addEventListener('DOMContentLoaded', function() {

const productJson = document.querySelectorAll('[id^="ProductJson-"]');

if (productJson.length > 0) {

for (let i = 0; i < productJson>

const current = productJson[i];

const sectionId = current.id.replace('ProductJson-', '');

const section = document.querySelector(`[data-section-id="${sectionId}"]`);

const product = JSON.parse(current.text);

if (product.options.length === 1) {

const unavailableVariants = [];

for (let j = 0; j < product>

const variant = product.variants[j];

if (!variant.available) {

unavailableVariants.push(variant);

}

}

if (unavailableVariants.length > 0) {

const mutationCallback = function() {

const variantOptions = section.querySelectorAll('.single-option-selector option');

if (variantOptions.length > 0) {

for (let k = 0; k < unavailableVariants>

const unavailableVariant = unavailableVariants[k];

for (let l = 0; l < variantOptions>

const option = variantOptions[l];

if (unavailableVariant.title === option.value) {

option.remove();

}

}

}

if (typeof observer === 'object' \u0026\u0026 typeof observer.disconnect === 'function') {

observer.disconnect();

}

}

};

const observer = new MutationObserver(mutationCallback);

const addToCartForm = document.querySelector('form[action*="/cart/add"]');

mutationCallback();

if (window.MutationObserver \u0026\u0026 addToCartForm) {

const config = {

childList: true,

subtree: true

};

if (typeof observer === 'object' \u0026\u0026 typeof observer.disconnect === 'function') {

observer.disconnect();

}

observer.observe(addToCartForm, config);

}

}

}

}

}

});

```

4. 点击"保存"按钮完成设置。

非分区主题操作步骤

1. 进入Shopify后台,找到要编辑的主题,点击"操作"-"编辑代码"。

2. 在"Assets"目录中,打开"theme.js"或"theme.js.liquid"文件。

3. 在文件底部,粘贴以下代码:

```javascript

document.addEventListener('DOMContentLoaded', function() {

const productJson = document.querySelectorAll('[id^="ProductJson-"]');

if (productJson.length > 0) {

for (let i = 0; i < productJson>

const current = productJson[i];

const product = JSON.parse(current.text);

if (product.options.length === 1) {

const unavailableVariants = [];

for (let j = 0; j < product>

const variant = product.variants[j];

if (!variant.available) {

unavailableVariants.push(variant);

}

}

if (unavailableVariants.length > 0) {

const variantOptions = document.querySelectorAll('.single-option-selector option');

for (let k = 0; k < unavailableVariants>

const unavailableVariant = unavailableVariants[k];

for (let l = 0; l < variantOptions>

const option = variantOptions[l];

if (unavailableVariant.title === option.value) {

option.remove();

}

}

}

}

}

}

}

});

```

4. 点击"保存"按钮完成设置。

以上就是在Shopify上隐藏或禁用售罄多属性产品的具体操作步骤。不同类型的主题有不同的实现方式,希望对您有所帮助。如果还有其他问题,欢迎随时咨询。

常见问题解答

Q1: 为什么要隐藏或禁用售罄的多属性产品?

A1: 隐藏或禁用售罄的多属性产品可以提升用户体验,避免顾客在选择产品时产生不必要的困扰。这样可以让您的产品页面更加整洁和优化。

Q2: 如何确认自己使用的是分区主题还是非分区主题?

A2: 您可以进入Shopify后台的"在线商店"-"主题"页面,查看主题编辑器中是否有"Sections"目录。如果有,说明您使用的是分区主题;如果没有,则为非分区主题。

Q3: 如果我使用的是Shopify提供的免费主题,如何获得帮助?

A3: 如果您使用的是Shopify提供的免费主题,您可以联系Shopify支持团队,获得关于此教程的帮助。他们将能为您提供专业的技术支持。