お客様にオプションを選択してもらう

このページはMar 26, 2023に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-pick-an-optionをご覧ください。

お客様がオンラインストアの商品ページにアクセスすると、最初の利用可能なバリエーションがデフォルトで選択されます。このカスタマイズを使用して、最初の利用可能なバリエーションの自動選択を無効にできます。そうすることで、バリエーションが表示される前に、お客様はバリエーションを手動で選択するように促されます。)

セクション対応のテーマとセクション非対応のテーマ

メモ

このチュートリアルの手順は、セクション対応またはセクション非対応のテーマのどちらを使用しているかによって異なります。セクション対応のテーマを使用している場合は、ドラッグアンドドロップでホームページのレイアウトを配置できます。セクション非対応のテーマを使用している場合は、ドラッグアンドドロップができません。

お使いのテーマがセクションに対応しているかを確認するには、テーマのコードを編集するのページに移動します。セクションディレクトリーにファイルがある場合、お使いのファイルはセクション対応のテーマを使用しています。セクション非対応のテーマは、2016年10月以前にリリースされたものであり、セクションディレクトリーにファイルはありません。

セクション対応のテーマを使用している場合は、[セクション対応のテーマ] ボタンをクリックして表示される手順に従ってください。セクション非対応の古いテーマを使用している場合は、[セクション非対応のテーマ] ボタンをクリックして表示される手順に従ってください。

テーマの選択

テーマによってカスタマイズの手順は異なります。以下の指示に従う前にテーマのボタンをクリックしてください。

Boundlessの手順

Boundlessにカスタマイズを加える場合は、以下の手順に従ってください。

テーマのJavaScriptファイルを編集

次の手順でテーマのJavaScriptファイルを編集します。

管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

アセットディレクトリーで、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);

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

以下のコード列を探してください。

$(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.

[保存] をクリックします。

商品ページのテンプレートを編集

商品ページのテンプレートを編集するには

セクションディレクトリで、[product-template.liquid] をクリックします。
以下のコードを探してください。

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

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

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

[保存] をクリックします。

[カートに追加する] ボタンの言語設定を変更

商品が選択される前に「利用できません」と表示されないよう、[カートに追加する] ボタンの言語設定を変更することができます。

管理画面から [オンラインストア] > [テーマ] の順に移動します。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

編集するテーマを見つけて、[アクション] > [デフォルトテーマのコンテンツを編集する] をクリックします。
[絞り込み] ボックスで、unavailableと入力して「利用できない」翻訳を表示します。
[利用できません] のテキストをMake a selectionに置き換えます。
[保存] をクリックします。

Debutの手順

Debutにカスタマイズを加える場合は、以下の手順に従ってください。

テーマのJavaScriptファイルを編集

次の手順でテーマのJavaScriptファイルを編集します。

管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

アセットディレクトリーで、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 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;
} */

次のコードを探します。 this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

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

Replace it with:

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

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

以下のコードを探してください。

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

[保存] をクリックします。

商品ページのテンプレートを編集

商品ページのテンプレートを編集するには

セクションディレクトリで、[product-template.liquid] をクリックします。
以下のコードを探してください。

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

次のコードを探して削除します。

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

以下のコードを探してください。

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

以下のコードを探してください。

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

以下のコードを探してください。

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

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

[保存] をクリックします。

商品価格スニペットを編集する

次の手順で商品価格スニペットを編集します。

スニペットディレクトリーで、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
-%}

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.

[カートに追加する] ボタンの言語設定を変更

商品が選択される前に「利用できません」と表示されないよう、[カートに追加する] ボタンの言語設定を変更することができます。

管理画面から [オンラインストア] > [テーマ] の順に移動します。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

編集するテーマを見つけて、[アクション] > [デフォルトテーマのコンテンツを編集する] をクリックします。
[絞り込み] ボックスで、unavailableと入力して「利用できない」翻訳を表示します。
[利用できません] のテキストをMake a selectionに置き換えます。
[保存] をクリックします。

Minimalの手順

Minimalにカスタマイズを加える場合は、以下の手順に従ってください。

テーマのJavaScriptファイルを編集

次の手順でテーマのJavaScriptファイルを編集します。

管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

アセットディレクトリーで、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();
}

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

[保存] をクリックします。

商品ページのテンプレートを編集

商品ページのテンプレートを編集するには

セクションディレクトリで、[product-template.liquid] をクリックします。
以下のコードを探してください。

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

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

Replace with:

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

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

[保存] をクリックします。

[カートに追加する] ボタンの言語設定を変更

商品が選択される前に「利用できません」と表示されないよう、[カートに追加する] ボタンの言語設定を変更することができます。

管理画面から [オンラインストア] > [テーマ] の順に移動します。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

編集するテーマを見つけて、[アクション] > [デフォルトテーマのコンテンツを編集する] をクリックします。
[絞り込み] ボックスで、unavailableと入力して「利用できない」翻訳を表示します。
[利用できません] のテキストをMake a selectionに置き換えます。
[保存] をクリックします。

Narrativeの手順

Narrativeにカスタマイズを加える場合は、以下の手順に従ってください。

テーマのJavaScriptファイルを編集

次の手順でテーマのJavaScriptファイルを編集します。

管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

アセットディレクトリーで、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 -%}

Replace it with:

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

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

[保存] をクリックします。

[カートに追加する] ボタンの言語設定を変更

商品が選択される前に「利用できません」と表示されないよう、[カートに追加する] ボタンの言語設定を変更することができます。

管理画面から [オンラインストア] > [テーマ] の順に移動します。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

編集するテーマを見つけて、[アクション] > [デフォルトテーマのコンテンツを編集する] をクリックします。
[絞り込み] ボックスで、unavailableと入力して「利用できない」翻訳を表示します。
[利用できません] のテキストをMake a selectionに置き換えます。
[保存] をクリックします。

Simpleの手順

Simpleにカスタマイズを加える場合は、以下の手順に従ってください。

テーマのJavaScriptファイルを編集

次の手順でテーマのJavaScriptファイルを編集します。

管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

アセットディレクトリーで、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);

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

[保存] をクリックします。

商品ページのテンプレートを編集

商品ページのテンプレートを編集するには

セクションディレクトリで、[product-template.liquid] をクリックします。
以下のコードを探してください。

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

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

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

[保存] をクリックします。

[カートに追加する] ボタンの言語設定を変更

商品が選択される前に「利用できません」と表示されないよう、[カートに追加する] ボタンの言語設定を変更することができます。

管理画面から [オンラインストア] > [テーマ] の順に移動します。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

編集するテーマを見つけて、[アクション] > [デフォルトテーマのコンテンツを編集する] をクリックします。
[絞り込み] ボックスで、unavailableと入力して「利用できない」翻訳を表示します。
[利用できません] のテキストをMake a selectionに置き換えます。
[保存] をクリックします。

Supplyの手順

Supplyにカスタマイズを加える場合は、以下の手順に従ってください。

テーマのJavaScriptファイルを編集

次の手順でテーマのJavaScriptファイルを編集します。

管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

アセットディレクトリーで、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);

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

[保存] をクリックします。

商品ページのテンプレートを編集

商品ページのテンプレートを編集するには

セクションディレクトリで、[product-template.liquid] をクリックします。
以下のコードを探してください。

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

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

Replace it with:

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

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

[保存] をクリックします。

[カートに追加する] ボタンの言語設定を変更

商品が選択される前に「利用できません」と表示されないよう、[カートに追加する] ボタンの言語設定を変更することができます。

管理画面から [オンラインストア] > [テーマ] の順に移動します。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

編集するテーマを見つけて、[アクション] > [デフォルトテーマのコンテンツを編集する] をクリックします。
[絞り込み] ボックスで、unavailableと入力して「利用できない」翻訳を表示します。
[利用できません] のテキストをMake a selectionに置き換えます。
[保存] をクリックします。

Ventureの手順

Ventureにカスタマイズを加える場合は、以下の手順に従ってください。

テーマのJavaScriptファイルを編集

次の手順でテーマのJavaScriptファイルを編集します。

管理画面から [オンラインストア] > [テーマ] の順に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Shopifyアプリから [Store] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

アセットディレクトリーで、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();

Replace it with:

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

Replace it with:

{% 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 you can't find the code above, then find this code and delete it:

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

以下のコードの発生をすべて探してください。

{% unless current_variant.available %}

Replace it with:

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

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

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

[保存] をクリックします。

[カートに追加する] ボタンの言語設定を変更

商品が選択される前に「利用できません」と表示されないよう、[カートに追加する] ボタンの言語設定を変更することができます。

管理画面から [オンラインストア] > [テーマ] の順に移動します。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

編集するテーマを見つけて、[アクション] > [デフォルトテーマのコンテンツを編集する] をクリックします。
[絞り込み] ボックスで、unavailableと入力して「利用できない」翻訳を表示します。
[利用できません] のテキストをMake a selectionに置き換えます。
[保存] をクリックします。

バリエーションのドロップダウンメニューにプロンプトを追加する

バリエーションのドロップダウンメニューにプロンプトを追加するには、次の手順を実行します。

スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。
新しいスニペットにpick-an-optionと名付けます。
新しいスニペットファイルに、GitHubでホスティングされている以下のコードを貼り付けます。
[保存] をクリックします。
レイアウトディレクトリーで、theme.liquidをクリックします。
ファイルの末尾の近くにあるクロージング</body>タグを探します。クロージング</body>タグの上にある新しい行に、以下のコードを貼り付けます。

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

[保存] をクリックします。
[カートに追加する] フォームが含まれているファイルを探します。そのファイルには、/cart/addに設定されたaction属性があります。
フォーム内で以下のコードを探してください。

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

以下のコードを探して置き換えます。

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

[保存] をクリックします。

[カートに追加する] ボタンの言語設定を変更

商品が選択される前に「利用できません」と表示されないよう、[カートに追加する] ボタンの言語設定を変更することができます。

管理画面から [オンラインストア] > [テーマ] の順に移動します。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

Shopifyアプリで [ストア] をタップします。
[販売チャネル] セクションで、[オンラインストア] をタップします。
[テーマを管理する] をタップします。

編集するテーマを見つけて、[アクション] > [デフォルトテーマのコンテンツを編集する] をクリックします。
[絞り込み] ボックスで、unavailableと入力して「利用できない」翻訳を表示します。
[利用できません] のテキストをMake a selectionに置き換えます。
[保存] をクリックします。

お客様にオプションを選択してもらう

セクション対応のテーマとセクション非対応のテーマ

テーマの選択

Boundlessの手順

テーマのJavaScriptファイルを編集

商品ページのテンプレートを編集

[カートに追加する] ボタンの言語設定を変更

Debutの手順

テーマのJavaScriptファイルを編集

商品ページのテンプレートを編集

商品価格スニペットを編集する

[カートに追加する] ボタンの言語設定を変更

Minimalの手順

テーマのJavaScriptファイルを編集

商品ページのテンプレートを編集

[カートに追加する] ボタンの言語設定を変更

Narrativeの手順

テーマのJavaScriptファイルを編集

商品ページのテンプレートを編集

[カートに追加する] ボタンの言語設定を変更

Simpleの手順

テーマのJavaScriptファイルを編集

商品ページのテンプレートを編集

[カートに追加する] ボタンの言語設定を変更

Supplyの手順

テーマのJavaScriptファイルを編集

商品ページのテンプレートを編集

[カートに追加する] ボタンの言語設定を変更

Ventureの手順

テーマのJavaScriptファイルを編集

商品ページのテンプレートを編集

[カートに追加する] ボタンの言語設定を変更

バリエーションのドロップダウンメニューにプロンプトを追加する

[カートに追加する] ボタンの言語設定を変更

Shopifyで販売を開始する準備はできていますか?