Where the widget appears on the product page

By default the Bundlex widget renders just above the add-to-cart button on the product page. If that spot does not fit your theme, you have two ways to move it: a custom placement selector in the app embed, or a page-builder anchor. This article explains where the widget lands and how Bundlex decides between those options.

The default position

When you have not set any override, Bundlex inserts the widget immediately before your theme's product form (the block that contains the variant pickers, quantity selector, and add-to-cart button). In practice that means the offer cards appear above the add-to-cart button, which is where most shoppers expect to see a quantity or bundle offer.

This default relies on Bundlex auto-detecting your product form. Most themes are detected automatically. If yours is not, the widget has nowhere to attach and will not appear, which is when the placement controls below come in.

The placement priority chain

Bundlex checks for a placement target in a fixed order and uses the first one it finds. Higher items in the list win over lower ones.

1. Custom placement selector (highest priority). A CSS selector you set in the Bundlex app embed. When this is set and matches an element, the widget is inserted directly after that element and nothing below in this list is used.
2. Page-builder anchor (data-bundlex-widget). An HTML element carrying the data-bundlex-widget attribute that you drop into your page. The widget is placed inside the first matching anchor. This is used only when no custom placement selector is set.
3. Default position before the product form (lowest priority). The automatic placement described above. It is used only when neither of the two overrides is set.

Because the chain stops at the first match, setting a custom placement selector overrides both the anchor and the default, and an anchor overrides the default.

Option 1: the custom placement selector (app embed)

The custom placement selector is the most precise way to position the widget, and it is the recommended choice when you know exactly which element on your product page the widget should sit next to.

You set it in the Bundlex app embed:

1. In your Shopify admin, go to Online Store, then Themes, and click Customize.
2. Open App embeds and find the Bundlex embed.
3. In the Selectors section, enter a CSS selector in the Custom placement selector field.
4. Save the theme.

The widget is inserted right after the element your selector matches. If you are not sure which selector to use, Bundlex support can help you find one. The same Selectors section also holds fields for the product form, add-to-cart button, and quantity selectors, which are used to fix auto-detection on custom themes rather than to position the widget.

Option 2: a page-builder anchor

If you build product pages with a visual page builder such as GemPages, PageFly, or Shogun, you usually want to drop the widget into a specific spot in your layout. For that, add a custom HTML or code block where you want the widget and place an empty element with the data-bundlex-widget attribute inside it:

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

You do not have to type this by hand. Bundlex also surfaces the same snippet in the bundle editor under the widget's page-builder placement setting, so you can copy it from there and paste it into your page.

Bundlex fills the first matching anchor with the widget. You do not need a different snippet per bundle. The anchor only controls position. Bundlex still chooses which published bundle to show based on the product.

Only the first matching anchor wins

If more than one data-bundlex-widget element exists in the page, Bundlex uses only the first one in DOM order. This matters when your storefront duplicates content, for example a quick-view modal or a cart drawer that repeats product markup. Place the anchor only on the surface where you actually want the widget, so the first match is the right one.

When to use the app block instead

Bundlex also ships a theme app block for the product page, which is a separate way to deliver the widget from the app embed. Reach for the app block when you want to drop the widget into a specific position using the theme editor's drag-and-drop, without writing a CSS selector or editing page markup:

1. In the theme editor, open a product template.
2. Click Add block in the section where you want the widget.
3. Choose the Bundlex block and drag it to the exact position you want.
4. Save the theme.

The block places the widget where you drop it in the section, so it is a good middle ground between the automatic default and a hand-written selector. The widget is delivered as long as either the app embed or the app block is active, so you do not need both.

Whichever placement you choose, the widget only renders when the app embed (or block) is on and a published bundle matches the product. If the widget does not appear at all, confirm those two things before adjusting placement.

Quick reference