讓顧客選擇選項

備註

若您使用的是 Shopify 提供的免費佈景主題，您或許就能聯絡 Shopify 支援服務，取得有關本教學課程的協助。需耗時 15 分鐘的設計時間。如要深入瞭解，請參閱 佈景主題支援服務.

備註

此自訂內容僅適用於舊版 Shopify 佈景主題，且不適用於 Online Store 2.0 佈景主題。

• 瞭解您佈景主題的架構版本
• 探索 Online Store 2.0 佈景主題的自訂內容

當顧客造訪您網路商店的商品頁面時，系統會預設選取第一個可供貨的子類。您可以使用此自訂內容來停用自動選取第一個可供貨的子類。如此一來，系統就會提示顧客在顯示子類前手動選取一個子類。)

備註

由於此自訂內容根據預設不會選取子類，因此在顧客選取子類之前，您的佈景主題可能不會顯示產品價格。這是可預期的情形，因為具有子類的產品沒有特定價格，顯示的價格是依選取的子類而定。

區段式佈景主題和非區段式佈景主題

備註

此教學課程的步驟會因您使用的是區段式或非區段式佈景主題而有所不同。區段式佈景主題可供您拖放以安排首頁的版面配置，而非區段式佈景主題則無法如此執行此操作。

若要確定您的佈景主題是否支援區段，請前往佈景主題的「編輯程式碼」頁面。如果區段目錄中有檔案，就表示您正在使用區段式佈景主題。非區段式佈景主題是在 2016 年 10 月前發佈，且在區段目錄中沒有檔案。

如果您使用的是區段式佈景主題，請按一下「區段式佈景主題」按鈕，並依照說明進行操作。如果您使用的是較舊的非區段式佈景主題，請按一下「非區段式佈景主題」按鈕，並依照說明進行操作。

Sectioned themes

選擇佈景主題

此自訂程序的步驟因佈景主題而異。按一下佈景主題的按鈕，然後依照以下指示操作：

Boundless

Boundless 的步驟

請依照以下步驟，為 Boundless 套用自訂內容：

編輯您佈景主題的 JavaScipt 檔案

編輯佈景主題的 JavaScript 檔案：

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「資產」目錄中，按一下 theme.js 或 theme.js.liquid。

2. 找到程式碼 initVariantSelectors。請在其下方找到下列程式碼：

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. 找到以下程式碼行：

$(selectors.addToCartText).html(theme.strings.soldOut);

There are *two instances* of this line of code, both found within the `productVariantCallback` function. Replace only the *second* instance with:

$(selectors.addToCartText).html('Make a Selection');

> Note:
> Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

1. 點擊「儲存」。

編輯產品頁面範本

若要編輯產品頁面範本：

1. 在「區段」目錄中，按一下 product-template.liquid。

2. 找到以下程式碼：

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. 找到下列程式碼，並將其刪除：

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. 找到程式碼 {% schema %}。在其上方新的一行，貼上下列程式碼：

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. 點擊「儲存」。

變更「加入購物車」按鈕語言設定

您可以變更「加入購物車」按鈕的語言設定，如此一來產品就不會在進行選取前顯示為「無法供貨」。

電腦版

1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

1. 找到要編輯的的主題，然後按一下「動作」 > 「編輯佈景主題內容」。

2. 在「篩選」方塊中，開始輸入 unavailable 來顯示「無法供貨」的翻譯：

3. 將「無法供貨」文字取代為「Make a selection」。

4. 點擊「儲存」。

Debut

Debut 的步驟

請依照以下步驟，為 Debut 套用自訂內容：

編輯您佈景主題的 JavaScipt 檔案

編輯佈景主題的 JavaScript 檔案：

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「資產」目錄中，按一下 theme.js 或 theme.js.liquid。

2. 將以下程式碼新增到檔案的底部：

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. 找到程式碼 _updatePrice: function(variant)。取代以下程式碼：

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
}

with:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
} */

If you can't find the above code, then find the following code:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

Replace it with:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. 找到程式碼。 this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

this.currentVariant = variant;
this._updatePaymentButton(variant);

1. 找到程式碼 _updateImages: function(variant)。取代以下程式碼：

var currentVariantImage = this.currentVariant.featured_image || {};

with:

if (this.currentVariant != undefined) {
  var currentVariantImage = this.currentVariant.featured_image || {};
}

1. 請於下方找到下列程式碼：

if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
}

Replace it with:

/* if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
} */

1. 找到程式碼 _updateSKU: function(variant)。取代以下程式碼：

if (variant.sku === this.currentVariant.sku) {
  return;
}

with:

if (this.currentVariant != undefined ) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }
}

1. 找到程式碼 _initVariants: function() {。取代以下程式碼：

if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
}

with:

/* if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */

> Note:
> This code only needs to be replaced in Debut version 17.5.0 and above.

1. 找到以下程式碼：

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

Add the following code, on a new line, below the above code:

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

It should look something like this:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

1. 點擊「儲存」。

編輯產品頁面範本

若要編輯產品頁面範本：

1. 在「區段」目錄中，按一下 product-template.liquid。

2. 找到以下程式碼：

{%- assign current_variant = product.selected_or_first_available_variant -%}

Replace it with:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else %}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif %}

1. 找到下列程式碼，並將其刪除：

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

If you can't find the code above, then find this code and delete it:

{%- if variant == current_variant %} selected="selected" {%- endif -%}

1. 找到以下程式碼：

{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

Replace it with:

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

If you can't find the code above, then find this code:

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

Replace it with:

{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}

> Note:
> Some versions of Debut do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

1. 找到以下程式碼：

{% unless current_variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Replace it with:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% elsif current_variant.available %}
  {{ 'products.product.add_to_cart' | t }}
{% else %}
  {{ 'products.product.sold_out' | t }}
{% endif %}

1. 找到以下程式碼：

{% if section.settings.enable_payment_button %}
  {{ form | payment_button }}
{% endif %}

Replace it with:

<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
  {% if section.settings.enable_payment_button %}
    {{ form | payment_button }}
  {% endif %}
</div>

1. 找到程式碼 {% schema %}。在其上方新的一行，貼上下列程式碼：

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. 點擊「儲存」。

編輯產品價格程式碼片段

編輯產品價格程式碼片段：

1. 在「程式碼片段」目錄中，按一下「product-price.liquid」。

2. 找到以下程式碼：

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif
  assign money_price = price | money
-%}

Replace it with:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  elsif product.title
    assign compare_at_price = product.compare_at_price
    assign price = product.price
    assign available = product.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif
  assign money_price = price | money
-%}

> Note:
> Some versions of Debut do not include the code to be replaced in this step. If you can't find the code, then skip to the next step.

變更「加入購物車」按鈕語言設定

您可以變更「加入購物車」按鈕的語言設定，如此一來產品就不會在進行選取前顯示為「無法供貨」。

電腦版

1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

1. 找到要編輯的的主題，然後按一下「動作」 > 「編輯佈景主題內容」。

2. 在「篩選」方塊中，開始輸入 unavailable 來顯示「無法供貨」的翻譯：

3. 將「無法供貨」文字取代為「Make a selection」。

4. 點擊「儲存」。

Minimal

Minimal 的步驟

請依照以下步驟，為 Minimal 套用自訂內容：

編輯您佈景主題的 JavaScipt 檔案

編輯佈景主題的 JavaScript 檔案：

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「資產」目錄中，按一下 theme.js 或 theme.js.liquid。

2. 找到程式碼 initProductVariant: function() {。請在其下方找到下列程式碼：

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. 點擊「儲存」。

編輯產品頁面範本：

若要編輯產品頁面範本：

1. 在「區段」目錄中，按一下 product-template.liquid。

2. 找到以下程式碼：

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. 找到下列程式碼，並將其刪除：

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. 找到這段程式碼出現的所有地方：

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Replace with:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. 找到程式碼 {% schema %}。在其上方新的一行，貼上下列程式碼：

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. 點擊「儲存」。

變更「加入購物車」按鈕語言設定

您可以變更「加入購物車」按鈕的語言設定，如此一來產品就不會在進行選取前顯示為「無法供貨」。

電腦版

1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

1. 找到要編輯的的主題，然後按一下「動作」 > 「編輯佈景主題內容」。

2. 在「篩選」方塊中，開始輸入 unavailable 來顯示「無法供貨」的翻譯：

3. 將「無法供貨」文字取代為「Make a selection」。

4. 點擊「儲存」。

Narrative

Narrative 的步驟

請依照以下步驟，為 Narrative 套用自訂內容：

編輯您佈景主題的 JavaScipt 檔案

編輯佈景主題的 JavaScript 檔案：

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「資產」目錄中，按一下 custom.js。

2. 將以下程式碼新增到檔案的底部：

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. 點擊「儲存」。

編輯產品頁面範本

若要編輯產品頁面範本：

1. 在「區段」目錄中，按一下 product-template.liquid。

2. 找到以下程式碼：

{%- assign current_variant = product.selected_or_first_available_variant -%}

Replace it with:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else -%}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif -%}

1. 找到程式碼 {% schema %}。在其上方新的一行，貼上下列程式碼：

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. 點擊「儲存」。

變更「加入購物車」按鈕語言設定

您可以變更「加入購物車」按鈕的語言設定，如此一來產品就不會在進行選取前顯示為「無法供貨」。

電腦版

1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

1. 找到要編輯的的主題，然後按一下「動作」 > 「編輯佈景主題內容」。

2. 在「篩選」方塊中，開始輸入 unavailable 來顯示「無法供貨」的翻譯：

3. 將「無法供貨」文字取代為「Make a selection」。

4. 點擊「儲存」。

Simple

Simple 的步驟

請依照以下步驟，為 Simple 套用自訂內容：

編輯您佈景主題的 JavaScipt 檔案

編輯佈景主題的 JavaScript 檔案：

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「資產」目錄中，按一下 theme.js 或 theme.js.liquid。

2. 找到程式碼 initProductVariant: function() {。請在其下方找到下列程式碼：

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. 點擊「儲存」。

編輯產品頁面範本

若要編輯產品頁面範本：

1. 在「區段」目錄中，按一下 product-template.liquid。

2. 找到以下程式碼：

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. 找到下列程式碼，並將其刪除：

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. 找到程式碼 {% schema %}。在其上方新的一行，貼上下列程式碼：

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. 點擊「儲存」。

變更「加入購物車」按鈕語言設定

您可以變更「加入購物車」按鈕的語言設定，如此一來產品就不會在進行選取前顯示為「無法供貨」。

電腦版

1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

1. 找到要編輯的的主題，然後按一下「動作」 > 「編輯佈景主題內容」。

2. 在「篩選」方塊中，開始輸入 unavailable 來顯示「無法供貨」的翻譯：

3. 將「無法供貨」文字取代為「Make a selection」。

4. 點擊「儲存」。

Supply

Supply 的步驟

請依照以下步驟，為 Supply 套用自訂內容：

編輯您佈景主題的 JavaScipt 檔案

編輯佈景主題的 JavaScript 檔案：

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「資產」目錄中，按一下 theme.js 或 theme.js.liquid。

2. 找到程式碼 initProductVariant: function() {。請在其下方找到下列程式碼：

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

Add the following code on a new line below:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

It should look something like this:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. 點擊「儲存」。

編輯產品頁面範本

若要編輯產品頁面範本：

1. 在「區段」目錄中，按一下 product-template.liquid。

2. 找到以下程式碼：

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. 找到下列程式碼，並將其刪除：

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. 找到這段程式碼出現的所有地方：

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Replace it with:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. 找到程式碼 {% schema %}。在其上方新的一行，貼上下列程式碼：

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. 點擊「儲存」。

變更「加入購物車」按鈕語言設定

您可以變更「加入購物車」按鈕的語言設定，如此一來產品就不會在進行選取前顯示為「無法供貨」。

電腦版

1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

1. 找到要編輯的的主題，然後按一下「動作」 > 「編輯佈景主題內容」。

2. 在「篩選」方塊中，開始輸入 unavailable 來顯示「無法供貨」的翻譯：

3. 將「無法供貨」文字取代為「Make a selection」。

4. 點擊「儲存」。

Venture

Venture 的步驟

請依照以下步驟，為 Venture 套用自訂內容：

編輯您佈景主題的 JavaScipt 檔案

編輯佈景主題的 JavaScript 檔案：

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「資產」目錄中，按一下 theme.js 或 theme.js.liquid。

2. 將以下程式碼新增到檔案的底部：

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. 找到以下程式碼：

this.currentVariant = this._getVariantFromOptions();

Replace it with:

this.currentVariant = this._getVariantFromOptions() || {};

1. 找到程式碼 _updatePrice: function(variant)。取代以下程式碼：

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

with:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. 點擊「儲存」。

編輯產品頁面範本

若要編輯產品頁面範本：

1. 在「區段」目錄中，按一下 product-template.liquid。

2. 找到以下程式碼：

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% if product.variants.size > 1 %}
  {% assign current_variant = product.selected_variant %}
{% else %}
  {% assign current_variant = product.first_available_variant %}
{% endif %}

1. 找到下列程式碼，並將其刪除：

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

If you can't find the code above, then find this code and delete it:

{% if variant == current_variant %} selected="selected" {% endif %}

1. 找到這段程式碼出現的所有地方：

{% unless current_variant.available %}

Replace it with:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}

1. 找到以下程式碼：

{% unless current_variant.available or product.variants.size == 1 and variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Replace it with:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% else %}
  {% unless current_variant.available or product.variants.size == 1 and variant.available %}
    {{ 'products.product.sold_out' | t }}
  {% else %}
    {{ 'products.product.add_to_cart' | t }}
  {% endunless %}
{% endif %}

1. 找到程式碼 {% schema %}。在其上方新的一行，貼上下列程式碼：

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

It should look something like this:

{% if current_variant == blank %}
  <script>
    var productOptions = [];
    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}
{% schema %}

1. 點擊「儲存」。

變更「加入購物車」按鈕語言設定

您可以變更「加入購物車」按鈕的語言設定，如此一來產品就不會在進行選取前顯示為「無法供貨」。

電腦版

1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

1. 找到要編輯的的主題，然後按一下「動作」 > 「編輯佈景主題內容」。

2. 在「篩選」方塊中，開始輸入 unavailable 來顯示「無法供貨」的翻譯：

3. 將「無法供貨」文字取代為「Make a selection」。

4. 點擊「儲存」。

Non-sectioned themes

將提示新增至子類下拉式選單

為子類下拉式選單新增提示：

1. 在「程式碼片段」目錄中，按一下「新增程式碼片段」。

2. 將新的程式碼片段命名為 pick-an-option。

3. 在新的程式碼片段檔案，貼上這段託管在 GitHub 上託管的程式碼。

4. 點擊「儲存」。

5. 在「版面配置」目錄中，按一下 theme.liquid。

6. 找到靠近檔案底部的 </body> 結束標籤。在 </body> 結束標籤正上方開新一行，並貼上下列程式碼：

{% render 'pick-an-option' %}

1. 點擊「儲存」。

2. 找到含有加入購物車表單的檔案。這會將 action 屬性設定至 /cart/add。

3. 找到表單內的這段程式碼：

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

or

<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Replace it with:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

1. 找到並取代下列程式碼：

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Replace with:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

### Other free Shopify themes
If you use any other Shopify theme, then find this code:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. 點擊「儲存」。

變更「加入購物車」按鈕語言設定

您可以變更「加入購物車」按鈕的語言設定，如此一來產品就不會在進行選取前顯示為「無法供貨」。

電腦版

1. 在 Shopify 管理介面，前往「線上商店」 > 「佈景主題」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「管理佈景主題」。

1. 找到要編輯的的主題，然後按一下「動作」 > 「編輯佈景主題內容」。

2. 在「篩選」方塊中，開始輸入 unavailable 來顯示「無法供貨」的翻譯：

3. 將「無法供貨」文字取代為「Make a selection」。

4. 點擊「儲存」。