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

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

オプションを選択

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

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

テーマの選択

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

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

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

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

  1. スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。
  2. 新しいスニペットにpick-an-optionと名付けます。

新しいスニペットを追加する

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

オプション選択スニペットを含む

  1. [保存] をクリックします。
  2. [カートに追加する] フォームが含まれているファイルを探します。そのファイルには、/cart/addに設定されたaction属性があります。 以下の4ファイルのうちいずれかに含まれる必要があります。

    • テンプレートにあるproduct.liquidテンプレート
    • レイアウトにあるtheme.liquidレイアウト
    • スニペットにあるproduct.liquidスニペット
    • スニペットにあるsingle-product.liquidスニペット
  3. フォーム内で以下のコードを探してください。

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

または

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

以下と置き換えます。

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
  1. 以下のコードを探して置き換えます。
    • Minimal、Pop、またはSupply: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テーマ:その他のShopifyテーマを使用している場合は、以下のコードを探してください。
{% assign current_variant = product.selected_or_first_available_variant %}

以下と置き換えます。

{% assign current_variant = product.selected_variant %}
  1. [保存] をクリックします。

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

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

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[...] > [デフォルトテーマのコンテンツを編集する] をクリックします。
  3. [絞り込み] ボックスで、unavailableと入力して「利用できない」翻訳を表示します。
  4. [利用できません] のテキストをMake a selectionに置き換えます。
  5. [保存] をクリックします。

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

無料体験を試す