组件在商品页面上的显示位置

默认情况下，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 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 锚点	页面标记或页面构建器	在没有匹配的自定义目标时使用
默认（产品表单之前）	自动	当两个覆盖设置都不匹配时使用