Skip to main content
Storefront widget & display

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

If your product page is built with a page builder like GemPages, PageFly, or Shogun, the Bundlex widget may not land where you expect, or may not appear at all. The fix is a single anchor snippet that you paste into a custom HTML block to tell the widget exactly where to render.

Why a page builder needs an anchor

Normally the widget auto-detects your product form and inserts itself right above it. Page builders restructure the product page, so that automatic position is often wrong or missing. Dropping in the anchor snippet gives the widget an exact spot to attach to, so you control placement instead of leaving it to auto-detection.

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 dashboard.
  2. Open the Widget settings section.
  3. Find the Using a page builder? option at the bottom of that section and click it to expand.
  4. Click Copy to copy the snippet to your clipboard.

The snippet is always the same:

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

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. Save and publish the page.

The widget renders inside the anchor wherever you place it, so the position of the block on your page is the position of the widget.

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 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.

If the widget doesn't move after pasting

Browsers and page builders cache scripts aggressively, so a stale version can ignore the new anchor. If the widget hasn't moved to the new spot:

  • Hard-refresh the storefront page to clear cached scripts: Cmd/Ctrl + Shift + R.
  • 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 app embed (or app block) must be turned on in your theme.
  • A published bundle must match the product on that page.

If both are in place and the widget shows up elsewhere but not in your anchor, it is a placement issue. If it appears nowhere, it is one of the conditions above.

For the full picture of how Bundlex chooses a placement, including 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.