在产品页面上显示剩余的多属性库存备注如果您使用Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅Support

目录

• 答案
• 文章目录
• shopify在产品页面上显示剩余的多属性库存步骤详细回答

shopify在产品页面上显示剩余的多属性库存步骤详细回答

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

备注

如果您使用 Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅 Support for themes。

备注

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

• 找到您的模板架构版本

• 探索“Online Store 2.0”模板自定义

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

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

提示：Shopify 的 Supply 模板中已包含显示剩余数量消息设置。您可以在模板辑器中启用此设置。

• Debut

• Venture / Brooklyn / Simple / Minimal

• Boundless

• Narrative

针对 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>   {% 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 { 语句前添加以下代码：js if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) { const inventoryHtml =

   Stock: ${variantStock[variant.id]}

   ; inventoryWrapper.innerHTML = inventoryHtml; } else { inventoryWrapper.innerHTML = ''; }

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

2. 点击保存。

版本 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. 点击保存。

Shopify商户官网原文详情：

Show the remaining inventory of a variant on product pages

Note

If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version

• Explore Online Store 2.0 theme customizations

You can add a message on the product page or featured product section that shows the number of items you have in stock when inventory runs low on a product variant. For this message to show, you need to enable inventory tracking for the product.

The steps for this customization vary depending on your theme. Click the button for your theme and follow the instructions.

Tip

Shopify’s Supply theme already includes a Show remaining quantity message setting. You can enable this setting from the theme editor.

• Debut

• Venture / Brooklyn / Simple / Minimal

• Boundless

• Narrative

Steps for Debut

Edit theme.liquid

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. From the Layout directory, open theme.liquid.

4. Find the closing </head> tag in the code. On a new line above the closing </head> tag, paste the following code:

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

5. Click Save.

Edit product-template.liquid or featured-product.liquid

1. From the Sections directory, open product-template.liquid or featured-product.liquid:

• Open product-template.liquid to add this feature to product pages.

• Open featured-product.liquid to add this feature to the featured product section on the home page.

2. Find {% form 'product'. Above this tag, add the following code:

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

   The code above outputs Stock: x. You can change the wording by adjusting the content in the <p> tags. Make sure to include {{ current_variant.inventory_quantity }} in your <p> tags.

3. At the bottom of the file, add the following code:

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

4. Click Save.

Edit theme.js.liquid or theme.js

The changes that you need to make to these files depend on the version of Debut that you're using.

Versions 17.8.0 and below

1. Open theme.js.liquid or theme.js.

2. Find theme.Product = (function(). Below this.selectors = {, add the following code:

   inventoryHtml: '.inventoryWrapper',

3. In the same file, find _updateAddToCart: function(evt) {. Directly below, add the following code:

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

4. Find if (variant.available) {. Before the } else { statement, add the following code: js 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 = ''; }

   The code above outputs Stock: x. You can change the wording by adjusting the content in the <p> tags. Make sure to include ${variantStock[variant.id]} in your <p> tags.

5. Click Save.

Versions 17.9.0 and above

1. Open theme.js.liquid or theme.js.

2. Find theme.Product = (function(). Below this.selectors = {, add the following code:

   inventoryHtml: '.inventoryWrapper',

3. In the same file, find _setProductState: function(evt) {. Directly below, add the following code:

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

4. In the same function, find if (!variant) {. After the closing } bracket, add the following code:

   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 = '';   } }

   The code above outputs Stock: x. You can change the wording by adjusting the content in the <p> tags. Make sure to include ${variantStock[variant.id]} in your <p> tags.

5. Click Save.

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