Composerie gives you three ways to put personalization on a product page. This guide explains what each mode does, how it shows up to shoppers, and how to pick the right one. It is for merchants who have a product connected to their store and want to decide how customers interact with it.
The three modes at a glance
You set the mode in the connected-store card on a product. There are three choices, and each one changes what the shopper sees on your storefront.
Linked (no widget). Your theme stays exactly as it is. Composerie shows nothing extra on the product page. Behind the scenes, the chosen variant is mapped to a design, and that design is attached to the order. This is the best fit for catalog products that use pre-made designs and need no shopper input.
On-page customizer. Composerie takes over the upper area of your product page. Shoppers see personalization fields and a live preview right where they already are, without leaving the page.
Full-page customizer. The product page shows a Customize button. When a shopper clicks it, they go to a dedicated full customizer page on your own domain. After they finish, they come back to add the product to the cart.
The mode is set per product in the connected-store area, not once for the whole store. So you can run a plain catalog item in Linked mode and a heavily personalized item in Full-page mode at the same time.
How to choose a mode
The right mode depends on whether the shopper needs to type or upload anything, and on how much room your product page has.
Pick Linked when the product has no fields for the shopper to fill in and you only need the correct design attached to the order. Linked shows no customizer UI at all, so it suits ready-made designs that vary by variant.
Pick On-page when you want shoppers to personalize without leaving the product page, and your theme has enough room in the upper product area for the customizer.
Pick Full-page for richer or multi-step designs, or when your theme’s product page is too cramped to hold an on-page customizer. The shopper gets a full screen to work in.
Two guardrails decide whether a mode is available:
- Linked is greyed out when the product has personalization fields. Linked renders no interface, so a shopper would have no way to fill those fields in. Hover the dimmed segment and you will see a tooltip pointing you to On-page or Full-page instead.
- Full-page is greyed out until a proxy route is configured. Full-page sends shoppers to a customizer page served on your own domain through the Shopify App Proxy. Until that route is set up on the publication, the option stays disabled, with a tooltip telling you to configure the proxy route first.
If you have not made Composerie visible on your store yet, start with make Composerie visible on your store. To learn how the customizer block sits in your theme, see the customizer theme block.
A note on older mode names
If you have read older Composerie material, you may see modes called Mode 0, 0+, A, B, C, or D. Those names are retired. Do not look for them in the dashboard.
Today there are three modes you can pick: Linked, On-page, and Full-page. The older Minimal and Options plus Preview variants now both fall under On-page. So if a guide mentions a separate Mode B options-and-preview screen, treat it as the current On-page customizer.
Does the mode I choose affect what reaches the cart and checkout?
All three modes attach the design and personalization details to the cart line, so the order carries everything your print provider needs. The difference is only in how the shopper interacts on the product page.
Can I change a product's mode later?
Yes. The mode is per product, so you can switch it at any time from the connected-store card. The change applies the next time a shopper views that product.
Why can I only select two of the three modes on one product?
A mode is disabled when it cannot work for that product. Linked is disabled when the product has personalization fields, and Full-page is disabled until a proxy route is configured. Hover the dimmed option to read the reason.
Next
Once you have set a mode, check how the design and variant carry through to checkout in variant sync and checkout.