This guide shows you how to control the shopper-facing customizer for a product. You will pick the form layout, set the order your fields appear in, and preview the real customizer right inside the Design Studio. It is for merchants who have already made some fields customer-editable and want to shape how the form feels to shoppers.
If you have not made any fields editable yet, start with make fields customer-editable first. The form only shows fields you have opened up to shoppers.
Pick a form layout
The layout decides how shoppers move through the fields. Composerie gives you three layouts: Single, Wizard, and Tabbed. You set the layout once per product, and it applies to the whole form.
Here is what each one does:
- Single shows every field in one scrolling form. Best when there are only a few fields and shoppers can see them all at once.
- Wizard breaks the fields into steps. Shoppers complete one step, then move to the next. Best for longer forms where you want to guide people in order.
- Tabbed splits the fields into tabs shoppers can switch between. Best when fields fall into clear groups and shoppers may want to jump around.
Open the Customizer panel
In the Design Studio, click Customizer in the icon rail on the left. The customizer settings open.
Choose your layout
Click Single, Wizard, or Tabbed in the layout selector. The active layout shows as a filled pill. Your choice saves to this product.
Reorder fields and preview
The right-hand dock shows the real shopper form. It uses the same components shoppers see, so what you preview matches what they get. It also renders your saved appearance for this product: the template, colors, and fonts. The dock has two modes you switch between with the Edit / Preview toggle.
In Edit mode you arrange the form. You can drag fields to change their order, and click a field’s pencil to jump straight to that element in the editor.
In Preview mode you act like a shopper. You type into the fields and watch the canvas update live, so you can check the design responds the way you expect.
Open the customizer dock
Click the customizer dock on the right edge of the Design Studio. It opens with the Customizer form and the Edit / Preview toggle near the top.
Reorder fields in Edit mode
With the toggle set to Edit, drag a field up or down by its handle to change its position. The order you set here is the order shoppers see. This rewrites the field order for the whole product, not just this view.
Jump to a field's element
Still in Edit, hover a field and click its pencil. Composerie selects that field’s element and opens its properties, so you can adjust the text, image, or other settings behind it.
Switch to Preview and type
Click Preview on the toggle. Type into the fields the way a shopper would. The canvas updates live as you type, so you can confirm the design reacts correctly before you publish.
If you have several design surfaces, like a front and a back, remember the form covers the fields across them. See manage surfaces to set those up.
Common questions
Does reordering in the dock change the order for shoppers?
Yes. Dragging a field in Edit mode rewrites the field order for the whole product, so shoppers see the new order.
Why are the Add to Cart and Share buttons greyed out?
The dock is a preview, not a live cart. Those buttons stay disabled so you cannot place a test order from it.
Will the preview match what shoppers actually see?
It uses the same customizer components and your saved appearance for this product, including the template, colors, and fonts, so it stays in sync with the storefront.
Can I switch layouts later?
Yes. Open the Customizer panel and pick a different layout at any time. The change applies to the product right away.
Next
To check the experience end to end, read how a shopper personalizes a product.