让客户选择一个选项
当客户访问您在线商店中的产品页面时，系统会默认选中第一个可售多属性。您可以使用让客户选择一个选项自定义设置来停用自动选择第一个可售多属性。这样一来，系统会提示客户手动选择多属性，然后才会显示所选多属性。
如果您使用让客户选择一个选项自定义项，那么在客户选择多属性之前，您的模板可能不会显示产品价格。具有多属性的产品没有特色价格，显示的 价格取决于所选的多属性。
分区模板和未分区模板
本页相关主题
适用于分区模板的步骤
选择您的模板
此自定义的步骤因您的模板而异。点击模板的按钮，然后按照以下说明操作：
Boundless
Boundless 步骤
按照以下步骤将自定义项应用于 Boundless：
编辑模板的 JavaScript 文件
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Assets 目录中，点击
theme.js或theme.js.liquid。查找代码
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;
}
}
}- 查找以下代码行：
$(selectors.addToCartText).html(theme.strings.soldOut);此代码行有两个实例，均可在 productVariantCallback 函数中找到。请仅将第二个实例替换为：
$(selectors.addToCartText).html('Make a Selection');- 点击保存。
编辑产品页面模板
若要编辑产品页面模板，请执行以下操作：
- 在 Sections 目录中，点击
product-template.liquid。 - 查找以下代码：
{% assign current_variant = product.selected_or_first_available_variant %}将其替换为：
{% assign current_variant = product.selected_variant %}- 查找以下代码并将其删除：
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}- 查找代码
{% 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 %}- 点击保存。
更改 Add to cart（添加到购物车）按钮语言设置
您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
将文本从不可售替换为 Make a selection（请选择）。
点击保存。
Debut
针对 Debut 的步骤
请按照以下步骤将自定义项应用于 Debut ：
编辑模板的 JavaScript 文件
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Assets 目录中，点击
theme.js或theme.js.liquid。将以下代码添加到文件底部：
(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;
}
}
}
})();-
查找代码
_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;
} */-
查找代码
this.currentVariant = variant;
在下面添加以下代码：
this._updatePaymentButton(variant);结果应如下所示：
this.currentVariant = variant;
this._updatePaymentButton(variant);-
查找代码
_updateImages: function(variant)。替换以下代码：
var currentVariantImage = this.currentVariant.featured_image || {};通过：
if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}- 在下方，查找以下代码：
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}将其替换为：
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */-
查找代码
_updateSKU: function(variant)。替换以下代码：
if (variant.sku === this.currentVariant.sku) {
return;
}通过：
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}-
查找代码
_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);
} */- 查找以下代码：
_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');
}
},- 点击保存。
编辑产品页面模板
若要编辑产品页面模板，请执行以下操作：
- 在 Sections 目录中，点击
product-template.liquid。 - 查找以下代码：
{%- 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 %}- 查找以下代码并将其删除：
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}如果找不到上述代码，请找到以下代码并将其删除：
{%- if variant == current_variant %} selected="selected" {%- endif -%}- 查找以下代码：
{%- 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 -%}- 查找以下代码：
{% 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 %}- 查找以下代码：
{% 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>- 查找代码
{% 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 %}- 点击保存。
编辑产品价格片段
若要编辑产品价格代码片段，请执行以下操作：
- 在 Snippets 目录中，点击
product-price.liquid。 - 查找以下代码：
{%- 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
-%}更改 Add to cart（添加到购物车）按钮语言设置
您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
将文本从不可售替换为 Make a selection（请选择）。
点击保存。
Minimal
Minimal 步骤
按照以下步骤将自定义项应用于 Minimal：
编辑模板的 JavaScript 文件
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Assets 目录中，点击
theme.js或theme.js.liquid。查找代码
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;
}
}
}- 点击保存。
编辑产品页面模板
若要编辑产品页面模板，请执行以下操作：
- 在 Sections 目录中，点击
product-template.liquid。 - 查找以下代码：
{% assign variant = product.selected_or_first_available_variant %}将其替换为：
{% assign variant = product.selected_variant %}- 查找以下代码并将其删除：
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}- 查找此代码的所有匹配项：
{% 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 %}- 查找代码
{% 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 %}- 点击保存。
更改 Add to cart（添加到购物车）按钮语言设置
您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
将文本从不可售替换为 Make a selection（请选择）。
点击保存。
Narrative
适用于 Narrative 的步骤
按照以下步骤将自定义项应用于 Narrative：
编辑模板的 JavaScript 文件
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击 编辑代码。
在 Assets 目录中，点击
custom.js。将以下代码添加到文件底部：
(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;
}
}
}
})();- 点击保存。
编辑产品页面模板
若要编辑产品页面模板，请执行以下操作：
- 在 Sections 目录中，点击
product-template.liquid。 - 查找以下代码：
{%- 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 -%}- 查找代码
{% 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 %}- 点击保存。
更改 Add to cart（添加到购物车）按钮语言设置
您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
将文本从不可售替换为 Make a selection（请选择）。
点击保存。
Simple
适用于 Simple 的步骤
按照以下步骤将自定义项应用于 Simple：
编辑模板的 JavaScript 文件
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Assets 目录中，点击
theme.js或theme.js.liquid。查找代码
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;
}
}
}- 点击保存。
编辑产品页面模板
若要编辑产品页面模板，请执行以下操作：
- 在 Sections 目录中，点击
product-template.liquid。 - 查找以下代码：
{% assign current_variant = product.selected_or_first_available_variant %}将其替换为：
{% assign current_variant = product.selected_variant %}- 查找以下代码并将其删除：
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}- 查找代码
{% 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 %}- 点击保存。
更改 Add to cart（添加到购物车）按钮语言设置
您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
将文本从不可售替换为 Make a selection（请选择）。
点击保存。
Supply
针对 Supply 的步骤
请按照以下步骤将自定义项应用于 Supply：
编辑模板的 JavaScript 文件
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Assets 目录中，点击
theme.js或theme.js.liquid。查找代码
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;
}
}
}- 点击保存。
编辑产品页面模板
若要编辑产品页面模板，请执行以下操作：
- 在 Sections 目录中，点击
product-template.liquid。 - 查找以下代码：
{% assign variant = product.selected_or_first_available_variant %}将其替换为：
{% assign variant = product.selected_variant %}- 查找以下代码并将其删除：
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}- 查找此代码的所有匹配项：
{% 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 %}- 查找代码
{% 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 %}- 点击保存。
更改 Add to cart（添加到购物车）按钮语言设置
您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
将文本从不可售替换为 Make a selection（请选择）。
点击保存。
Venture
适用于 Venture 的步骤
按照以下步骤将自定义项应用于 Venture：
编辑模板的 JavaScript 文件
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Assets 目录中，点击
theme.js或theme.js.liquid。将以下代码添加到文件底部：
(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;
}
}
}
})();- 查找以下代码：
this.currentVariant = this._getVariantFromOptions();将其替换为：
this.currentVariant = this._getVariantFromOptions() || {};-
查找代码
_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;
} */- 点击保存。
编辑产品页面模板
若要编辑产品页面模板，请执行以下操作：
- 在 Sections 目录中，点击
product-template.liquid。 - 查找以下代码：
{% 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 %}- 查找以下代码并将其删除：
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}如果找不到上述代码，请找到以下代码并将其删除：
{% if variant == current_variant %} selected="selected" {% endif %}- 查找此代码的所有匹配项：
{% unless current_variant.available %}将其替换为：
{% unless current_variant.available or product.variants.size == 1 and variant.available %}- 查找以下代码：
{% 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 %}- 查找代码
{% 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 %}- 点击保存。
更改 Add to cart（添加到购物车）按钮语言设置
您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不会显示为不可售。
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
将文本从不可售替换为 Make a selection（请选择）。
点击保存。
适用于未分区模板的步骤
向多属性下拉菜单中添加提示符
- 在 Snippets 目录中点击添加新片段。
- 将新的代码片段命名为
pick-an-option。 - 在新的片段文件中，粘贴托管在 GitHub 上的此代码。
- 点击保存。
- 在 Layout 目录中，点击
theme.liquid。 -
找到文件底部附近的结束
</body>标签。在结束</body>标签正上方的新代码行中粘贴以下代码：
{% render 'pick-an-option' %}- 点击保存。
-
查找包含添加到购物车窗体的文件。它的
action属性将已设置为/cart/add。 它应该是以下四个文件之一：-
Templates 下的
product.liquid模板 -
布局下的
theme.liquid布局 -
Snippets 下的
product.liquid片段 -
Snippets 下的
single-product.liquid片段
-
Templates 下的
在表中查找此代码：
<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（添加到购物车）按钮语言设置
您可以更改添加到购物车按钮的语言设置，以便在客户选择产品之前，产品不 会显示为不可售。
步骤：
在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，然后点击 ... > 编辑默认模板内容。
在筛选商品搜索栏中，开始键入 unavailable（不可售）以显示不可售的翻译。
将文本从不可售替换为 Make a selection（请选择）。
点击保存。