隐藏售罄多属性

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

限制

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

  • 您的产品有多个产品选项
  • 您使用 Express 模板,并将产品页面设置为以叠加方式显示产品

分区模板和未分区模板

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

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

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

适用于分区模板的步骤

选择您的模板

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

适用于未分区模板的步骤

隐藏售罄多属性

如果您使用未分区模板,可以按照以下步骤在产品页面上隐藏售罄的多属性。

  1. 在 Shopify 后台中,转至在线商店 > 模板
  2. 找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码
  3. Snippets 目录中点击添加新片段
  4. 将新的代码片段命名为 remove-sold-out
    Add new snippet
  5. 在新的代码片段文件中,粘贴以下代码:
{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.remove();
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}
  1. 点击保存
  2. Layout 目录中,点击 theme.liquid
  3. 在文件末尾附近的 </body> 标记正前方,粘贴以下代码:
{% render 'remove-sold-out' %}
  1. 点击保存

禁用售罄多属性

如果您使用未分区模板,可以按照以下步骤禁用售罄的多属性。产品页面上仍会显示多属性,但无法进行选择。

  1. 在 Shopify 后台中,转至在线商店 > 模板
  2. 找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码
  3. Snippets 目录中点击添加新片段
  4. 将新的代码片段命名为 disable-sold-out
    Add new snippet
  5. 在新的代码片段文件中,粘贴以下代码:
{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.setAttribute('disabled', '');
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}
  1. 点击保存
  2. Layout 目录中,点击 theme.liquid
  3. 在文件末尾附近的 </body> 标记正前方,粘贴以下代码:
{% render 'disable-sold-out' %}
  1. 点击保存

准备好开始使用 Shopify 进行销售了吗?

免费试用