在產品頁面上顯示子類的剩餘庫存

注意

Shopify 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. 在「版面配置」目錄中，開啟 theme.liquid。
4. 找到程式碼中的結束標籤 </head>。在結束標籤 </head> 上方新的一行，貼上下列程式碼：

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

1. 點擊「儲存」。

編輯 product-template.liquid 或 featured-product.liquid

1. 在「區段」目錄中，開啟 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. 在「版面配置」目錄中，開啟 theme.liquid。
4. 找到程式碼中的結束標籤 </head>。在結束標籤 </head> 上方新的一行，貼上下列程式碼：

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

1. 點擊「儲存」。

編輯 product-template.liquid 或 featured-product.liquid

1. 在「區段」目錄中，開啟 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. 在「版面配置」目錄中，開啟 theme.liquid。
4. 找到程式碼中的結束標籤 </head>。在結束標籤 </head> 上方新的一行，貼上下列程式碼：

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

1. 點擊「儲存」。

編輯 product-template.liquid 或 featured-product.liquid

1. 在「區段」目錄中，開啟 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. 在「版面配置」目錄中，開啟 theme.liquid。
4. 找到程式碼中的結束標籤 </head>。在結束標籤 </head> 上方新的一行，貼上下列程式碼：

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

1. 點擊「儲存」。

編輯 product-template.liquid 或 featured-product.liquid

1. 在「區段」目錄中，開啟 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. 在「版面配置」目錄中，開啟 theme.liquid。
4. 找到程式碼中的結束標籤 </head>。在結束標籤 </head> 上方新的一行，貼上下列程式碼：

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

1. 點擊「儲存」。

編輯 product-template.liquid 或 featured-product.liquid

1. 在「區段」目錄中，開啟 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. 在「版面配置」目錄中，開啟 theme.liquid。
4. 找到程式碼中的結束標籤 </head>。在結束標籤 </head> 上方新的一行，貼上下列程式碼：

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

1. 點擊「儲存」。

編輯 product-template.liquid 或 featured-product.liquid

1. 在「區段」目錄中，開啟 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. 點擊「儲存」。