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
Open the customer form dock and choose Form to set how shoppers move through the fields. Under Layout, the cards are One page and Steps. Steps then offers Stepper, Accordion or Tabs as its structure, with the finer choices, such as the progress style and where the price shows, under More.
Here is what each one does:
- One page keeps the fields in one form.
- Steps / Stepper organizes the fields into successive steps.
- Steps / Accordion groups fields in expandable sections.
- Steps / Tabs shows one step at a time, with the steps as tabs above it.
Open the form settings
In the Design Studio, click the customer form tab on the right edge of the canvas, then choose Form at the top of the dock. The form settings open.
Choose your layout
Under Layout, choose One page or Steps, and choose the structure if needed. Save your changes and update the intended publication before checking the shopper flow.
Reorder fields and preview
The right-hand dock uses shared form components with the editor’s current settings. It is useful for checking fields and appearance, but the published shopper page still needs a separate check. Switch the dock between Preview and Form near the top.
In Form 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 Customer form title and the Preview / Form toggle near the top.
Reorder fields in Form
With the toggle set to Form, 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 Form, 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 the product has several sides, like a front and a back, remember the form covers the fields across them. See manage a product’s sides to set those up.
Common questions
Does reordering in the dock change the order for shoppers?
It changes the editor's field order. Save and update the intended publication, then check the actual shopper page.
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 shared form components and current editor settings. Check the published page separately for its saved configuration, available features, device layout, and cart behavior.
Can I switch layouts later?
Yes. Change the layout in the dock's Form view, save the change, and update the intended publication. Verify the new flow on the storefront before relying on it.
Next
To check the experience end to end, read how a shopper personalizes a product.