Mix & Match バンドルのパックレイアウトを刷新

Single Product の Mix & Match バンドルでは、ショッパーが1つの商品のバリエーションでパックを埋めます。そのパックを表示する3つのレイアウトを、同じ考え方で作り直しました。ショッパーが何かを選ぶ前に各パックサイズで得られる特典を見せ、スクロールしても選択数が見えるようにすることです。

Top bar

• パックはコンパクトなカルーセルに収まり、商品が画面の下に押し出されずに見えたままです。
• 各パックは、ショッパーが何も選ぶ前から無料ギフトや送料無料を表示します。
• 選択数がページのスクロールに合わせてついてきます。
• パックがいっぱいのときに + を押すと、何も起きないのではなく次のサイズが提案されます。

Side bar

• パックの列は、4つ目や5つ目を追加すると崩れるのではなく、いくつでも収まるようになりました。
• ギフトと送料無料のラベルはパックカード上に表示されます。
• 特典パネルが商品グリッドの横に開いたままになり、現在のパックに特典がないときは、特典のある一番近いパックを案内します。
• 小さいパックを選ぶと、変更前に失われる特典を知らせます。

Table

• 各パックの割引、無料ギフト、送料無料がリストの上にタブとして表示され、パックが埋まるにつれてプログレスバーが進みます。
• ステッパーを何度もタップしなくても、数量を直接入力できます。
• パックがいっぱいになると次のサイズが提案されます。
• 長いリストでは、フローティングバーが数量と Add to cart を常に表示し、サイドパネルにこれまでの選択がすべて表示されます。

必要な作業

ありません。既存のバンドルは刷新されたレイアウトに自動で切り替わります。以前のパック列や特典パネルを修正するためにカスタム CSS を追加していた場合は、そのルールが意図どおりに動作するか確認してください。

利用できるプラン

Mix & Match バンドルは Growth plan（2026年10月時点で月額$14）で利用できます。バンドルのレイアウト設定でレイアウトを選び、公開前にライブプレビューで確認してください。

設定ガイド：Mix & Match Single Product バンドルの作り方