This guide explains what you see when you open the Composerie customizer inside the Shopify theme editor. It is for store owners and staff who are placing the customizer on a product page and want to confirm it sits in the right spot before going live. The theme editor preview and the live storefront do not always match, so knowing the difference saves you a confused moment later.
What you can preview
The theme editor renders the customizer for products that have a design linked and are set to On-page or Full-page. When a product is set up that way, you see the customizer fields and preview right in the editor canvas, in the product section where you placed the block.
Two cases look different from what a shopper would see on the live page.
For a product with no design linked, the editor shows a placeholder card. It is a dashed violet box that tells you the block is in place but has nothing to render yet. This card is there to help you while you build. On the live storefront the same product shows nothing at all, because the placeholder only appears inside the editor. So an empty product page is expected until you link a design.
For a product set to Linked mode, the editor also shows nothing. Linked mode renders no on-page interface by design. The customizer opens elsewhere in that mode, so there is nothing to draw in the product section. If you expected the customizer here and the section is blank, check the product’s mode first.
If you are not sure which mode a product uses, read storefront modes explained. To get the block onto the page in the first place, see the customizer theme block.
Select the block to see its outline
When you are not sure exactly where the customizer sits on the page, select its block. Composerie draws a violet outline around the customizer element so you can spot it at a glance. The outline is an editor-only aid and clears the moment you deselect.
Open the block list in the theme editor
In the theme editor, open the product template and find the block list for the product section. The Composerie Customizer block appears there with the other blocks you have added.
Click the Composerie Customizer block
Click the Composerie Customizer block in the list. A violet outline appears around the customizer element on the canvas. Use it to confirm the customizer sits exactly where you want it on the product page.
Deselect to clear the outline
Click away from the block or select a different block. The violet outline disappears. It is a temporary marker for placement, so it never carries over to the live page.
Confirm on a real product URL
The editor preview can differ from the live page, especially for unlinked and Linked-mode products. After you save the theme, open a real product URL in a normal browser tab and check the customizer there. That is the view your shoppers get.
Common questions
Why is the product page blank in the editor?
The product is most likely in Linked mode, which renders no on-page customizer by design. A product with no design linked instead shows a placeholder card in the editor.
Why does the placeholder show in the editor but not on my live store?
The placeholder is editor-only on purpose. It marks where the block sits while you build. The live storefront shows nothing for a product that has no design linked yet.
I selected the block but see no outline. What now?
Make sure you clicked the Composerie Customizer block itself, and that the product is set to On-page or Full-page with a design linked. Linked-mode and unlinked products do not draw a customizer element to outline.
The editor looks right but the live page does not. Why?
The editor preview and the live storefront can differ. Save the theme, open a real product URL in a normal tab, and confirm there. If it still looks wrong, see the troubleshooting guide below.
If the customizer still does not show where you expect after checking the mode and the linked design, work through troubleshoot theme placement. If you use a page builder for your product pages, read page builder compatibility first.
Next
Once the customizer sits in the right place, make it live for shoppers with make Composerie visible on your store.