お客様にオプションを選択してもらう
お客様がオンラインストアの商品ページにアクセスすると、最初の利用可能なバリエーションがデフォルトで選択されます。[お客様にオプションを選択してもらう] カスタマイズを使用して、最初の利用可能なバリエーションの自動選択を無効にできます。そうすることで、バリエーションが表示される前に、お客様はバリエーションを手動で選択するように促されます。
[お客様にオプションを選択してもらう] カスタマイズを使用する場合、テーマでは、お客様がバリエーションを選択するまで商品価格が表示されない場合があります。バリエーションのある商品には設定価格がなく、表示される価格は選択されるバリエーションによって決まります。
セクション対応のテーマとセクション非対応のテーマ
セクション対応のテーマの手順
テーマの選択
テーマによってカスタマイズの手順は異なります。以下の指示に従う前にテーマのボタンをクリックしてください。
Boundlessの手順
Boundlessにカスタマイズを加える場合は、以下の手順に従ってください。
テーマのJavaScriptファイルを編集
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
-
アセットディレクトリーで、
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);
このコード列には2つのインスタンスがあり、どちらもproductVariantCallback
関数に含まれています。2番目のインスタンスのみを次と置き換えます。
$(selectors.addToCartText).html('Make a Selection');
- [保存] をクリックします。
商品ページのテンプレートを編集
商品ページのテンプレートを編集するには
-
セクションディレクトリで、[
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 %}
- [保存] をクリックします。
[カートに追加する] ボタンの言語設定を変更
[カートに追加] ボタンの言語設定を変更して、お客様が商品を選択する前に、商品が [販売不可] と表示されることがないようにできます。
手順
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] > [デフォルトテーマのコンテンツを編集する] をクリックします。
- [アイテムを絞り込む] 検索バーで、「販売不可」と入力しはじめると、[販売不可] の翻訳が表示されます。
- テキストを [販売不可] から「選択する」に変更します。
- [保存] をクリックします。
Debutの手順
Debutにカスタマイズを加える場合は、以下の手順に従ってください。
テーマのJavaScriptファイルを編集
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
-
アセットディレクトリーで、
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;
}
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 (
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 || {};
with:
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;
}
with:
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);
}
with:
/* 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');
}
},
- [保存] をクリックします。
商品ページのテンプレートを編集
商品ページのテンプレートを編集するには
-
セクションディレクトリで、[
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 %}
- [保存] をクリックします。
商品価格スニペットを編集する
次の手順で商品価格スニペットを編集します。
-
スニペットディレクトリーで、
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
-%}
[カートに追加する] ボタンの言語設定を変更
[カートに追加] ボタンの言語設定を変更して、お客様が商品を選択する前に、商品が [販売不可] と表示されることがないようにできます。
手順
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] > [デフォルトテーマのコンテンツを編集する] をクリックします。
- [アイテムを絞り込む] 検索バーで、「販売不可」と入力しはじめると、[販売不可] の翻訳が表示されます。
- テキストを [販売不可] から「選択する」に変更します。
- [保存] をクリックします。
Minimalの手順
Minimalにカスタマイズを加える場合は、以下の手順に従ってください。
テーマのJavaScriptファイルを編集
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
-
アセットディレクトリーで、
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;
}
}
}
- [保存] をクリックします。
商品ページのテンプレートを編集
商品ページのテンプレートを編集するには
-
セクションディレクトリで、[
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 %}
- [保存] をクリックします。
[カートに追加する] ボタンの言語設定を変更
[カートに追加] ボタンの言語設定を変更して、お客様が商品を選択する前に、商品が [販売不可] と表示されることがないようにできます。
手順
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] > [デフォルトテーマのコンテンツを編集する] をクリックします。
- [アイテムを絞り込む] 検索バーで、「販売不可」と入力しはじめると、[販売不可] の翻訳が表示されます。
- テキストを [販売不可] から「選択する」に変更します。
- [保存] をクリックします。
Narrativeの手順
Narrativeにカスタマイズを加える場合は、以下の手順に従ってください。
テーマのJavaScriptファイルを編集
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
-
アセットディレクトリーで、
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;
}
}
}
})();
- [保存] をクリックします。
商品ページのテンプレートを編集
商品ページのテンプレートを編集するには
-
セクションディレクトリで、[
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 %}
- [保存] をクリックします。
[カートに追加する] ボタンの言語設定を変更
[カートに追加] ボタンの言語設定を変更して、お客様が商品を選択する前に、商品が [販売不可] と表示されることがないようにできます。
手順
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] > [デフォルトテーマのコンテンツを編集する] をクリックします。
- [アイテムを絞り込む] 検索バーで、「販売不可」と入力しはじめると、[販売不可] の翻訳が表示されます。
- テキストを [販売不可] から「選択する」に変更します。
- [保存] をクリックします。
Simpleの手順
Simpleにカスタマイズを加える場合は、以下の手順に従ってください。
テーマのJavaScriptファイルを編集
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
-
アセットディレクトリーで、
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;
}
}
}
- [保存] をクリックします。
商品ページのテンプレートを編集
商品ページのテンプレートを編集するには
-
セクションディレクトリで、[
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 %}
- [保存] をクリックします。
[カートに追加する] ボタンの言語設定を変更
[カートに追加] ボタンの言語設定を変更して、お客様が商品を選択する前に、商品が [販売不可] と表示されることがないようにできます。
手順
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] > [デフォルトテーマのコンテンツを編集する] をクリックします。
- [アイテムを絞り込む] 検索バーで、「販売不可」と入力しはじめると、[販売不可] の翻訳が表示されます。
- テキストを [販売不可] から「選択する」に変更します。
- [保存] をクリックします。
Supplyの手順
Supplyにカスタマイズを加える場合は、以下の手順に従ってください。
テーマのJavaScriptファイルを編集
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
-
アセットディレクトリーで、
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;
}
}
}
- [保存] をクリックします。
商品ページのテンプレートを編集
商品ページのテンプレートを編集するには
-
セクションディレクトリで、[
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 %}
- [保存] をクリックします。
[カートに追加する] ボタンの言語設定を変更
[カートに追加] ボタンの言語設定を変更して、お客様が商品を選択する前に、商品が [販売不可] と表示されることがないようにできます。
手順
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] > [デフォルトテーマのコンテンツを編集する] をクリックします。
- [アイテムを絞り込む] 検索バーで、「販売不可」と入力しはじめると、[販売不可] の翻訳が表示されます。
- テキストを [販売不可] から「選択する」に変更します。
- [保存] をクリックします。
Ventureの手順
Ventureにカスタマイズを加える場合は、以下の手順に従ってください。
テーマのJavaScriptファイルを編集
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
-
アセットディレクトリーで、
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;
}
with:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
- [保存] をクリックします。
商品ページのテンプレートを編集
商品ページのテンプレートを編集するには
-
セクションディレクトリで、[
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 %}
- [保存] をクリックします。
[カートに追加する] ボタンの言語設定を変更
[カートに追加] ボタンの言語設定を変更して、お客様が商品を選択する前に、商品が [販売不可] と表示されることがないようにできます。
手順
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] > [デフォルトテーマのコンテンツを編集する] をクリックします。
- [アイテムを絞り込む] 検索バーで、「販売不可」と入力しはじめると、[販売不可] の翻訳が表示されます。
- テキストを [販売不可] から「選択する」に変更します。
- [保存] をクリックします。
セクション非対応のテーマの手順
バリエーションのドロップダウンメニューにプロンプトを追加する
- スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。
- 新しいスニペットに
pick-an-option
と名付けます。 - 新しいスニペットファイルに、GitHubでホスティングされている以下のコードを貼り付けます。
- [保存] をクリックします。
-
レイアウトディレクトリーで、
theme.liquid
をクリックします。 - ファイルの末尾の近くにあるクロージング
</body>
タグを探します。クロージング</body>
タグの上にある新しい行に、以下のコードを貼り付けます。
{% render 'pick-an-option' %}
- [保存] をクリックします。
-
[カートに追加する] フォームが含まれているファイルを探します。そのファイルには、
/cart/add
に設定されたaction
属性があります。 以下の4ファイルのうちいずれかに含まれる必要があります。-
テンプレートにある
product.liquid
テンプレート -
レイアウトにある
theme.liquid
レイアウト -
スニペットにある
product.liquid
スニペット -
スニペットにある
single-product.liquid
スニペット
-
テンプレートにある
フォーム内で以下のコードを探してください。
<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 %}
[保存] をクリックします。
[カートに追加する] ボタンの言語設定を変更
[カートに追加] ボタンの言語設定を変更して、お客様が商品を選択する前に、商品が [販売不可] と表示されることがないようにできます。
手順
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] > [デフォルトテーマのコンテンツを編集する] をクリックします。
- [アイテムを絞り込む] 検索バーで、「販売不可」と入力しはじめると、[販売不可] の翻訳が表示されます。
- テキストを [販売不可] から「選択する」に変更します。
- [保存] をクリックします。