If you build your product pages with a drag-and-drop page builder, Composerie can still run on them. This guide is for merchants using PageFly, Shogun, GemPages, EComposer, Zipify, or Replo. It explains which builders Composerie recognizes and how to place the customizer so it shows up for shoppers.
Which page builders are detected
Composerie checks each page for the builder you are using. It recognizes PageFly, Shogun, GemPages, EComposer, Zipify, and Replo automatically, by looking at the custom elements, data attributes, and JavaScript globals each one adds to the page.
The builders fall into two groups based on how well they fit Composerie:
- EComposer and Replo tend to work cleanly. They build native Shopify sections, so the customizer slots in without extra steps.
- PageFly, Shogun, GemPages, and Zipify can need a little setup. They often use their own custom product forms, and a custom form is harder for Composerie to read variants from.
This check runs during onboarding. The result feeds your theme compatibility score and produces a plain-language label, like “Good compatibility, minor adjustments may be needed.” You can read more about that number in theme compatibility and supported themes.
Add the customizer inside the builder
Most page builders include an element that hosts a Shopify app block. That is where Composerie goes. Follow these steps inside your builder’s editor.
Add the Shopify App Block element
Open your page builder editor and edit the product page you want to personalize. Find the element named “Shopify App Block” (some builders label it “Shopify App”) and drag it onto the page where you want the customizer to appear.
Pick the Composerie Customizer block
Inside the app block element, choose the Composerie Customizer block from the list of available app blocks. This is the same block you would add on a native theme product page.
Set its location and publish
Position the block within the builder’s layout, then publish the page. Treat its placement like any other element in your design.
Keep the Composerie app embed enabled
Confirm the Composerie app embed is still turned on in your theme. The builder hosts the block you can see, but the embed runs the background engine that loads the customizer and handles the cart. If the embed is off, the visible block will not work. See the customizer theme block for where to find the embed.
Check the published page, not the editor
Many builders do not preview app blocks inside their own editor, so the spot may look empty while you are building. Open the published page on a real product URL to confirm the customizer renders.
If detection or placement struggles
A few builders use custom product forms instead of the standard Shopify form. That can break variant detection, so the right size or color may not pass through to the cart. If your variants do not sync, consider Full-page mode, which runs the customizer on its own page rather than reading the builder’s product form.
Before you change anything, check your theme compatibility score from onboarding and read theme compatibility and supported themes. A low score usually points at the exact reason placement is hard.
If you added the block but it does not appear on the published page, work through troubleshoot theme placement.
My page builder is not in the list. Will Composerie still work?
Often yes. Builders that create native Shopify sections expose the same app block, so you can add the Composerie Customizer the normal way. The automatic detection only covers the named builders, so your compatibility score may not flag the builder by name.
Why is the customizer blank inside the builder editor?
Page builders do not render app blocks in their own preview. The block only shows on a published or preview product URL. Open the live page to confirm it works.
Variants are not syncing on my builder page. What now?
The builder is likely using a custom product form that Composerie cannot read. Switch that product to Full-page mode, which does not depend on the builder's form, or check the troubleshoot theme placement guide.
Next
To understand the score that detection produces and which themes are confirmed, read theme compatibility and supported themes.