Skip to main content
Storefront widget & display

Using Bundlex Bundles with a page builder (GemPages, PageFly, Shogun)

If your product page is built with a page builder like GemPages, PageFly, or Shogun, use an anchor snippet to choose where the Bundlex Bundles widget appears. Paste it into a custom HTML block on the product page. If the widget is missing entirely, also check the app embed, published bundle and product form; the anchor controls placement only.

Why a page builder needs an anchor

Normally the widget detects your product form and inserts itself before its container. A page builder can change that layout. The anchor gives the widget a specific place to render, but Bundlex Bundles still needs to find the product's add-to-cart form to connect the offer to the purchase button.

Get the snippet

The anchor is a copy-ready snippet in the bundle editor.

  1. Open the bundle you want to show on the page-builder page in your Bundlex Bundles dashboard.
  2. Open the Advanced tab.
  3. Scroll to More settings, last on the tab, and expand Using a page builder?.
  4. Click Copy to copy the snippet to your clipboard.

The snippet is always the same:

<div data-bundlex-widget></div>
Bundlex Bundles B22 editor scrolled to the bottom of Advanced, with neighboring settings and the expanded Using a page builder section showing the anchor snippet and Copy button.
At the bottom of Advanced, (1) expand Using a page builder? and (2) choose Copy. The same anchor works for every bundle; product targeting determines which published offer appears.

Paste it into your page builder

  1. Open your product page in your page builder's editor (GemPages, PageFly, Shogun, or another builder).
  2. Add a custom HTML or code block at the exact spot where you want the widget to appear, for example just below the price or above the add-to-cart button.
  3. Paste the snippet into that block.
  4. Preview the product page, then save and publish when the widget is in the right place.

With the app embed active and no matching custom placement target taking priority, the widget renders inside the first anchor. An app block renders at its own block position instead. Keep the anchor inside the page's product area, near the purchase controls.

One snippet works for every bundle

You do not need a different snippet per bundle. The exact same <div data-bundlex-widget></div> is used for all of them. Bundlex Bundles decides which bundle to render based on the product the page is showing, so the anchor only controls where the widget appears, never which bundle. Paste it once on each page-builder product page that needs it.

Place it only on the relevant surface

Add the anchor only to the page surface where you actually want the widget. If the same snippet ends up in more than one place that loads at once, for example a cart drawer or a quick-view popup that repeats your product markup, the widget attaches to the first anchor it finds in the page. To keep placement predictable, put the snippet in a single, relevant spot rather than scattering it across templates.

Check both desktop and phone layouts. Some builders keep separate desktop and mobile product forms in the same page. A selector or anchor that reaches the hidden copy can work at one width and fail at another. Ask support to check both layouts if that happens.

If the widget doesn't move after pasting

If the widget has not moved to the new spot:

  • Check that you are using the app embed, not an app block positioned elsewhere. A matching custom placement selector in the embed takes priority over the anchor.
  • Hard-refresh the storefront page: Cmd/Ctrl + Shift + R. This can reload stale browser assets, but does not publish a draft page or fix a wrong selector.
  • Confirm the page is published, not just saved in the page builder's editor.
  • Make sure you pasted the snippet exactly, with no extra characters around it.

If the widget still doesn't appear at all

The anchor only positions the widget. It still needs the usual conditions to load:

  • The Bundlex Bundles app embed must be turned on for this anchor method. Use an app block when you want placement controlled by the block instead.
  • A published bundle must match the product on that page.
  • Bundlex Bundles must be able to detect the correct product form and add-to-cart button.

If the embed and matching discount are active, check placement priority and product-form detection. Contact support with the product URL if the anchor remains empty.

Landing pages are different

The anchor snippet works on product pages only. If you want bundle offers on a regular Shopify page (any /pages/ URL), add your theme's Featured product section and put the Bundlex Bundles featured block inside it. Set the block's Product to the same product as the section, or keep its Section Product connection. The section supplies the purchase form; the block loads the widget without an anchor snippet.

Check the result

  1. Open the actual published product URL at desktop and phone widths.
  2. Confirm one widget appears at the intended position, with the matching product and offer prices.
  3. Choose an offer and add it to cart. Check the main product, variants, quantities and any selected add-ons.
  4. Continue to checkout and check the discount and subtotal before placing an order. If only the page-builder preview works, send support the published product URL.

For the full picture of how Bundlex Bundles chooses a placement, including the featured product block for landing pages, the custom placement selector, and the theme app block, see Where the widget appears on your product page.

Was this article helpful?

Your feedback helps us improve our docs.

Thanks - we'll keep improving this article.

Want to chat with our team? Still have a question?

Still need help?

Our team is one click away. Send us a message and we'll get back to you.

We use a few cookies to keep this site working, measure how it is used, and power our chat widget when you open it. See our cookie policy.