小工具在商品頁面上的顯示位置

根據預設，Bundlex 小工具會顯示在商品頁面的加入購物車按鈕正上方。如果該位置不適合您的佈景主題，您有兩種移動方式：在應用程式嵌入中設定自訂位置選取器，或使用頁面編輯器錨點。本文將說明小工具的顯示位置，以及 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. 儲存佈景主題。

此區塊會將小工具放在您於區段中放置的位置，因此是自動預設位置與手動撰寫選取器之間的理想折衷方案。此區塊會忽略嵌入中的自訂位置選取器和頁面編輯器錨點。請在商品頁面上使用一種顯示方式：同時執行嵌入和區塊，可能會因哪一個先初始化而導致位置和設定有所不同。

請先在草稿佈景主題中測試變更。在該草稿中關閉正常運作的嵌入前，請確認區塊位於實際商品範本會顯示的區段內。切換後立即重新載入商品頁面；如果小工具消失，請重新啟用嵌入。對於包含贈品的折扣，建議使用能保留嵌入及其購物車頁面贈品清理功能的位置。請參閱 嵌入與區塊。

無論選擇哪種位置，只有在應用程式嵌入或區塊已啟用，且有已發布的組合符合商品時，小工具才會顯示。如果小工具完全沒有出現，請先確認這兩點，再調整位置。

登陸頁面：「Bundlex Bundles 精選」區塊

上述方法適用於商品頁面。在一般 Shopify 頁面上，也就是任何 /pages/ URL，例如您為行銷活動建立的登陸頁面，小工具無法自行附加，且自訂 HTML 也不會載入小工具。

請改為新增佈景主題自己的 精選商品區段，並將 Bundlex Bundles 精選區塊放入其中。佈景主題區段會提供加入購物車按鈕，而區塊會新增小工具，運作方式與首頁相同：

1. 在 Shopify 管理介面中，前往Online Store，然後點擊Edit theme。
2. 在頂端的範本下拉式選單中，選擇 頁面，再選取登陸頁面使用的範本。
3. 按一下 新增區段，選擇佈景主題自己的 精選商品區段，然後選取您要顯示其組合的商品。
4. 在該區段中，按一下 新增區塊，開啟 應用程式分頁，然後選擇 Bundlex Bundles 精選。
5. 在精選區塊設定中，將 商品設為與區段相同的商品，或保留其 區段商品連結。
6. 儲存佈景主題。

單獨放置在精選商品區段外的區塊找不到加入購物車表單，因此不會顯示任何內容。放入該區段後，區塊會顯示包含已發布組合優惠的商品，顧客也能直接從登陸頁面加入購物車。首頁同樣適用此設定。

快速參考

放置方式	設定位置	優先順序
自訂位置選取器	應用程式嵌入 > Bundlex Bundles > 顯示進階設定	最高
data-bundlex-widget 錨點	頁面標記或頁面編輯器	在沒有相符的自訂目標時使用
預設值（產品表單之前）	自動	兩個覆寫條件皆不符合時使用