隐藏售罄多属性



您可以通过在产品页面上删除或禁用售罄的多属性来阻止客户选择这些多属性。

本页相关主题

  • 限制

  • 选择您的模板

限制

此页面中概述的自定义设置不适用于以下情况：

  • 您的产品有多个产品选项

  • 您使用 Express 模板，并将产品页面设置为以叠加方式显示产品

分区模板和未分区模板

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

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

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

  • Sectioned themes

  •  

  • Non-sectioned themes

选择您的模板

此自定义的步骤因您的模板而异。点击模板的按钮，然后按照以下说明操作：

  • Boundless

  • Brooklyn

  • Debut

  • Express

  • Minimal

  • Narrative

  • Simple

  • Supply

  • Venture

Boundless

此自定义设置的步骤取决于您是希望完全隐藏售罄的多属性，还是只想将其禁用。点击偏好设置按钮，然后按照以下说明操作：

  •  Disable

隐藏售罄多属性

按照以下步骤将自定义项应用于 Boundless：

PC：

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

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

  1. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。

苹果系统：

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

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

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

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

  1. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。

安卓系统：

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

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

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

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

  1. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。

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

document.addEventListener('DOMContentLoaded', function() {   const productJson = document.querySelectorAll('[id`^`=ProductJson-');   if (productJson.length > 0) {     for (let i = 0; i < productJson.length; i++) {       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.variants.length; j++) {           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.length; k++) {                 const unavailableVariant = unavailableVariants[k];                 for (let l = 0; l < variantOptions.length; l++) {                   const option = variantOptions[l];                   if (unavailableVariant.title === option.value) {                     option.remove();                   }                 }               }               if (typeof observer === 'object' && typeof observer.disconnect === 'function') {                 observer.disconnect();               }             }           }           const observer = new MutationObserver(mutationCallback);           const addToCartForm = document.querySelector('form[action*="/cart/add"]');           mutationCallback();           if (window.MutationObserver && addToCartForm.length) {             const config = { childList: true, subtree: true };             if (typeof observer === 'object' && typeof observer.disconnect === 'function') {               observer.disconnect();             }             observer.observe(addToCartForm, config);           }         }       }     }   } });

  1. 点击保存。

Shopify商户官网原文详情：

Hide sold-out variants

You can prevent customers from selecting sold-out variants by removing or disabling those variants on the product page.

On this page

  • Limitations

  • Select your theme

Limitations

The customizations outlined on this page do not work for the following cases:

  • Your products have more than one product option

  • You use the Express theme and have the product page set to show products in an overlay

Sectioned and non-sectioned themes

  • Sectioned themes

  • Non-sectioned themes

Select your theme

The steps for this customization vary depending on your theme. Click the button for your theme before following the instructions below:

  • Boundless

  • Brooklyn

  • Debut

  • Express

  • Minimal

  • Narrative

  • Simple

  • Supply

  • Venture

Boundless

The steps for this customization vary depending on whether you want to completely hide sold-out variants, or just disable them. Click the button for your preference before following the instructions below:

  • Hide

  • Disable

Hide sold-out variants

Follow these steps to apply the customization to Boundless:

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 Assets directory, click theme.js or theme.js.liquid.

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 Assets directory, click theme.js or theme.js.liquid.

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 Assets directory, click theme.js or theme.js.liquid.

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

    document.addEventListener('DOMContentLoaded', function() {   const productJson = document.querySelectorAll('[id^=ProductJson-');if (productJson.length > 0) {     for (let i = 0; i < productJson.length; i++) {       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.variants.length; j++) {           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.length; k++) {                 const unavailableVariant = unavailableVariants[k];for (let l = 0; l < variantOptions.length; l++) {                   const option = variantOptions[l];if (unavailableVariant.title === option.value) {                     option.remove();                   }                 }               }if (typeof observer === 'object' && typeof observer.disconnect === 'function') {                 observer.disconnect();               }             }           }const observer = new MutationObserver(mutationCallback);           const addToCartForm = document.querySelector('form[action*="/cart/add"]');mutationCallback();if (window.MutationObserver && addToCartForm.length) {             const config = { childList: true, subtree: true };if (typeof observer === 'object' && typeof observer.disconnect === 'function') {               observer.disconnect();             }observer.observe(addToCartForm, config);           }         }       }     }   } });

  2. Click Save.

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


（本文内容根据网络资料整理，出于传递更多信息之目的，不代表连连国际赞同其观点和立场）