商品ごとにバリエーションを選択してもらう方法（スウォッチ）

数量割引オファーでバリエーションセレクターを有効にすると、購入者は各アイテムのサイズ、色、その他のオプションを選択できます。たとえば、Buy 2オファーにSmall Ivoryのバッグ1個とLarge Blushのバッグ1個を含められます。ドロップダウン、カラースウォッチ、ボタン、バリエーション画像から選び、選択肢をわかりやすく表示できます。

バリエーションセレクターを有効にする

この設定は、バンドルエディターのアドオンタブにあるバリエーションセレクターカードにあります。カードヘッダーのスイッチで、オンとオフを切り替えられます。

1. 編集するバンドルを開き、アドオンタブに移動して、バリエーションセレクターカードを見つけます。
2. カードヘッダーのスイッチをオンにします。

通常の数量割引とBuy X, get Yオファーでは、この設定を有効にすると各アイテムで個別に選択できます。オフの場合、固定されていない通常のオファーでは、テーマで選択されたバリエーションが使用されます。商品バンドルカードや、特定のバリエーションセットに固定されたメイン商品には、カード内のピッカーが引き続き表示される場合があります。

スイッチで制御される内容

通常のオファーでは、このスイッチによってメイン商品のアイテムごとのピッカーを制御します。商品バンドルのメインカードでは、スイッチがオフでもカード内のピッカーが維持されるため、購入者は他の必須商品と一緒に選択できます。必須バンドル商品、ギフト、任意の追加商品にも、該当する場合はそれぞれの選択肢が維持されます。固定されたメイン商品では、スイッチがオフでも、固定したバリエーションに限定された通常のピッカーが表示される場合があります。

スイッチがオフの場合、商品バンドルの行には通常のドロップダウンが使用されます。オンの場合、設定した表示形式が必須バンドル商品の行にも適用されます。ギフトと任意の追加商品のピッカーには、それぞれのコントロールが使用されます。選択可能なバリエーションが1つしかない商品では、不要なドロップダウンの代わりに、その内容がテキストで表示される場合があります。

各オプションの表示形式を設定する

スイッチをオンにすると、Bundlexはこのバンドルが適用される商品のバリエーションオプションを読み込み、オプション、表示形式、プリセットの3列の表に一覧表示します。各行は1つのオプションです（例: サイズ、色）。

表示形式列で、商品ページでのオプションの表示方法を選択します。

• ドロップダウン - 標準の選択メニューです。
• カラースウォッチ - 小さな色チップです。各値に色を割り当てられます（下記参照）。
• ピル / ボタン - タップできるピルまたはボタンです。必要に応じてバリエーション画像も表示できます。
• バリエーション画像 - 各値を商品の画像として表示します。

オプションごとに表示形式を組み合わせることもできます。たとえば、同じ商品で色にはカラースウォッチ、サイズにはドロップダウンを使用できます。オプション名の横にある表示アイコン（目のアイコン）をクリックすると、そのオプションを持つ商品がプレビューパネルに表示されます。

共有プリセットを選択する

プリセット列では、表示形式のビジュアルスタイルを設定します。プリセットは表示形式ごとに共有されます。同じ表示形式を使用するすべてのオプションで1つのプリセットが共有されるため、1つのオプションのプリセットを変更すると、その表示形式を使用する他のすべてのオプションも更新されます。カラースウォッチ、ピル / ボタン、バリエーション画像にはそれぞれ独自のプリセットがあり、ドロップダウンにはプリセットがありません。

プリセットメニューでカスタムを選択すると、スウォッチスタイルセクションが開き、組み込みプリセットよりも細かくスタイルを調整できます。

カラースウォッチに色を割り当てる

オプションでカラースウォッチの表示形式を使用すると、各値にカラーピッカー付きの色フィールドが表示されます。次の操作ができます。

• カラーピッカーで各色を手動設定するか、16進数の値を入力します。
• 色を自動検出をクリックすると、値の名前（例: 「Navy」や「Forest green」）から色が自動入力されます。自動検出で入力されるのは、まだ空の値だけです。すべての色が設定されると利用できなくなります。

デスクトップで色名を表示

スウォッチスタイル > カラースウォッチを開き、ホバー時に色名を表示をオンにすると、色名のツールチップが表示されます。これは色チップに適用され、すべての表示形式に適用されるわけではありません。タッチデバイスではホバーツールチップは表示されません。

バリエーション画像を表示する

バリエーション画像を表示をオンにすると（セレクターを有効にした後に利用可能）、選択したバリエーションの画像がバリエーションセレクターの横に表示されます。これはバリエーション画像の表示形式だけでなく、すべてのセレクター形式で機能します。

テーマのバリエーションピッカーを非表示にする

セレクターを有効にすると、テーマのバリエーションピッカーを非表示も利用できます。これにより、テーマのデフォルトのバリエーションセレクターが非表示になり、Bundlexのピッカーだけが表示されます。テーマのセレクターは削除されず、CSSで非表示になります。そのため、通常のテーマ連携でメイン商品の画像を同期できます。テーマでの動作をテストしてください。

バリエーションを選択してもメイン商品の画像が更新されない場合は、Bundlexアプリ埋め込み設定のバリエーションブロックセレクターを、テーマに一致するよう調整する必要があります。サポートが必要な場合はお問い合わせください。

単位ごとの長いリストを折りたたむ

バリエーションセレクターを折りたたむを有効にすると、各単位の選択肢が1行に折りたたまれ、1つずつ開けるようになります。数量割引オファーの数量が多い場合でも、コンパクトに表示できます。商品バンドルオファーには適用されません。

選択肢、在庫、価格をテストする

割引を保存して有効にし、ストアフロントで対象商品をテストします。このデモでは、国にLithuania、通貨にUSDを使用しています。この例では、Small Ivoryのバッグは$24、Large Blushのバッグは$30です。10%オフのBuy 2オファーの合計は$48.60です。実際のカートに追加ボタンで追加し、カートとチェックアウトで両方の色、両方のサイズ、合計金額を確認してください。

利用できないバリエーションを非表示がオフの場合、在庫切れの組み合わせも表示されたまま選択できます。この例でBlush / Smallを選択すると、利用できないことを示すメッセージが表示され、「カートに追加」ボタンが無効になります。利用可能なLargeサイズを選択すると、ボタンが再び有効になります。そもそも存在しない組み合わせは別の動作になります。ピッカーによって後続のオプションが有効な組み合わせに変更される場合があるため、色を変更した後は最終的なサイズを確認してください。

対応しているピッカーから在庫切れの値を削除するには、詳細設定 > オファーと在庫 > 利用できないバリエーションを非表示を開きます。在庫状況はShopifyの在庫ポリシーに従います。販売を継続できる設定の在庫数0のバリエーションは、引き続き利用可能な場合があります。対象範囲とフォールバックの詳細は、バリエーションオプションの利用可能性をご覧ください。

選択するものがない場合

選択可能なセット全体にバリエーションが1つしかない場合、ドロップダウンはカード上のバリエーション名に折りたたまれます。設定済みのピルやカラースウォッチは、選択済みバッジとして表示されたままになることがあります。Shopifyのデフォルトバリエーションしかない商品には、セレクターは必要ありません。

このため、表示されるはずのピッカーが表示されないことがあります。通常は、次のいずれかが原因です。

• 商品にバリエーションが1つしかない。
• 商品を1つのバリエーションに固定している。
• 利用できないバリエーションを非表示がオンになっており、在庫のあるバリエーションが1つしか残っていない。

バリエーションを再入荷するか、固定する選択肢を広げると、セレクターは自動的に再表示されます。メインオファーと必須バンドル商品カードでは、このセレクターと商品識別情報の動作が適用されます。ギフト、アップセル、追加商品にはそれぞれ独自の在庫フィルタリングがあり、利用可能な選択肢が1つだけの場合は、個別のバリエーション名が表示されないことがあります。

バリエーション編集後にオプションを再読み込み

設定後に商品へバリエーションを追加、名前変更、削除した場合は、バリエーションオプションテーブルの上部にあるオプションを再読み込みをクリックして、最新のオプションを取得します。変更があった場合、Bundlexは「バリエーションを更新しました」というメッセージを表示し、オプションセットがすでに最新の場合は「再読み込みました。変更はありません」と表示します。ストアフロントを確認する前に、変更内容を保存してください。エディタで表示される新しい色は、保存するまで公開されません。

オプションが表示されない場合

バリエーションオプションテーブルには、バンドルのターゲティング対象と必須バンドル商品に関する商品オプションデータが必要です。オプションの読み込み中の場合は、空のテーブルを設定上の問題と判断する前に、処理が完了するまで待ってください。商品またはコレクションを選択するよう求めるメッセージが表示された場合は、まずウィジェットを表示する場所セクションで設定してください。「選択した商品にバリエーションオプションが見つかりません」と表示される場合、選択した商品には設定可能なバリエーションオプションがありません。