ウィジェットのレイアウトと背景装飾を選択する
このガイドでは、バンドルウィジェットの3つの外観設定について説明します。全体のレイアウト、コンテナの最大幅、選択中のオファーに表示する任意の背景装飾です。レイアウト、幅、装飾の設定を開くにはスタイルタブを開きます。
ウィジェットのレイアウトを設定する
レイアウトでは、ウィジェット内でオファーカード（数量ティア）をどのように配置するかを設定します。
- 編集するバンドルを開きます。
- スタイルタブを開きます。
- ウィジェットレイアウトで、次のいずれかを選択します。
- スタック - オファーカードを上下に並べます。これがデフォルトです。
- グリッド - オファーカードを横並びに配置します。
ライブプレビューで、商品ページに最適な配置を確認してください。
この設定ではオファーカードを配置します。1つの商品バンドルオファー内の商品を配置するには、そのオファーにある独立したバンドルレイアウト設定を使用します。
コンテナの最大幅を選択する
最大幅では、商品ページ上でウィジェット全体のコンテナをどこまで広げられるかを設定します。この設定は、コンテナセクションのスタイルタブにあります。
- スタイルタブで、コンテナセクションを開きます。
- 最大幅ドロップダウンから、次のいずれかを選択します。
- Shopifyのデフォルト（44rem） - 利用可能なスペース内でウィジェットの幅を44remまでに制限します。
- 全幅（100%） - ウィジェットが列内で利用可能なスペース全体に広がります。新しいバンドルではこれがデフォルトです。
- カスタム - 任意の値を設定します。
- カスタムを選択すると、幅フィールドが表示されます。値をピクセル（px）単位で入力します。
全幅は利用可能な親コンテナ全体に広がりますが、テーマの商品情報列の幅が広がるわけではありません。ウィジェットの上下の間隔には、同じコンテナパネルにある上マージンと下マージンを使用します。周囲のテーマレイアウトによって制限されている場合は、ウィジェットの幅と配置を参照してください。
背景装飾を追加
装飾を追加すると、オファーカードにアニメーション付きの背景効果が表示されます。装飾は選択したオファーにのみ適用されるため、顧客が選択したティアに注目を集められます。
- スタイルタブで装飾トグルをオンにします。デフォルトではオフになっており、オフにすると装飾が削除されます。
- 表示されるスタイルから1つを選択します:
- ブロブ
- リング
- ハート
- スターバースト
- パーセント
- 星
- 時計
- マネー
各オプションには、スタイルを見分けられるように専用のアイコンがピッカーに表示されます。アイコンはシンプルな記号であり、効果を正確に再現したものではありません。ライブプレビューでアニメーションの実際の見え方を確認し、選択したオファーの背景色に対して適切に表示されることを確認してください。
ヒント: ギフトブロックを透明にする
バンドルに無料ギフトが含まれていて装飾をオンにすると、ギフトブロックが効果の上に重なり、装飾を隠すことがあります。その場合、Bundlexは装飾スタイルの下にギフトブロックを透明にするという提案を表示します。
この提案の適用をクリックすると、選択したギフトの背景色に透明度が追加され、背後の装飾が見えるようになります。ギフトとアップセルセクションで選択したオファーのギフトの背景色の不透明度を下げて、手動で設定することもできます。
この提案は、装飾が有効で、バンドルに少なくとも1つのギフトが含まれ、選択したギフトの背景色が完全に不透明な場合（まだ透明度が設定されていない場合）にのみ表示されます。
この記事は役に立ちましたか？
皆さまからのフィードバックがドキュメントの改善に役立ちます。