This guide shows you where to place the Composerie Customizer block on your product page and how to adjust it when a theme makes it look cramped. It is for merchants who are setting up the customizer in the Shopify theme editor and want to control how it appears.
The Customizer block is the visible part of Composerie on your storefront. You add it once in the theme editor, and the block reads your product settings to decide what to show. There are no settings inside the block that you have to fill in to make it work.
What the block does
The block renders the Composerie customizer for whichever product the page is showing. It picks one of three modes based on the product’s storefront mode, which you set in the dashboard, not in the block:
- Linked: the personalization opens on a separate customizer page. On the live storefront the block renders nothing at all.
- On-page: the customizer appears right on the product page.
- Full-page: the block shows a Customize button that takes the shopper to a full-page customizer.
Because behavior comes from the product, you do not configure the mode here. Set the mode once in the dashboard and the block follows it. To learn how the three modes differ, see storefront modes explained.
In Linked mode the block is silent by design. It loads no scripts and makes no requests, so an empty-looking product page in Linked mode is correct, not broken.
If a product has no design linked yet, the block shows a placeholder card with a dashed border, reminding you to set up personalization in the dashboard. This placeholder only appears inside the theme editor preview. It never shows on the live storefront, so shoppers never see it.
Where to put the block
Add the block to the main product section, the same section that holds your variant pickers and the add-to-cart button. That way the customizer sits with the rest of the buying controls where shoppers expect it.
Open the product template in the theme editor
In your Shopify admin, go to Online Store, then Themes, then Customize. Use the page selector at the top to switch to a Product template.
Add the Composerie Customizer block to the main product section
In the main product section, click Add block, choose Composerie, then choose Customizer. The block drops into the section.
Position the block where you want it
Drag the block up or down within the main product section. In On-page mode it renders the customizer in place. In Full-page mode it renders the Customize button, so place it near the add-to-cart button.
Save the theme
Click Save in the top right. Your placement is now live on that product template.
You can reorder the block at any time, just like any other block in the section. For the full setup flow, including how the block first gets switched on, see make Composerie visible on your store.
Fix a cramped layout with Storefront fit
Some themes give the product information column less width than the customizer needs. If the customizer looks squeezed on desktop, open the block’s Storefront fit settings to widen things. Leave these settings off if the layout already looks right.
These fixes apply on desktop only. They never change the mobile layout. Composerie also auto-detects more than 20 themes, so most stores need none of these toggles.
Select the block and open Storefront fit
Click the Composerie Customizer block in the theme editor. Its settings open in the left panel. Find the Storefront fit section.
Turn on Widen customizer column
Check Widen customizer column. Then set Column width to the split that fits your page:
- Balanced (50 / 50)
- Wide (60 / 40)
- Extra wide (70 / 30)
The Column width option only applies while Widen customizer column is on.
Remove the max-width cap if the column is still locked
Some themes cap the product column at a fixed pixel width. If widening alone does not help, check Remove column max-width cap so the column can grow past that limit.
Save the theme
Click Save. Check the desktop preview to confirm the customizer now has room.
The block also has a Full-bleed preview option, which lets the preview side fill its column. There is an Apply from screen width selector (750px, 990px, or 1200px) that controls the breakpoint where the fixes kick in. The default is 990px.
Why is the customizer not showing on my live product page?
If the product is in Linked mode, that is expected. Linked mode renders nothing on the storefront and opens personalization on a separate page instead. Check the product's mode in the dashboard.
I see a dashed placeholder card. Is something broken?
No. That placeholder means the product has no design linked yet, and it only appears in the theme editor. Link a design in the dashboard and it goes away.
Do the Storefront fit settings change my mobile layout?
No. Storefront fit applies on desktop only. Mobile is left untouched.
Do I need to set anything inside the block for it to work?
No. The core block has no required settings. Your product and shop settings drive its behavior. Storefront fit is the only optional set of controls.
If the block still does not appear where you expect, see troubleshoot theme placement.
Next
Learn how Composerie chooses what to render on each product in storefront modes explained.