You opened a product page on your live store and the personalize button (or the on-page customizer) is not there. This guide walks you through the usual causes in order, from the most common to the least. It is for merchants who have already connected a store and added a product, but see nothing on the storefront. Work top to bottom and stop as soon as the customizer appears.
Most of the time the cause is one of five things: the app embed is off, the customizer block is missing, the product has no design linked, the product is in a mode that shows nothing on the page, or the theme layout is squeezing the customizer. Start with the two theme switches, because they account for the majority of cases.
Check the two theme switches first
Composerie needs two switches turned on in your Shopify theme: the app embed (the always-on engine) and the customizer block (the visible button). Your dashboard reads your published theme and reports each switch on its own row, so you can tell exactly which one is off.
Open the Make Composerie visible step
On your dashboard home page, open the Make Composerie visible on your store row in the Setup checklist. Look at the two rows inside and find the one that is not marked done.
Turn on the embed if its row is not done
If the embed row is not done, the background engine is off and nothing renders. Open the theme editor from that row, switch the Composerie embed to on, and click Save.
Add the block if its row is not done
If the block row is not done, the visible button is missing. Use the Add block button on that row to insert the Composerie Customizer block into your product template, then click Save.
Recheck the theme
Back in the modal, click Recheck. Composerie re-reads your published theme within a few seconds and updates each row. Both rows marked done means the switches are correct.
For the full walkthrough of both switches, see turn on the two theme switches. For what the block can do once it is added, see the customizer theme block.
Check the product itself
If both theme switches are on and the page is still empty, the problem is on the product, not the theme. Two settings decide whether a shopper sees anything: a linked design, and the storefront mode.
Confirm a design is linked
Open the product in Composerie and look at the connected store card. The product needs a Composerie design linked to it. With no linked design, the live page shows nothing, and the theme editor shows only a placeholder. Link a design from the dashboard if the field is empty.
Check the storefront mode
On the same card, check the product’s mode. Linked mode renders nothing on the product page on purpose: it is meant for a separate customizer page or link, not the product page itself. If you expected a visible customizer, switch the mode to On-page or Full-page.
Open a real product URL
Test on a live product URL, not just the theme editor preview. The editor preview can differ from what shoppers see, so a real page is the reliable check.
Check inside your page builder
If your product pages are built with a page builder, the Composerie app block has to be added inside the builder as well as in the theme. Confirm the block is present there.
For what each mode does and when to pick it, see storefront modes explained. For page builders, see page builder compatibility.
Fix a squeezed layout
Sometimes the customizer does appear, but it looks cramped on desktop because your theme’s product column is narrow. The block includes Storefront fit settings that widen or uncap that column. These apply on desktop only; the mobile stacked layout is left untouched. Open the block in the Shopify theme editor and scroll to the Storefront fit section.
Turn on Widen customizer column, then set Column width to Wide (60 / 40) or Extra wide (70 / 30). The first number is the share given to the customizer side. Save and reload a product page to see the new split.
If your theme locks the product column to a fixed pixel width, turn on Remove column max-width cap instead. That lifts the cap so the column can grow.
Composerie auto-detects more than 20 themes and fills in the right column targets for you, so you usually do not touch the advanced fields. Only set the Info-column CSS selector and Media-column CSS selector if your theme is not auto-detected and the toggles above had no effect. If the layout still looks wrong after that, contact support with your theme name.
Still nothing? Quick checks
I turned on both switches but the page is still empty.
Reload the live product URL after saving the theme, and confirm the product has a design linked and is not in Linked mode. The theme editor preview can differ from the live page, so always test a real URL.
The theme editor shows the customizer but the live page does not.
That points to the app embed being off. The editor can render a placeholder, but the live page needs the embed running. Open the Make Composerie visible step and confirm the embed row is done.
Recheck still shows a row as not done after I saved.
Save again in the Shopify theme editor, then wait a few seconds and click Recheck once more. Composerie reads your published theme, so make sure you edited the theme that is published, not a draft.
The customizer loads but looks too narrow on desktop.
Open the block's Storefront fit settings, turn on Widen customizer column, and pick Wide or Extra wide. Use Remove column max-width cap if your theme caps the column width.
If you have worked through every step and the customizer still does not appear, contact support with your store URL and the product you are testing.
Next
If your fix was the two switches, read turn on the two theme switches to confirm both are set up the right way.