ページビルダー（GemPages、PageFly、Shogun）でBundlexを使用する
GemPages、PageFly、Shogunなどのページビルダーで商品ページを作成している場合は、アンカースニペットを使ってBundlexウィジェットの表示場所を指定します。商品ページのカスタムHTMLブロックに貼り付けてください。ウィジェットがまったく表示されない場合は、アプリ埋め込み、公開済みバンドル、商品フォームも確認してください。アンカーは配置のみを制御します。
ページビルダーにアンカーが必要な理由
通常、ウィジェットは商品フォームを検出し、そのコンテナの前に自動で挿入されます。ページビルダーによってこのレイアウトが変更されることがあります。アンカーを使うとウィジェットを特定の場所に表示できますが、Bundlexがオファーと購入ボタンを連携するには、商品ページのカート追加フォームも検出する必要があります。
スニペットを取得する
アンカーは、バンドルエディターでそのままコピーできるスニペットとして表示されます。
- Bundlexダッシュボードで、ページビルダーのページに表示するバンドルを開きます。
- 「詳細設定」タブを開きます。
- 「ページビルダーを使用していますか？」というオプションを見つけてクリックし、展開します。
- コピーをクリックして、スニペットをクリップボードにコピーします。
スニペットは常に同じです。
<div data-bundlex-widget></div>
ページビルダーに貼り付ける
- ページビルダー（GemPages、PageFly、Shogunなど）のエディターで商品ページを開きます。
- カスタムHTMLまたはコードブロックを、ウィジェットを表示したい正確な場所に追加します。例えば、価格のすぐ下やカートに追加ボタンの上などです。
- スニペットをそのブロックに貼り付けます。
- 商品ページをプレビューし、ウィジェットが正しい場所に表示されたら保存して公開します。
アプリ埋め込みが有効で、優先される一致するカスタム配置ターゲットがない場合、ウィジェットは最初のアンカー内に表示されます。アプリブロックは、そのブロック自体の位置に表示されます。アンカーはページの商品エリア内、購入操作の近くに配置してください。
1つのスニペットですべてのバンドルに対応
バンドルごとに異なるスニペットを用意する必要はありません。すべてのバンドルで、まったく同じ<div data-bundlex-widget></div>を使用します。Bundlexは、ページに表示されている商品に基づいて表示するバンドルを決定します。そのため、アンカーが制御するのはウィジェットが表示される場所であり、どのバンドルを表示するかではありません。必要な各ページビルダーの商品ページに1回だけ貼り付けてください。
関連する場所にのみ配置する
ウィジェットを実際に表示したいページの場所にのみアンカーを追加します。同じスニペットが、同時に読み込まれる複数の場所に配置されている場合、例えばカートドロワーや商品マークアップを繰り返すクイックビューポップアップなどでは、ウィジェットはページ上で最初に見つかったアンカーに紐づきます。配置を予測可能にするには、テンプレート全体に分散させず、関連する1か所にスニペットを配置してください。
デスクトップとスマートフォンのレイアウトを両方確認してください。一部のビルダーでは、同じページ内にデスクトップ用とモバイル用の商品フォームを別々に保持しています。非表示のコピーに到達するセレクターやアンカーは、ある画面幅では機能しても、別の画面幅では機能しない場合があります。その場合は、サポートに両方のレイアウトを確認してもらってください。
貼り付け後もウィジェットが移動しない場合
ウィジェットが新しい場所に移動しない場合は、次を確認してください。
- 別の場所に配置されたアプリブロックではなく、アプリ埋め込みを使用していることを確認します。埋め込み内で一致するカスタム配置セレクターがある場合、アンカーより優先されます。
- ストアフロントのページをハードリロードします。Cmd/Ctrl + Shift + R。これにより古いブラウザアセットが再読み込みされる場合がありますが、下書きページを公開したり、誤ったセレクターを修正したりすることはできません。
- ページビルダーのエディターで保存しただけでなく、ページが公開されていることを確認します。
- 余分な文字を周囲に追加せず、スニペットを正確に貼り付けたことを確認します。
ウィジェットがまったく表示されない場合
アンカーはウィジェットの配置のみを行います。読み込むには、通常どおり次の条件も満たす必要があります。
- このアンカー方式では、Bundlexのアプリ埋め込みを有効にする必要があります。ブロックで配置を制御する場合は、アプリブロックを使用してください。
- そのページの商品に一致する公開済みバンドルが必要です。
- Bundlexが正しい商品フォームとカートに追加ボタンを検出できる必要があります。
埋め込みと一致する割引が有効な場合は、配置の優先順位と商品フォームの検出を確認してください。アンカーが空のままの場合は、商品URLを添えてサポートにお問い合わせください。
ランディングページは異なります
アンカースニペットは商品ページでのみ機能します。通常のShopifyページ（任意の/pages/URL）でバンドルオファーを表示する場合は、テーマの注目の商品セクションを追加し、その中にBundlex Bundles featuredブロックを配置します。ブロックのProductをセクションと同じ商品に設定するか、Section Productとの接続を維持します。セクションが購入フォームを提供するため、アンカースニペットなしでブロックにウィジェットが読み込まれます。
結果を確認する
- 実際に公開されている商品URLを、デスクトップとスマートフォンの画面幅で開きます。
- 対象の商品とオファー価格が表示されたウィジェットが、意図した位置に1つ表示されることを確認します。
- オファーを選択してカートに追加します。メイン商品、バリエーション、数量、選択した追加商品を確認します。
- チェックアウトに進み、注文を確定する前に割引と小計を確認します。ページビルダーのプレビューでのみ機能する場合は、公開済みの商品URLをサポートに送ってください。
ランディングページ用の注目の商品ブロック、カスタム配置セレクター、テーマのアプリブロックを含め、Bundlexが配置を選択する仕組みの全体像については、商品ページでウィジェットが表示される場所をご覧ください。
この記事は役に立ちましたか？
皆さまからのフィードバックがドキュメントの改善に役立ちます。