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

このページはDec 06, 2024に印刷されています。最新のバージョンについては、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の手順

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の手順

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の手順

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の手順

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の手順

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の手順

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の手順

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

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

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

[カートに追加] ボタンの言語設定を変更して、お客様が商品を選択する前に、商品が [販売不可] と表示されることがないようにできます。

手順

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] > [デフォルトテーマのコンテンツを編集する] をクリックします。
[アイテムを絞り込む] 検索バーで、「販売不可」と入力しはじめると、[販売不可] の翻訳が表示されます。
テキストを [販売不可] から「選択する」に変更します。
[保存] をクリックします。

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

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

目次

セクション対応のテーマの手順

テーマの選択

Boundlessの手順

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

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

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

手順

Debutの手順

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

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

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

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

手順

Minimalの手順

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

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

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

手順

Narrativeの手順

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

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

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

手順

Simpleの手順

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

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

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

手順

Supplyの手順

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

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

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

手順

Ventureの手順

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

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

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

手順

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

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

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

手順

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