What the Customizer Is, and Everywhere It Runs

The shopper's side of Composerie appears in four places, and only two of them can take an order. Knowing which is which stops a passing preview from being mistaken for a working storefront.

The customizer is what your shopper actually touches: the form beside your product, the live preview that follows what they type, and the button that puts it in the cart. This guide covers what it is made of and the four places it shows up, because two of those four cannot complete an order and it is easy to test in the wrong one.

What it is

The customizer is a separate application from your dashboard. It renders your design, asks for the fields you marked editable, redraws the preview as the shopper works, and hands the finished result to your Shopify cart.

It gets everything from the design. The questions come from the personalization fields; the order they are asked in, and whether they arrive on one page or as steps, come from the customer form dock in the Design Studio.

DashboardEarlier Customizer panel in the Design Studio, with a Customer view toggle, Steps and Style tabs, a layout of Single page reading All fields on one page, and a draggable field order listing every field with its type icon
Earlier layout. The same settings are now the dock's Form view; drag a row to change the order shoppers meet the questions in.

The four places it appears

Two of these can take money. Two cannot, on purpose.

On your storefront

Embedded puts the form on the product page. Full page sends the shopper to a page of its own. Linked shows no customizer at all, which is why it is only offered for a design with nothing to fill in. See choose Linked, Embedded, or Full page.

In the Design Studio

The customer form dock beside the canvas shows the form as you build it. Its Preview view shows what a shopper sees, and its Form view is where you set the form up. It is the fastest way to check that a label reads well and that the order of the questions makes sense.

Preview on the product page opens the real customizer, on the real product, with checkout deliberately switched off. The button at the bottom reads Preview only.

That switch does more than block the cart. A preview does not save a draft either, so the “welcome back” restore a shopper would get on a second visit will not happen in a preview. Test the flow there; test the sale on the storefront.

Common questions

Why does my preview say Preview only?

Because it is a preview. It runs the real customizer with checkout switched off so you can test without creating orders.

Can I send a preview link to a customer?

It will open, and they cannot buy from it. For a shopper, send them the product page on your store.

The dock in the editor looks different from my storefront.

The dock renders the form, not your theme. Colours, fonts and spacing on the storefront come from your theme and the publication's appearance settings.

Where do I change the order of the questions?

The customer form dock in the Design Studio. Choose Form and drag a row in Field order.

Next

Read from design to print file for what happens after the shopper is finished, or how a shopper personalizes a product for their side of it end to end.

Every term used here has a one-line definition in the glossary.

Related articles