条件付き商品オプション:該当するときだけフィールドを表示する
長いフォームは買い物客を離れさせます。条件付きフィールドなら、各注文に必要なことだけを尋ねられます。そのまま使える実例付きです。

条件付きフィールドとは
条件付きフィールドは、前の回答が必要としたときだけ表示されます。「ギフト包装」にチェックを入れると、包装紙の選択肢が現れます。「ギフトメッセージを追加」にチェックを入れると、メッセージ欄が現れます。カスタムサイズを選ぶと、採寸の入力が求められます。
それらを望まない買い物客には、決して表示されません。望む買い物客には、次に必要な質問だけが届きます。
なぜ重要か
買い物客が読むフィールドは、ひとつひとつが離脱のきっかけになります。ギフトメッセージ、裏面の刻印、採寸を全員に表示すると、多くの買い物客が自分に関係のない質問を読むことになり、カートに追加するまでたどり着けずに去ってしまう人もいます。
条件付きフィールドなら、買い物客ごとにフォームを短く保ちながら、必要な注文の情報はすべて集められます。注文もきれいに保てます。ギフトのない注文に、空の「ギフトメッセージ:」行が残ることはありません。
3種類の条件
ほぼすべての条件付きフィールドは、次の3つのルールのいずれかを使います。
- フィールドが入力されたとき: チェックボックスにチェックが入る、またはテキスト欄に何か入力されている。「内側に刻印」にチェックを入れると「内側のメッセージ」が表示されます。
- フィールドが特定の値のとき: 「文言」を「自分の言葉」に設定すると、買い物客自身の言葉を入力する欄が表示されます。
- フィールドが特定の値以外のとき: カードを「カードなし」以外に設定すると「カードメッセージ」が表示されます。
実際のテンプレートから見るパターン
以下はすべて、当社のテンプレートからそのまま紹介するものです。
- リング: 「内側に刻印」で「内側のメッセージ」が表示され、最大16文字です。
- ペンダント: +¥800の「裏面に刻印」で「裏面の刻印」が表示されます。
- 座標ブレスレット: 「刻印する面」を「表と裏」(+¥800)に設定すると、裏面用のフィールドが表示されます。
- ギフト: +¥400の「ギフト包装」で包装紙が表示され、「ギフトメッセージを追加」でメッセージが表示されます。
- 衣類: サイズを「カスタム」に設定すると「採寸」が表示されます。
- 印刷: デザインを「画像をアップロード」に設定するとアップロード欄が表示され、「テキスト」に設定すると代わりにテキスト欄が表示されます。
- マップ: 「場所の数」を2または3に設定すると、2番目と3番目の場所が+¥1,000と+¥2,000で表示されます。
- メモリアル: 「文言」を「自分の言葉」に設定すると「あなたの言葉」が表示されます。
買い物客がオプトアウトできるようにする
条件は逆方向にも使えます。当社の「パーソナライズをスキップ」テンプレートは「パーソナライズする」チェックボックスから始まり、チェックを入れたときだけ「イニシャル」と「糸の色」が表示されるので、買い物客はフィールドを読み飛ばさずにシンプルなバージョンを購入できます。
まだ詳細が決まっていない買い物客向けに、「詳細は後で」設定には「チェックアウト後に詳細を送ります」というチェックボックスがあり、名前と日付のフィールドを隠します。注文は今受け取り、詳細はメールで受け取れます。
きれいな条件のためのルール
- 判断の決め手となる質問を最初に尋ねる。 フィールドはその上にある回答だけに依存させ、買い物客が読んでいる位置より上に何かが飛び込まないようにします。
- 隠れているものに課金しない。 価格付きフィールドが消えると、その価格も合計から外れます。
- 隠れているものを必須にしない。 必須フィールドは、買い物客が見えている間だけカートに追加するをブロックするようにします。
- できるだけ1階層にとどめる。 条件の連鎖は、買い物客にとってもあなたにとっても追いにくくなります。
- トリガーを明確にする。 「裏面に刻印 (+¥800)」は、チェックを入れると何が起きるかを示しています。
トリガーと続くフィールドは一緒に書く
トリガーと、それが開くフィールドは、ペアとして読めるようにします。
- 「ギフトメッセージを追加」で「ギフトメッセージ」が開きます。
- 「差出人住所を印刷 (+¥1,000)」で、個人用便箋の「差出人住所」が開きます。
- 「誕生データを追加 (+¥800)」で、赤ちゃんの名前ブランケットの「誕生データ」が開きます。
買い物客がチェックボックスを入れたとき、次に表示されるものは、入力すると予想していたものとまったく同じであるべきです。
条件と価格
条件と価格は相性の良い組み合わせです。価格は判断の基準となる回答(「食べられる写真を追加」+¥1,000)に設定し、続くフィールド(「ケーキ用の写真」)には独自の価格を表示しません。購入者は選択した瞬間に一度だけコストを目にします。
選択肢が別のフィールドの価格を変えることもできます。ネームネックレスのテンプレートでは、チェーンの長さの価格は金属によって変わります。18 inのチェーンはゴールドで¥1,500、シルバーで¥500が加算されます。
条件を使わないほうがよい場合
- すべての購入者に必要な場合。そのフィールドがないと商品を作れないなら、最初から表示しましょう。
- 商品そのものが変わる場合。在庫として持つ別のサイズや素材はバリエーションであり、条件ではありません。
- コストを隠してしまう場合。価格を加算する回答は常に表示し、その続きのフィールドだけを後から表示できます。
購入者の立場でテストする
すべての経路をたどりましょう。選択し、気が変わり、また選び直す。合計がそれに追随するか、非表示のフィールドが注文に含まれないか、管理画面の注文が明確に読めるかを確認します。長いフォームが最も負担になるスマートフォンでも試しましょう。
GMVifyなら
GMVify Custom Product Optionsは、以前の回答が必要としたときにだけフィールドを表示し、ネームジュエリーの設定における金属ごとのチェーン価格のように、ある選択肢の価格を別の選択肢で決められます。上記のテンプレートは条件があらかじめ設定されているので、動くフォームから始めて、文言と価格をご自身のものに変えるだけです。
マーチャントからの質問
Shopifyには条件付きオプションが標準で備わっていますか?
カスタムフィールドには備わっていません。Shopifyの商品オプションは他のフィールドを表示・非表示にしません。条件付きフィールドはテーマコードかアプリで実現します。
非表示のフィールドは必須にすべきですか?
いいえ。買い物客が見られないフィールドがカートに追加するをブロックすべきではありません。
条件をバリエーションに依存させることはできますか?
できるだけフィールドに条件を設定しましょう。続きのフィールドが1つのバリエーションにしか当てはまらないなら、独立した商品にするか、フィールドの選択肢にするほうが明確なことが多いです。
条件が多すぎる目安は?
フォームを一文で説明できなくなったときです。ほとんどの商品に必要な条件付きフィールドは1つか2つで、それぞれ1階層までです。
非表示のフィールドは注文に表示されますか?
表示されるべきではありません。購入者が見て入力できたフィールドだけが注文に届くべきです。
条件付きフィールドに独自の価格を設定できますか?
できますが、できるだけ判断の基準となる回答に価格を設定し、購入者が選択した瞬間にコストを目にするようにしましょう。
