メインコンテンツへスキップ
トラブルシューティング

ウィジェットの幅が狭すぎる、または大きな余白がある

ウィジェットの幅が狭すぎる、大きな余白がある、または周囲のコンテンツと重なる場合は、まず内蔵の幅と間隔の設定を確認してください。それでも解決しない場合は、テーマの配置用コンテナを確認する必要があります。

幅を設定する

  1. Bundlexでディスカウントを開き、スタイルタブに移動します。
  2. ウィジェットのスタイルを展開し、コンテナを開きます。
  3. 最大幅を全幅(100%)に設定するか、カスタムを選択して幅を入力します。
  4. 保存し、デスクトップとモバイルの商品ページを確認します。

デフォルトの幅はShopifyのデフォルト(44rem)です。全幅にするとウィジェットの親コンテナいっぱいに広がるため、幅の狭いテーマのカラム自体を広げることはできません。

上下の余白を調整する

同じコンテナセクションで、上マージンと下マージンを使って余白を調整します。これらの設定はこのディスカウントに属するため、ショップ全体に適用するCSSの上書きよりも管理しやすくなっています。

マージンを変更しても余白に影響しない場合、その余白は別のテーマブロックまたはセクションに属している可能性があります。どの要素がその余白を所有しているか確認できるよう、商品URLをサポートに送ってください。

ウィジェットのプレビューの横に、全幅、上下のマージン0、赤いアラートカラーが設定されたウィジェットスタイルのコンテナパネル。
(1) 最大幅とマージンで、テーマのコンテナ内におけるウィジェットを調整します。(2) アラートカラーで在庫僅少テキストのスタイルを設定します。

ウィジェットがレビュー、バッジ、その他のブロックと重なる

短い購入ボタン用に設計されたコンテナ内にウィジェットを配置すると、ウィジェットがコンテナの固定高さを超えて広がることがあります。その結果、配送情報、レビュー、その他の下部コンテンツを覆ってしまいます。ウィジェットの幅を広げたりマージンを追加したりしても、根本的な配置の問題は解決しない場合があります。

重なっている状態がわかるスクリーンショットと商品URLを添えて、サポートに連絡してください。制約のあるコンテナの外側に適切に配置できるか確認します。コンテンツがウィジェットの下に表示されているという理由だけで、別のアプリを削除しないでください。

アプリブロックに切り替える前に

手動でブロックを配置する場合は、まずそのブロックが実際の商品ページに表示されるセクション内にあることを確認してください。埋め込みをオフにしたら、すぐにそのページを再読み込みします。ウィジェットが消えた場合は、埋め込みを再びオンにしてサポートに連絡してください。

ギフト付きディスカウントでは、埋め込みを維持するとカートページでのギフト削除処理も維持されます。埋め込みとアプリブロックの選択をご覧ください。

カスタムCSSが必要な場合

内蔵設定で変更を実現できない場合に限り、カスタムCSSを使用してください。商品URLと希望するレイアウトをサポートに送ってください。モバイルで異なる表示にするかどうかも含めてください。これにより、すべてのディスカウントに広範なルールを適用するのではなく、適切なコンテナを対象にできます。

この記事は役に立ちましたか?

皆さまからのフィードバックがドキュメントの改善に役立ちます。

ありがとうございます。この記事の改善を続けていきます。

チームにチャットで相談しますか? まだご質問がありますか?

まだサポートが必要ですか?

チームへの連絡はワンクリックで完了します。メッセージをお送りいただければ、折り返しご連絡します。

サイトの動作維持、利用状況の測定、チャットウィジェットを開いた際の機能提供のために、いくつかのCookieを使用しています。詳しくはCookieポリシーをご覧ください。