在产品页面上显示剩余的多属性库存

注意

Theme Store 中不提供经典模板。经典模板没有 Shopify 的 Online Store 2.0 模板中包含的功能，并且 Shopify 免费经典模板不会收到除安全性修复以外的更新。

备注

如果您使用 Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。详细了解 Shopify 设计政策。

备注

此自定义用于经典 Shopify 模板，不适用于“Online Store 2.0”模板。

• 找到您的模板架构版本
• 探索“Online Store 2.0”模板自定义

您可以在产品页面或特色产品分区中添加一条消息，用于在产品多属性库存较低时显示库存中的商品数量。您需要对产品激活库存跟踪，才能显示此消息。

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

提示:

Shopify 的 Supply 模板和 Venture 模板已包含显示剩余数量消息设置。您可以在模板辑器中激活此设置。

Debut

针对 Debut 的步骤

编辑 theme.liquid

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... 按钮 > 编辑代码。
3. 在 Layout 目录中，打开 theme.liquid。
4. 查找代码中的结束 </head> 标记。在结束 </head> 标记上方的新行中，粘贴以下代码：

<script>
  var variantStock = {};
</script>

1. 点击保存。

编辑 product-template.liquid 或 featured-product.liquid

1. 在 Sections 目录中，打开 product-template.liquid 或 featured-product.liquid：

   • 打开 product-template.liquid 以将此功能添加到产品页面。
   • 打开 featured-product.liquid 以将此功能添加到主页上的特色产品分区。

2. 查找 {% form 'product'。在此标记上方添加以下代码：

<div class="inventoryWrapper">
  {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 {{ current_variant.inventory_quantity }}。

1. 在文件底部，添加以下代码：

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 点击保存。

编辑 theme.js.liquid 或 theme.js

您需要对这些文件所做的更改取决于您使用的 Debut 版本。

版本 17.8.0 及以下

1. 打开 theme.js.liquid 或 theme.js。
2. 查找 theme.Product = (function()。在 this.selectors = { 下方添加以下代码：

inventoryHtml: '.inventoryWrapper',

1. 在同一文件中，查找 _updateAddToCart: function(evt) {。在正下方添加以下代码：

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. 查找 if (variant.available) {。在 } else { 语句前添加以下代码：

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
      inventoryWrapper.innerHTML = inventoryHtml;
    } else {
      inventoryWrapper.innerHTML = '';
}

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 ${variantStock[variant.id]}。

1. 点击保存。

版本 17.9.0 及以上

1. 打开 theme.js.liquid 或 theme.js。
2. 查找 theme.Product = (function()。在 this.selectors = { 下方添加以下代码：

inventoryHtml: '.inventoryWrapper',

1. 在同一文件中，查找 _setProductState: function(evt) {。在正下方添加以下代码：

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. 在同一函数中，查找 if (!variant) {。在右 } 括号后，添加以下代码：

else {
  if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
    const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
    inventoryWrapper.innerHTML = inventoryHtml;
  } else {
    inventoryWrapper.innerHTML = '';
  }
}

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 ${variantStock[variant.id]}。

1. 点击保存。

Brooklyn

针对 Brooklyn 的步骤

编辑 theme.liquid

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... 按钮 > 编辑代码。
3. 在 Layout 目录中，打开 theme.liquid。
4. 查找代码中的结束 </head> 标记。在结束 </head> 标记上方的新行中，粘贴以下代码：

<script>
  var variantStock = {};
</script>

1. 点击保存。

编辑 product-template.liquid 或 featured-product.liquid

1. 在 Sections 目录中，打开 product-template.liquid 或 featured-product.liquid：

   • 打开 product-template.liquid 以将此功能添加到产品页面。
   • 打开 featured-product.liquid 以将此功能添加到主页上的特色产品分区。

2. 查找 {% form 'product'。在此标记上方添加以下代码：

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 {{current_variant.inventory_quantity }}。

1. 在文件底部，添加以下代码：

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 点击保存。

编辑 theme.js.liquid 或 theme.js

1. 打开 theme.js.liquid 或 theme.js。
2. 查找 theme.Product = (function()。在 this.selectors = { 下方添加以下代码：

inventoryHtml: '.inventoryWrapper',

1. 在同一文件中，查找 if (variant.available) {。在 } else { 语句前添加以下代码：

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 ${variantStock[variant.id]}。

1. 点击保存。

Simple

适用于 Simple 的步骤

编辑 theme.liquid

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... 按钮 > 编辑代码。
3. 在 Layout 目录中，打开 theme.liquid。
4. 查找代码中的结束 </head> 标记。在结束 </head> 标记上方的新行中，粘贴以下代码：

<script>
  var variantStock = {};
</script>

1. 点击保存。

编辑 product-template.liquid 或 featured-product.liquid

1. 在 Sections 目录中，打开 product-template.liquid 或 featured-product.liquid：

   • 打开 product-template.liquid 以将此功能添加到产品页面。
   • 打开 featured-product.liquid 以将此功能添加到主页上的特色产品分区。

2. 查找 {% form 'product'。在此标记上方添加以下代码：

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 {{current_variant.inventory_quantity }}。

1. 在文件底部，添加以下代码：

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 点击保存。

编辑 theme.js.liquid 或 theme.js

1. 打开 theme.js.liquid 或 theme.js。
2. 查找 theme.Product = (function()。在 this.selectors = { 下方添加以下代码：

inventoryHtml: '.inventoryWrapper',

1. 在同一文件中，查找 if (variant.available) {。在 } else { 语句前添加以下代码：

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 ${variantStock[variant.id]}。

1. 点击保存。

Minimal

Minimal 步骤

编辑 theme.liquid

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... 按钮 > 编辑代码。
3. 在 Layout 目录中，打开 theme.liquid。
4. 查找代码中的结束 </head> 标记。在结束 </head> 标记上方的新行中，粘贴以下代码：

<script>
  var variantStock = {};
</script>

1. 点击保存。

编辑 product-template.liquid 或 featured-product.liquid

1. 在 Sections 目录中，打开 product-template.liquid 或 featured-product.liquid：

   • 打开 product-template.liquid 以将此功能添加到产品页面。
   • 打开 featured-product.liquid 以将此功能添加到主页上的特色产品分区。

2. 查找 {% form 'product'。在此标记上方添加以下代码：

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 {{current_variant.inventory_quantity }}。

1. 在文件底部，添加以下代码：

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 点击保存。

编辑 theme.js.liquid 或 theme.js

1. 打开 theme.js.liquid 或 theme.js。
2. 查找 theme.Product = (function()。在 this.selectors = { 下方添加以下代码：

inventoryHtml: '.inventoryWrapper',

1. 在同一文件中，查找 if (variant.available) {。在 } else { 语句前添加以下代码：

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 ${variantStock[variant.id]}。

1. 点击保存。

Boundless

Boundless 步骤

编辑 theme.liquid

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... 按钮 > 编辑代码。
3. 在 Layout 目录中，打开 theme.liquid。
4. 查找代码中的结束 </head> 标记。在结束 </head> 标记上方的新行中，粘贴以下代码：

<script>
  var variantStock = {};
    </script>

1. 点击保存。

编辑 product-template.liquid 或 featured-product.liquid

1. 在 Sections 目录中，打开 product-template.liquid 或 featured-product.liquid：

   • 打开 product-template.liquid 以将此功能添加到产品页面。
   • 打开 featured-product.liquid 以将此功能添加到主页上的特色产品分区。

2. 查找 {% form 'product'。在此标记上方添加以下代码：

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 {{current_variant.inventory_quantity }}。

1. 在文件底部，添加以下代码：

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 点击保存。

编辑 theme.js.liquid 或 theme.js

1. 打开“theme.js.liquid”*或 *“theme.js”。
2. 查找 theme.Product = (function()。在 var selectors = { 下方添加以下代码：

inventoryHtml: '.inventoryWrapper',

1. 在同一文件中，查找 $(selectors.SKU, this.$container).html(variant.sku);。在正下方添加以下代码：

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 ${variantStock[variant.id]}。

1. 点击保存。

Narrative

适用于 Narrative 的步骤

编辑 theme.liquid

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... 按钮 > 编辑代码。
3. 在 Layout 目录中，打开 theme.liquid。
4. 查找代码中的结束 </head> 标记。在结束 </head> 标记上方的新行中，粘贴以下代码：

<script>
      var variantStock = {};
    </script>

1. 点击保存。

编辑 product-template.liquid 或 featured-product.liquid

1. 在 Sections 目录中，打开 product-template.liquid 或 featured-product.liquid：

   • 打开 product-template.liquid 以将此功能添加到产品页面。
   • 打开 featured-product.liquid 以将此功能添加到主页上的特色产品分区。

2. 查找 {% include 'product-form' %}。在此标记上方添加以下代码：

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
      {% endif %}
</div>

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 {{current_variant.inventory_quantity }}。

1. 在文件底部，添加以下代码：

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. 点击保存。

编辑 custom.js

1. 打开 custom.js。
2. 在文件底部，添加以下代码：

var sections = window.theme.sections;
    var inventorySelectorHtml = '.inventoryWrapper';
    var productExtension = {
      init: function() {
          this.on('variant_change_successful', this._updateInventory.bind(this));
          this.on('variant_change_undefined', this._removeInventory.bind(this));
      },
      _removeInventory: function() {
    $(inventorySelectorHtml, this.container).html('');
      },
      _updateInventory: function(event, instance, product, variant) {
    if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      $(inventorySelectorHtml, this.container).html(`<p>Stock: ${variantStock[variant.id]}</p>`);
    } else {
      $(inventorySelectorHtml, this.container).html('');
    }
  }
};
    sections.extend('product-template', productExtension);
    sections.extend('featured-product', productExtension);

上述代码会输出 Stock: x。您可以通过调整 <p> 标记中的内容来更改措辞。请确保在 <p> 标记中包含 ${variantStock[variant.id]}。

1. 点击保存。