让客户选择一个选项

注意

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

备注

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

备注

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

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

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

如果您使用让客户选择一个选项自定义项，那么在客户选择多属性之前，您的模板可能不会显示产品价格。具有多属性的产品没有特色价格，显示的价格取决于所选的多属性。

分区模板和未分区模板

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

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

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

适用于分区模板的步骤

选择您的模板

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

Boundless

Boundless 步骤

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

编辑模板的 JavaScript 文件

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
3. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。
4. 查找代码 initVariantSelectors。在该代码下方，查找以下代码：

// 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;
    }
  }
}

代码应如下所示：

// 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);

此代码行有两个实例，均可在 productVariantCallback 函数中找到。请仅将第二个实例替换为：

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

1. 点击保存。

备注

某些版本的 Boundless 不包含此步骤中要替换的代码行。如果您无法找到代码，则跳至下一步。

编辑产品页面模板

若要编辑产品页面模板，请执行以下操作：

1. 在 Sections 目录中，点击 product-template.liquid。
2. 查找以下代码：

{% assign current_variant = product.selected_or_first_available_variant %}

将其替换为：

{% 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 %}

代码应如下所示：

{% 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（添加到购物车）按钮语言设置

您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。

步骤：

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
3. 在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
4. 将文本从不可售替换为 Make a selection（请选择）。
5. 点击保存。

Debut

针对 Debut 的步骤

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

编辑模板的 JavaScript 文件

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
3. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。
4. 将以下代码添加到文件底部：

(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;
}

通过：

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

如果找不到上述代码，请查找以下代码：

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

将其替换为：

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

1. 查找代码 this.currentVariant = variant;

在下面添加以下代码：

this._updatePaymentButton(variant);

结果应如下所示：

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

1. 查找代码 _updateImages: function(variant)。替换以下代码：

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

通过：

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

1. 在下方，查找以下代码：

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

将其替换为：

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

1. 查找代码 _updateSKU: function(variant)。替换以下代码：

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

通过：

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);
}

通过：

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

备注

只需在 Debut 版本 17.5.0 及以上版本中替换此代码。

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
    })
  );
},

在上述代码下方的新行中添加以下代码：

_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');
  }
},

代码应如下所示：

_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 -%}

将其替换为：

{%- 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 variant == current_variant %} selected="selected" {%- endif -%}

1. 查找以下代码：

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

将其替换为：

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

如果找不到上述代码，请查找以下代码：

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

将其替换为：

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

备注

某些版本的 Debut 不包含此步骤中要替换的代码行。如果您无法找到代码，则跳至下一步。

1. 查找以下代码：

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

将其替换为：

{% 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 %}

将其替换为：

<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 %}

代码应如下所示：

{% 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
-%}

将其替换为：

{%- 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
-%}

备注

某些版本的 Debut 不包含此步骤中要替换的代码。如果您无法找到代码，则跳至下一步。

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

您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。

步骤：

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
3. 在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
4. 将文本从不可售替换为 Make a selection（请选择）。
5. 点击保存。

Minimal

Minimal 步骤

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

编辑模板的 JavaScript 文件

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
3. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。
4. 查找代码 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();
}

在下面的新行中添加以下代码：

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

代码应如下所示：

// 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 %}

将其替换为：

{% 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 %}

替换为：

{% 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 %}

代码应如下所示：

{% 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（添加到购物车）按钮语言设置

您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。

步骤：

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
3. 在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
4. 将文本从不可售替换为 Make a selection（请选择）。
5. 点击保存。

Narrative

适用于 Narrative 的步骤

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

编辑模板的 JavaScript 文件

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
3. 在 Assets 目录中，点击 custom.js。
4. 将以下代码添加到文件底部：

(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 -%}

将其替换为：

{%- 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 %}

代码应如下所示：

{% 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（添加到购物车）按钮语言设置

您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。

步骤：

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
3. 在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
4. 将文本从不可售替换为 Make a selection（请选择）。
5. 点击保存。

Simple

适用于 Simple 的步骤

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

编辑模板的 JavaScript 文件

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
3. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。
4. 查找代码 initProductVariant: function() {。在该代码下方，查找以下代码：

// 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;
    }
  }
}

代码应如下所示：

// 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 %}

将其替换为：

{% 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 %}

代码应如下所示：

{% 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（添加到购物车）按钮语言设置

您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。

步骤：

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
3. 在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
4. 将文本从不可售替换为 Make a selection（请选择）。
5. 点击保存。

Supply

针对 Supply 的步骤

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

编辑模板的 JavaScript 文件

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
3. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。
4. 查找代码 initProductVariant: function() {。在该代码下方，查找以下代码：

// 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;
    }
  }
}

代码应如下所示：

// 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 %}

将其替换为：

{% 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 %}

将其替换为：

{% 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 %}

代码应如下所示：

{% 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（添加到购物车）按钮语言设置

您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。

步骤：

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
3. 在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
4. 将文本从不可售替换为 Make a selection（请选择）。
5. 点击保存。

Venture

适用于 Venture 的步骤

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

编辑模板的 JavaScript 文件

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
3. 在 Assets 目录中，点击 theme.js 或 theme.js.liquid。
4. 将以下代码添加到文件底部：

(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();

将其替换为：

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

1. 查找代码 _updatePrice: function(variant)。替换以下代码：

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

通过：

/* 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 %}

将其替换为：

{% 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 variant == current_variant %} selected="selected" {% endif %}

1. 查找此代码的所有匹配项：

{% unless current_variant.available %}

将其替换为：

{% 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 %}

将其替换为：

{% 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 %}

代码应如下所示：

{% 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（添加到购物车）按钮语言设置

您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。

步骤：

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
3. 在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
4. 将文本从不可售替换为 Make a selection（请选择）。
5. 点击保存。

适用于未分区模板的步骤

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

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。 它应该是以下四个文件之一：

   • Templates 下的 product.liquid 模板
   • 布局下的 theme.liquid 布局
   • Snippets 下的 product.liquid 片段
   • Snippets 下的 single-product.liquid 片段

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>

或者，在表中查找此代码：

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

将代码替换为以下代码块：

<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>

如果您使用 Minimal、Pop 或 Supply，请查找此代码的所有匹配项：

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

将代码替换为以下代码块：

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

如果使用的是任何其他 Shopify 经典模板，请查找此代码：

{% assign current_variant = product.selected_or_first_available_variant %}

将代码替换为以下代码块：

{% assign current_variant = product.selected_variant %}

点击保存。

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

您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。

步骤：

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
3. 在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
4. 将文本从不可售替换为 Make a selection（请选择）。
5. 点击保存。