Where the widget appears on the product page

By default the Bundlex Bundles 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 the app decides between those options.

The default position

When no placement override matches, Bundlex Bundles inserts the widget before the detected product-form container in the buy area. The exact position relative to the theme's variant and quantity controls depends on that theme. 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 Bundles auto-detecting your product form. Most themes are detected automatically. If yours is not, the widget cannot reliably connect to Add to cart. A placement anchor alone does not fix a missing or wrong product form; ask support to check form detection as well.

The placement priority chain

For app-embed delivery, Bundlex Bundles 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 Bundles 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 when no custom placement target is found.
3. Default position before the product form (lowest priority). The automatic placement described above. It is used when neither override provides a matching target.

Because the chain stops at the first match, a matching custom placement target overrides both the anchor and the default, and a matching anchor overrides the default. If a selector stops matching after a theme change, Bundlex Bundles can fall back to a lower placement.

Option 1: the custom placement selector (app embed)

Use a custom placement selector when you need to keep app-embed delivery and place the widget after a specific page element. If you do not know the selector, ask Bundlex support to help you choose one. Test it in a draft theme first.

You set it in the Bundlex Bundles app embed:

1. In your Shopify admin, go to Online Store and click Edit theme.
2. Open App embeds and find Bundlex Bundles.
3. Enable Show advanced settings, then 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 advanced settings also reveal 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: open the bundle editor's Advanced tab and expand Using a page builder?. Choose Copy, then paste the snippet into your page.

Bundlex Bundles fills the first matching anchor with the widget. You do not need a different snippet per bundle. The anchor only controls position. The app 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 Bundles 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 Bundles 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. Open the Apps tab, choose Bundlex Bundles, and drag the block 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 block ignores the embed's custom placement selector and page-builder anchor. Use one product-page delivery method: running both embed and block can leave placement and settings dependent on which initializes first.

Test the change in a draft theme first. Before switching off a working embed in that draft, check that the block is inside a section that renders on the product's actual template. Reload the product page immediately after switching; if the widget disappears, turn the embed back on. For discounts with gifts, prefer a placement that keeps the embed and its cart-page gift cleanup. See embed versus block.

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.

Landing pages: the "Bundlex Bundles featured" block

The methods above apply to product pages. On a regular Shopify page (any /pages/ URL), such as a landing page you built for a campaign, the widget cannot attach by itself, and custom HTML will not load it either.

Instead, add your theme's own Featured product section and put the Bundlex Bundles featured block inside it. The theme section supplies the add to cart button, and the block adds the widget, the same way it works on the home page:

1. In your Shopify admin, go to Online Store and click Edit theme.
2. In the template dropdown at the top, select Pages and pick the template your landing page uses.
3. Click Add section and choose your theme's own Featured product section, then pick the product whose bundle you want to show.
4. Inside that section, click Add block, open the Apps tab, and choose Bundlex Bundles featured.
5. In the featured block settings, set Product to the same product as the section, or keep its Section Product connection.
6. Save the theme.

The block on its own, outside a Featured product section, finds no add to cart form and shows nothing. Placed inside the section, it shows the product with its published bundle offers, and shoppers can add to cart directly from the landing page. The same setup also works on your home page.

Quick reference

Placement method	Where to set it	Priority
Custom placement selector	App embeds > Bundlex Bundles > Show advanced settings	Highest
data-bundlex-widget anchor	Page markup or page builder	Used if no custom target matches
Default (before product form)	Automatic	Used if neither override matches