商品ページでのウィジェットの表示位置

デフォルトでは、Bundlexウィジェットは商品ページのカートに追加ボタンのすぐ上に表示されます。その位置がテーマに合わない場合は、アプリ埋め込みのカスタム配置セレクター、またはページビルダーアンカーの2つの方法で移動できます。この記事では、ウィジェットの配置場所と、Bundlexがこれらの方法を選択する仕組みを説明します。

デフォルトの位置

配置の上書き設定に一致するものがない場合、Bundlexは購入エリアで検出した商品フォームコンテナの前にウィジェットを挿入します。テーマのバリエーションや数量コントロールとの正確な位置関係は、テーマによって異なります。実際には、オファーカードはカートに追加ボタンの上に表示されます。これは、多くの購入者が数量割引やバンドルオファーを確認する場所です。

このデフォルト配置では、Bundlex が商品フォームを自動検出できることが前提となります。ほとんどのテーマは自動的に検出されます。検出されない場合、ウィジェットは「カートに追加」と確実に連携できません。配置アンカーだけでは、商品フォームがない場合や誤って検出された場合の問題は解決できません。フォームの検出も確認するよう、サポートに依頼してください。

配置の優先順位チェーン

アプリ埋め込みで表示する場合、Bundlex は固定された順序で配置先を確認し、最初に見つかったものを使用します。リストの上位にある項目が、下位の項目より優先されます。

1. カスタム配置セレクター（最優先）。 Bundlexのアプリ埋め込みで設定するCSSセレクターです。設定されていて要素に一致する場合、ウィジェットはその要素の直後に直接挿入され、リスト内のそれ以降の項目は使用されません。
2. ページビルダーアンカー（data-bundlex-widget）。 ページに追加する、data-bundlex-widget属性を持つHTML要素です。ウィジェットは最初に一致したアンカーの内部に配置されます。カスタム配置先が見つからない場合に使用されます。
3. 商品フォームの前にあるデフォルト位置（優先度最低）。 上記で説明した自動配置です。どちらの上書き設定にも一致する配置先がない場合に使用されます。

最初に一致した時点で処理が止まるため、カスタム配置先に一致するとアンカーとデフォルト位置の両方より優先され、アンカーに一致するとデフォルト位置より優先されます。テーマの変更後にセレクターが一致しなくなった場合、Bundlexは下位の配置方法に切り替えられます。

方法1: カスタム配置セレクター（アプリ埋め込み）

アプリ埋め込みでの表示を維持し、特定のページ要素の後にウィジェットを配置する必要がある場合は、カスタム配置セレクターを使用します。セレクターがわからない場合は、Bundlexサポートに相談して選択してください。まずは下書きテーマでテストしてください。

Bundlex のアプリ埋め込みで設定します。

1. Shopify管理画面でOnline Storeに移動し、Edit themeをクリックします。
2. アプリの埋め込みを開き、Bundlex Bundlesを見つけます。
3. 詳細設定を表示を有効にし、カスタム配置セレクターフィールドにCSSセレクターを入力します。
4. テーマを保存します。

ウィジェットは、セレクターに一致した要素の直後に挿入されます。使用するセレクターがわからない場合は、Bundlexサポートが見つけるお手伝いをします。詳細設定には、商品フォーム、カートに追加ボタン、数量セレクターのフィールドも表示されます。これらはウィジェットの配置ではなく、カスタムテーマでの自動検出を修正するために使用します。

方法2: ページビルダーアンカー

GemPages、PageFly、Shogunなどのビジュアルページビルダーで商品ページを作成する場合、通常はレイアウト内の特定の位置にウィジェットを配置します。その場合は、ウィジェットを配置したい場所にカスタムHTMLまたはコードブロックを追加し、その中にdata-bundlex-widget属性を持つ空の要素を配置します。

<div data-bundlex-widget></div>

手入力する必要はありません。バンドルエディタの詳細設定タブを開き、ページビルダーを使用していますか？を展開します。コピーを選択し、スニペットをページに貼り付けます。

Bundlexは、最初に一致したアンカーにウィジェットを挿入します。バンドルごとに異なるスニペットを用意する必要はありません。アンカーは位置だけを制御します。Bundlexは、商品に基づいて表示する公開済みバンドルを引き続き選択します。

最初に一致したアンカーのみが使用されます

ページ内にdata-bundlex-widget要素が複数ある場合、BundlexはDOMの順序で最初にあるものだけを使用します。これは、クイックビューモーダルやカートドロワーなど、ストアフロントが商品マークアップを複製する場合に重要です。実際にウィジェットを表示したい場所にだけアンカーを配置し、最初に一致するものが正しい位置になるようにしてください。

アプリブロックを使用する場合

Bundlexには商品ページ用のテーマアプリブロックもあり、アプリ埋め込みとは別の方法でウィジェットを表示できます。CSSセレクターを記述したりページのマークアップを編集したりせず、テーマエディタのドラッグ&ドロップで特定の位置にウィジェットを配置したい場合は、アプリブロックを使用してください。

1. テーマエディタで商品テンプレートを開きます。
2. ウィジェットを配置したいセクションでブロックを追加をクリックします。
3. アプリタブを開き、Bundlex Bundlesを選択して、ブロックを希望する正確な位置までドラッグします。
4. テーマを保存します。

ブロックは、セクション内で配置した場所にウィジェットを表示するため、自動のデフォルト配置と手動で記述するセレクターの中間的な方法として適しています。ブロックは、埋め込みのカスタム配置セレクターとページビルダーアンカーを無視します。商品ページで使用する表示方法は1つにしてください。埋め込みとブロックの両方を実行すると、どちらが先に初期化されるかによって配置や設定が変わる場合があります。

まずは下書きテーマで変更をテストしてください。その下書きテーマで動作している埋め込みをオフにする前に、ブロックが実際の商品テンプレートで表示されるセクション内にあることを確認します。切り替えた直後に商品ページを再読み込みし、ウィジェットが消えた場合は埋め込みを再度オンにしてください。ギフト付きの割引では、埋め込みとカートページでのギフト削除処理を維持できる配置を推奨します。埋め込みとブロックの違いをご覧ください。

どの配置方法を選んでも、アプリ埋め込みまたはブロックがオンで、公開済みバンドルが商品に一致する場合にのみウィジェットが表示されます。ウィジェットがまったく表示されない場合は、配置を調整する前にこの2点を確認してください。

ランディングページ: 「Bundlex Bundles featured」ブロック

上記の方法は商品ページに適用されます。キャンペーン用に作成したランディングページなど、通常のShopifyページ（任意の/pages/ URL）では、ウィジェットは自動的に接続できず、カスタムHTMLから読み込むこともできません。

代わりに、テーマ独自の注目の商品セクションを追加し、その中にBundlex Bundles featuredブロックを配置します。テーマのセクションがカートに追加ボタンを提供し、ブロックがウィジェットを追加します。ホームページでの動作と同じです。

1. Shopify管理画面でOnline Storeに移動し、Edit themeをクリックします。
2. 上部のテンプレートドロップダウンでページを選択し、ランディングページで使用するテンプレートを選びます。
3. セクションを追加をクリックし、テーマ独自の注目の商品セクションを選択して、バンドルを表示する商品を選びます。
4. そのセクション内でブロックを追加をクリックし、アプリタブを開いてBundlex Bundles featuredを選択します。
5. 注目の商品ブロックの設定で、商品をセクションと同じ商品に設定するか、セクションの商品との接続を維持します。
6. テーマを保存します。

「注目の商品」セクションの外にブロックだけを配置しても、カートに追加フォームが見つからないため何も表示されません。セクション内に配置すると、公開済みバンドルオファー付きの商品が表示され、購入者はランディングページから直接カートに追加できます。同じ設定はホームページでも使用できます。

クイックリファレンス

配置方法	設定場所	優先度
カスタム配置セレクター	アプリの埋め込み > Bundlex Bundles > 詳細設定を表示	最高
data-bundlex-widget アンカー	ページのマークアップまたはページビルダー	カスタム配置先に一致しない場合に使用
デフォルト（商品フォームの前）	自動	どの上書き設定にも一致しない場合に使用