让客户选择一个选项

备注

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

备注

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

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

当客户访问您在线商店中的产品页面时，系统会默认选中第一个可用多属性。您可以使用此自定义设置来禁用自动选择第一个可用多属性。这样一来，系统会提示客户手动选择多属性，然后才会显示所选多属性。

备注：由于此自定义设置会阻止默认选择多属性，因此在客户选择多属性之前，您的模板可能不会显示产品价格。这是预期行为，因为具有多属性的产品没有特色价格。显示的价格取决于所选的多属性。

分区模板和未分区模板

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

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

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

Sectioned themes

选择您的模板

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

Boundless

Boundless 步骤

按照以下步骤将自定义项应用于 Boundless：

编辑模板的 JavaScript 文件

若要编辑模板的 JavaScript 文件，请执行以下操作：

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

1. 在 Assets 目录中，点击 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. 在 Sections 目录中，点击 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. 点击保存。

更改 Add to cart（添加到购物车）按钮语言设置

您可以更改 Add to cart（添加到购物车）按钮的语言设置，使在没有进行任何选择之前产品不会显示为“不可用”。

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

iPhone

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

Android

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

1. 找到要编辑的模板，然后点击操作 > 编辑默认模板内容。

2. 在筛选条件框中，开始键入 unavailable 以显示“不可用”翻译。

3. 将文本不可用替换为 Make a selection：

4. 点击保存。

Debut

针对 Debut 的步骤

请按照以下步骤将自定义项应用于 Debut ：

编辑模板的 JavaScript 文件

若要编辑模板的 JavaScript 文件，请执行以下操作：

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

1. 在 Assets 目录中，点击 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. 在 Sections 目录中，点击 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. 在 Snippets 目录中，点击 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.

更改 Add to cart（添加到购物车）按钮语言设置

您可以更改 Add to cart（添加到购物车）按钮的语言设置，使在没有进行任何选择之前产品不会显示为“不可用”。

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

iPhone

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

Android

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

1. 找到要编辑的模板，然后点击操作 > 编辑默认模板内容。

2. 在筛选条件框中，开始键入 unavailable 以显示“不可用”翻译。

3. 将文本不可用替换为 Make a selection：

4. 点击保存。

Minimal

Minimal 步骤

按照以下步骤将自定义项应用于 Minimal：

编辑模板的 JavaScript 文件

若要编辑模板的 JavaScript 文件，请执行以下操作：

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

1. 在 Assets 目录中，点击 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. 在 Sections 目录中，点击 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. 点击保存。

更改 Add to cart（添加到购物车）按钮语言设置

您可以更改 Add to cart（添加到购物车）按钮的语言设置，使在没有进行任何选择之前产品不会显示为“不可用”。

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

iPhone

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

Android

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

1. 找到要编辑的模板，然后点击操作 > 编辑默认模板内容。

2. 在筛选条件框中，开始键入 unavailable 以显示“不可用”翻译。

3. 将文本不可用替换为 Make a selection：

4. 点击保存。

Narrative

适用于 Narrative 的步骤

按照以下步骤将自定义项应用于 Narrative：

编辑模板的 JavaScript 文件

若要编辑模板的 JavaScript 文件，请执行以下操作：

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

1. 在 Assets 目录中，点击 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. 在 Sections 目录中，点击 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. 点击保存。

更改 Add to cart（添加到购物车）按钮语言设置

您可以更改 Add to cart（添加到购物车）按钮的语言设置，使在没有进行任何选择之前产品不会显示为“不可用”。

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

iPhone

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

Android

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

1. 找到要编辑的模板，然后点击操作 > 编辑默认模板内容。

2. 在筛选条件框中，开始键入 unavailable 以显示“不可用”翻译。

3. 将文本不可用替换为 Make a selection：

4. 点击保存。

Simple

适用于 Simple 的步骤

按照以下步骤将自定义项应用于 Simple：

编辑模板的 JavaScript 文件

若要编辑模板的 JavaScript 文件，请执行以下操作：

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

1. 在 Assets 目录中，点击 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. 在 Sections 目录中，点击 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. 点击保存。

更改 Add to cart（添加到购物车）按钮语言设置

您可以更改 Add to cart（添加到购物车）按钮的语言设置，使在没有进行任何选择之前产品不会显示为“不可用”。

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

iPhone

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

Android

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

1. 找到要编辑的模板，然后点击操作 > 编辑默认模板内容。

2. 在筛选条件框中，开始键入 unavailable 以显示“不可用”翻译。

3. 将文本不可用替换为 Make a selection：

4. 点击保存。

Supply

针对 Supply 的步骤

请按照以下步骤将自定义项应用于 Supply：

编辑模板的 JavaScript 文件

若要编辑模板的 JavaScript 文件，请执行以下操作：

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

1. 在 Assets 目录中，点击 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. 在 Sections 目录中，点击 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. 点击保存。

更改 Add to cart（添加到购物车）按钮语言设置

您可以更改 Add to cart（添加到购物车）按钮的语言设置，使在没有进行任何选择之前产品不会显示为“不可用”。

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

iPhone

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

Android

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

1. 找到要编辑的模板，然后点击操作 > 编辑默认模板内容。

2. 在筛选条件框中，开始键入 unavailable 以显示“不可用”翻译。

3. 将文本不可用替换为 Make a selection：

4. 点击保存。

Venture

适用于 Venture 的步骤

按照以下步骤将自定义项应用于 Venture：

编辑模板的 JavaScript 文件

若要编辑模板的 JavaScript 文件，请执行以下操作：

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

1. 在 Assets 目录中，点击 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. 在 Sections 目录中，点击 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. 点击保存。

更改 Add to cart（添加到购物车）按钮语言设置

您可以更改 Add to cart（添加到购物车）按钮的语言设置，使在没有进行任何选择之前产品不会显示为“不可用”。

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

iPhone

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

Android

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

1. 找到要编辑的模板，然后点击操作 > 编辑默认模板内容。

2. 在筛选条件框中，开始键入 unavailable 以显示“不可用”翻译。

3. 将文本不可用替换为 Make a selection：

4. 点击保存。

Non-sectioned themes

向多属性下拉菜单中添加提示符

若要向多属性下拉菜单中添加提示符，请执行以下操作：

1. 在 Snippets 目录中点击添加新片段。

2. 将新的代码片段命名为 pick-an-option。

3. 在新的片段文件中，粘贴托管在 GitHub 上的此代码。

4. 点击保存。

5. 在 Layout 目录中，点击 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. 点击保存。

更改 Add to cart（添加到购物车）按钮语言设置

您可以更改 Add to cart（添加到购物车）按钮的语言设置，使在没有进行任何选择之前产品不会显示为“不可用”。

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。

iPhone

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

Android

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。

1. 找到要编辑的模板，然后点击操作 > 编辑默认模板内容。

2. 在筛选条件框中，开始键入 unavailable 以显示“不可用”翻译。

3. 将文本不可用替换为 Make a selection：

4. 点击保存。