バリアントオプションの表示方法を選ぶ
Bundlexでは、ウィジェット内で各バリアントオプションをどのように表示するかを選べるため、セレクターを商品やテーマに合わせられます。オプションごとに設定できるので、カラーとサイズで異なる表示にすることもできます。
表示設定を見つける
- バンドルを開き、アドオン > バリアントセレクターに移動します。
- セレクターを有効にし、バリアントオプションテーブルを見つけます。
- 各オプションの表示タイプとプリセットを選択し、プレビューを確認します。
- 保存し、バンドルを有効にした対象商品ページでテストします。
オプションは、バンドルの対象商品から取得されます。新しく追加したオプションが表示されない場合は、オプションを再読み込みしてください。同じ表示タイプのオプションは1つのプリセットを共有するため、1つのオプションのプリセットを変更すると、同じタイプの他のオプションも更新されます。
表示タイプ
各バリアントオプションでは、次のいずれかを選択できます。
- ドロップダウン: サイズのように候補が多いリストに適した、コンパクトなメニューです。
- カラースウォッチ: 色のサンプルを表示します。可能な場合は色を自動検出し、形状はプリセットで設定します。
- ピル / ボタン: 各値をタップして選択できるボタンです。
- バリアント画像: 各値を個別の画像として表示します。
売り切れオプション
初期設定では、売り切れの値も利用不可のスタイルで表示されます。利用できない組み合わせを選択するとメッセージが表示され、追加できなくなります。利用できない値を非表示にする場合は、利用できないバリアントを非表示にチェックを入れてください。設定場所は詳細設定 > オファーと在庫です。
この設定は、オファー独自のバリアントセレクターと、固定クロスセルのセレクターに適用されます。無料ギフト、アップセル、アドオンでは、売り切れのバリアントがすでに非表示になるため、この設定による違いはありません。バリアントが最初から利用不可と表示される理由について詳しくは、バリアントが利用不可と表示されるをご覧ください。
ホバー時にカラー名を表示する
カラースウォッチは色を表示しますが、名前は表示しません。「Sand」と「Stone」のように見分けにくい色がある場合に問題になります。カラースウォッチのスタイル設定でホバー時にカラー名を表示にチェックを入れると、スウォッチにカーソルを合わせたとき、値の名前が表示された小さなラベル付きツールチップが表示されます。
ツールチップはすぐに表示され、ブラウザの初期設定で表示される遅いグレーのボックスではなく、ウィジェットに合うスタイルで表示されます。キーボードでスウォッチ間を移動する購入者にも表示されます。
スマートフォンとタブレットでは意図的に表示されません。ホバー操作がないため、ツールチップが購入者がタップしたスウォッチ上に一瞬表示され、見ていた内容を覆ってしまうためです。これはカラースウォッチにのみ適用されます。ピルには名前がすでに表示され、バリアント画像には、画像の下にラベルを表示にチェックを入れると、画像スウォッチのスタイル設定でラベルが表示されます。
スタイルとラベル
スタイルプリセットを使用して、スウォッチとピルのサイズ、形状、色を調整できます。オプションのラベルを非表示にするには、バリアントラベルを非表示にチェックを入れてください。設定場所はスタイル > ウィジェットのスタイル > バリアントラベルです。オファーに複数の商品行がある場合、商品ごとの行番号は自動的に表示され、専用の切り替え設定はありません。テーマ独自のバリアントピッカーを非表示にして、Bundlexセレクターだけを表示することもできます。
購入者が各商品のバリアントを選択したときのバリアントセレクターの動作については、商品ごとにバリアントを選択できるようにするをご覧ください。
この記事は役に立ちましたか？
皆さまからのフィードバックがドキュメントの改善に役立ちます。