Layout

The Controls tab decides what you ask. The Layout tab decides how it is arranged and what else appears alongside it.

Elements

You build the panel from elements, added with Add Element.

Control places one of your controls. This is how a control gets onto the page: adding a control in the Controls tab creates the question, and placing it here decides where it appears.

Section groups elements under a heading. The simplest way to break a long panel into parts that make sense, like Materials, Dimensions, Extras.

Accordion does the same but collapses, which is how you keep a panel with many options from becoming a wall. Put the choices most customers change at the top, expanded, and fold the rest away.

Tabs split the panel into pages the customer switches between. Good when your product has genuinely separate areas of choice, and worse than accordions when the choices interact, since a customer cannot see both at once.

Text and Message add words. Text is plain explanation. Message is a highlighted note, for a lead time or a warning about a particular combination, and it can be set to appear only under certain conditions.

Image places a picture, useful for a diagram explaining what a measurement refers to.

Divider is a line.

Price shows the running total. Add it if you are charging for options, otherwise your customer is choosing without knowing the cost. It can show an itemised breakdown, which is worth doing since a total that changes without explanation makes people suspicious.

Quantity lets them buy several of the configured item.

Add to cart places a buy button inside your panel, for when you have hidden your theme's own one to keep the flow in one place.

Confirmation appears after adding to cart, and can offer the customer a link back to their configuration, so they can return to it or send it to someone.

Validation summary collects any outstanding problems in one place.

Download PDF gives the customer a document of what they designed. Pro plan.

Areas: putting panel parts elsewhere

By default the whole panel sits together beside the 3D view. Areas let you break that up.

Each element can be assigned to an area, and the built-in areas are the main panel, the four corners of the 3D canvas, and the buy area next to your add to cart button.

Canvas corners suit a small control that belongs visually on the product, like a colour switcher sitting over the model. The buy area suits things decided at the last moment, like quantity or a gift note.

You can also define your own areas with an id of your choosing, then place a GUI Controls block in your theme wherever that area should appear. That is how you spread the panel across the product page, with material choices near the title and personalisation near the buy button.

Elements you do not assign go to the main panel, so you only need to think about this for the ones you want moved.

Previewing as you go

While the GUI section is open, the right side of Composer shows the panel itself rather than the 3D view, at desktop or mobile width.

There is an inspect mode: click any element in the preview and Composer opens and highlights it in the editor. On a panel with forty elements this saves a lot of scrolling.

Check mobile early and often. A panel that is comfortable on a wide screen can become an enormous scroll on a phone, and most of your customers are on a phone.