Embedded layout — the customizer inline on the product page
Run a template's customizer in the product media gallery instead of a modal, the Settings that tell it where your theme's media lives, and the mobile sticky bar.
By default the customizer opens as a modal over the product page. A template can instead run embedded: the live canvas replaces the first product image in your theme's media gallery, and the tools render where the Customise button would have been. No overlay, no click-to-open. The product page is the customizer.
Use it on the products where personalisation is the product. Leave the rest on modal — embedded mounts as the page loads, so it's more work up front for the browser (see storefront performance).
Switching a template to embedded
- Open the template in the builder and pick Template Settings.
- Expand Display Settings.
- Set Layout mode to Embedded (inline on PDP).
- Save.
The change is live on every product assigned to that template. Switch back to Modal (popup overlay) at any time.
What the shopper sees
- The canvas sits in the first media slot, sized to the slot. It's square; if your theme's slot is a different shape, a background colour fills the gap.
- The tools — Images, Text Areas, Graphics — render inline, followed by a Continue button that opens the same review panel as the modal.
- On mobile, once the shopper scrolls past the canvas, a sticky bar at the bottom of the screen ("Customise your design") opens a slide-up preview of the canvas so they can see what they're editing.
- The standalone Customise button is hidden. Expand/Minimise isn't shown (it's a modal control); zoom still is.
Everything else — AI tools, cart editing, surcharges, Spend & Save — works the same as in the modal.
Telling it where your theme's media lives
Most themes need nothing: the app looks for the common product-media containers (Dawn and Dawn-based themes included). If the canvas doesn't appear, open Settings → Embedded Mode Settings:
| Setting | When to use it |
|---|---|
| Product Media Selector (Desktop) | A CSS selector for the product media container the canvas should be inserted into. Only if your theme uses non-standard markup. |
| Product Media Selector (Mobile) | A different container below 768 px, if your theme uses one. Empty means "same as desktop". |
| Media Item Class Names | Class names for the inserted canvas item. Empty copies the classes from your theme's existing media items (recommended); set it only if the copied classes break the layout or slider. |
| Canvas Background Colour | The colour that fills the gap around the square canvas in a non-square slot. Hex, with or without #. Empty uses the modal canvas colour. |
| Mobile sticky bar | On by default. Untick to turn the bottom bar off. |
| Sticky bar label | The call-to-action on the bar. Default "Customise your design". |
A cleaner option for custom themes: put an element with the attribute data-pw-customiser-canvas anywhere in your product template, and the canvas renders straight into it, skipping detection entirely. Your theme developer can add this in a minute.
If the canvas isn't found, the browser console shows "Embedded mode: product media container not found. Configure productMediaSelector in Settings." — a good clue to send us with your product URL.
Good to know
- Themes that re-render the media gallery when the shopper changes variant are handled: the canvas re-attaches automatically.
- The button is hidden from the very first paint so there's no flash before the canvas loads. If you change a template's layout mode, allow a moment for that to take effect on the storefront.
- Analytics counts an embedded "open" from the shopper's first edit, since there's no button click.
- Modal-specific Brand & language settings — Modal Layout, Mobile Minimise Button — don't apply in embedded layout.
What's next
- Everything the shopper can do in either layout: The storefront customizer
- Colours and labels: Styling the customizer