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. It takes a title and an optional description.
Row lays its children out in a horizontal line, wrapping onto a new line when they no longer fit. It is what you reach for when two things belong side by side rather than stacked: a label beside its input, a price beside a quantity, a strip of buttons. Its children keep everything they have anywhere else - their conditions, their greying out and their pricing all still apply. Besides an optional title, a row has a Gap in pixels between its children, an Align setting for how they line up across it (centre, top, bottom, equal height, or by the first line of their text), a Justify setting for how leftover horizontal space is shared out along it, and Wrap, which is on by default. Turn wrapping off only for a row you know stays narrow, because otherwise the children overflow.
Accordion does the same as a section but collapses, which is how you keep a panel with many options from becoming a wall. Put the choices most shoppers change at the top, expanded, and fold the rest away. It can carry an icon or small image beside its title.
Tabs split the panel into pages the shopper switches between. Good when your product has genuinely separate areas of choice, and worse than accordions when the choices interact, since a shopper cannot see both at once. You choose which tab opens first, and each tab has its own visibility and availability conditions.
Text and Message add words. Text is plain explanation, in one of four styles from heading down to caption. Message is a highlighted note, for a lead time or a warning about a particular combination, and it comes in info, success, warning and error flavours. Both can be set to appear only under certain conditions. Either can carry a link written as [label](https://...), which becomes clickable in the panel - Read the [care guide](/pages/care) first. The destination has to be a web address, a mailto: or tel: address, or a page on your store; anything else stays as the literal text you typed.
Image places a picture, useful for a diagram explaining what a measurement refers to. It takes alt text, an optional caption and a maximum height.
Link is a hyperlink on its own: link text and a destination, shown either as plain link text or as a button in the panel's button styling. It can open in a new tab, carry an icon the way the Download PDF button does, and both its text and its destination are translatable, so a French shopper can be sent to the French page. The same destination rules as inline links apply.
Divider is a line - or, set to Empty space, nothing at all. The second is how you get breathing room between two groups without drawing anything across the panel. Either way you set the size in pixels.
Parts list shows what the configuration is made of, drawn from the Parts tab. It lists labels and quantities, and never shows your internal part numbers. You can turn the quantities off, and set what it says when the configuration resolves to no parts at all - by default it simply hides itself. Parts themselves need the Pro plan.
Four more options are worth knowing:
- Group rows decides whether the list reads like your parts tab or like the order. Left as one row per part, it prints exactly what you authored. Set to one row per product, any product that several parts point at gets a row carrying the total for that product, with those parts listed underneath it. Use it when your bill of materials names the same product more than once - four shelf positions each fitted with the same bracket read as four rows of one, while the cart charges a single line of four, and a shopper comparing the two concludes something went missing. Like every row in the list, the number is for one configured item: a shopper buying two is charged twice it. Parts nested inside an assembly are left as they are, because grouping them would pull them out from under the part they belong to.
- Show each part's picture puts the linked product's image beside each row. Only parts linked to a store product have one, and a part linked before pictures were recorded shows none until you Refresh linked products on the project page - see Linked products. Size the pictures under Style.
- Show what each part costs adds a price column beside the quantities. It is off to begin with, because the list is a build sheet before it is a quote and plenty of shops would rather show one total than itemise it. A part that adds nothing on top of the base price is listed with its price column left empty rather than as zero, which would read as something the shopper is getting free. Nothing shows at all while pricing is switched off.
- Let the shopper fold the list away puts the list behind a toggle, the way the price breakdown can be. The heading stays visible while it is shut, so a long bill of materials does not push your buy button off the screen. You choose whether it starts open.
Price shows the running total. Add it if you are charging for options, otherwise your shopper 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.
Breakdown style decides how that breakdown reads, and it only appears once you have switched the breakdown on.
- One line per charge is the original, and stays the default. Every charge - the base price, each priced option, each formula, each part - gets one line stating what it is and what it adds.
- Draw the parts, with pictures and quantities gives the charges that come from your parts the same treatment the Parts list gives them: the product's picture if you want it, then the name, then how many and what it adds. Everything else stays a plain line. It is the one to reach for when your product is priced from its bill of materials and your products carry good photography, because then the breakdown is the part of the panel a shopper actually reads.
Choosing the second gives you the same Show how many of each, Show each part's picture and Group rows settings the Parts list has, and they mean exactly the same things there.
Where a configuration is charged by options and by parts, the breakdown separates the two into an Options and a Parts section, each with its own subtotal, then the total underneath. Where only one of the two carries any charge there are no headings and no subtotals - a product priced entirely from its parts reads as one list of parts, not as a list under a heading of one.
A price breakdown drawn as parts already shows the labels, quantities and pictures. Adding a Parts list beside it prints the same rows twice. Use both only when you want the build sheet somewhere the price is not.
It renders nothing at all until pricing is enabled in the Pricing tab. If you have placed one and the panel shows no total, that is the first thing to check.
Quantity lets them buy several of the configured item. It is the familiar - N + stepper: the displayed price multiplies by it, the cart line ships at it, and on the product page it stays in step with your theme's own quantity input. The Add to cart element hides its own built-in stepper when this element is present, so the two never disagree.
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. You set the button text, the success and error messages, whether it shows its own quantity stepper (or takes the quantity from one of your numeric controls), and where the shopper goes afterwards - stay on the page, go to the cart, or go to checkout.
Confirmation appears after adding to cart, and can offer the shopper a link back to their configuration, so they can return to it or send it to someone.
It reacts to an Add to cart element, so without one in the panel it never appears - Composer warns you when that is the case. The copyable link additionally needs the configuration to be remembered in the URL, which is a setting in the Settings tab.
Validation summary collects any outstanding problems in one place. Each entry is a link: clicking it opens whichever accordion or tab the offending control is hiding in, scrolls to it and puts the cursor in it. It hides itself while everything the shopper can see is valid.
Download PDF gives the shopper a document of what they designed. The button renders nothing unless the customer document is enabled and designed under PDF Reports. Pro plan.
Custom HTML places a fragment of your own HTML, with its own CSS, for content the other elements cannot express - a table of measurements, a badge, a note with formatting. The panel keeps text formatting and removes everything that could run code, so it is safe to paste; what survives and what does not is spelled out on Custom HTML. Standard or Pro plan.
Camera controls lets shoppers move the camera without dragging: zoom buttons, a slider that turns the view and one that tilts it, and an axis gizmo that looks at the model from the side you click. Each part can be switched off, and the element pairs with the pointer switches under Scene > Camera that turn the default drag and wheel navigation off. Camera controls has the details. Standard or Pro plan.
Sections, rows and accordions can hold other elements, and each tab of a Tabs element holds its own, so you can nest as deeply as the product needs. Every element also offers Clone Element, Move To for shifting it into another container or back out to the top level, and - for sections, rows, accordions and tabs - Convert To, which turns one into another without rebuilding its contents. A section that has grown into two short things sitting awkwardly on top of each other becomes a row in one click.
Width and grow
Every element, of every type, carries a Width: a number and the unit it is measured in - px, %, rem or ch. Leave it empty and the element fills the space it is given, which is what almost all of them should do.
Width behaves differently inside a row, where it is a starting size rather than a final one. A second field appears there: Grow, the share of the row's leftover width this element takes. Zero, the default, keeps the element at its natural size. Two children at 1 each split the space evenly between them, and 2 against 1 takes twice as much. Grow does nothing outside a row, and Composer only offers it where it works.
Showing and greying out
Every element, not just a control, carries two conditions. Visible when decides whether it is on the page at all. Enabled when leaves it on the page but greys it out, with a Disabled hint explaining why - which is usually kinder than making something vanish.
Both cascade. Disable a section and everything inside it is greyed out too, at any depth, and a control with no hint of its own borrows the nearest one above it. Anything a shopper cannot reach is also never charged for.
Visible, or just unavailable
The choice between the two is a choice about what the shopper learns.
Hide something when its absence carries no information. A lining colour on an unlined bag is not a fact worth communicating - it is clutter, and removing it makes the panel shorter.
Grey something out when the absence is the information. A size you do not make in oak, shown crossed out with "not available in oak", tells the shopper something true about your range. Remove it instead and they conclude you do not offer that size at all, which is worse for both of you.
Neither costs the shopper money. Nothing inside a greyed element is charged, exactly as nothing hidden is, and checkout holds to the same conditions - so a shopper is never billed for something the panel would not let them touch.
Place a control here and you will see its Visibility section point you back at the Controls tab. That is deliberate: one condition, in one place, and the same one that decides whether the control is charged. If a placement from an older edit still carries a condition of its own, Composer says so and offers to clear it - the two are combined, so the control appears only when both match, which is rarely what anyone meant.
Areas: putting panel parts elsewhere
By default the whole panel sits together beside the 3D view. Areas let you break that up.
Each top-level element carries an Area field, and there are eleven built-in choices:
| Area | Where it lands |
|---|---|
| Main panel | The default. The panel beside the 3D view. |
| 3D canvas - top left, top right, bottom left, bottom right | Overlaid on the corners of the 3D view. |
| 3D canvas - top center, bottom center, left center, right center | Overlaid on the middle of that edge of the 3D view. |
| 3D canvas - center | Overlaid in the middle of the 3D view. |
| Near the buy buttons | Immediately after your theme's add to cart form. |
Canvas corners suit a small control that belongs visually on the product, like a colour switcher sitting over the model. The edge midpoints suit something the shopper reads first, like a title or a price along the top edge, or a row of camera buttons along the bottom. The centre overlay suits something that should interrupt, such as a confirmation after adding to cart. The buy area suits things decided at the last moment, like quantity or a gift note.
On a narrow screen the corner and edge areas stop overlaying the model and stack underneath the panel instead, because a phone has no room for anything floating over the view. The centre overlay stays where it is. That is the default; Where an area goes on a phone below is where you change it.
While you are in Play in the Composer, its own buttons share those two edges with your areas: the toolbar sits on the top edge and the Stop button on the bottom edge. Put something in the top center or bottom center area and it keeps the edge, exactly where the storefront draws it, and the Composer's buttons step inward to make room.
An element nested inside a section, an accordion or a tab renders where it sits, whatever its area says. The field is typed on every element, so nothing stops you setting it deeper in the tree - it simply has no effect there, and Composer only shows it where it will work. If you want a control in a canvas corner, it has to be a top-level element in the panel.
The areas list: how wide an area is, and folding it away
Under the elements there is an Areas list, one row per area in play: the main panel, every built-in area that holds at least one element, and your custom areas. An area you have not placed anything in is not listed - place an element in it first, with the Area field - and an area that still carries settings after its last element left stays listed with "no elements yet", so you can see the settings and reset them. Each row's header sums up what is set on it. A built-in area starts on its default - full width, no fold toggle, shown on every screen - behind a Configure button, and Reset to defaults puts it back there.
This is where the width of the panel column is set, and it is not settable anywhere else. Width, Smallest width and Largest width each take a number and a unit (px, %, rem or ch). On the main panel the width sets the controls column. On the canvas corners and edge midpoints it replaces the built-in cap of 60% of the view, which is what you reach for when a corner control is coming out cramped.
Shopper can fold it away adds a toggle that collapses that area's contents, leaving only the toggle over the canvas. It is the answer to a corner control that is useful but keeps covering the product. The fold settings appear once it is on: Start folded decides which state it opens in; after that the shopper's own choice sticks as they carry on configuring. Show the toggle on limits the toggle to every screen, phones only - 769 pixels and below - or desktop only. Toggle icon puts one of the built-in icons in place of the default chevron, and Toggle corner pins the toggle to a particular corner instead of following the area's own.
An area with nothing in it draws nothing, whatever you set here.
Where an area goes on a phone, and which screens hide it
Shoppers' screens fall into four kinds by width - phone, tablet, laptop and desktop, the same four the app's Canvas Size page draws - and on phones, and on tablets unless the merchant chose side by side, the layout is stacked: the 3D view on top, the controls below. Two settings in each configured area's Per screen group decide what that does to it.
Hide on is a checkbox per kind of screen, in the Per screen group of every area but the main panel, custom areas included. A hidden area still renders and its controls still count towards the price and the order data; only its box disappears. Use it for a corner control that earns its place on a wide screen and only clutters a phone, or the other way round.
When stacked, on the nine canvas areas, says where the area lands once nothing can float over the model:
| Placement | Where it lands |
|---|---|
| Below the panel | In a full-width stack after the controls. The default for the corners and the edge midpoints. |
| Above the panel | Between the 3D view and the controls. |
| Pinned under the canvas | In a strip stuck to the bottom edge of the 3D view, which stays put while the shopper scrolls the controls. This is where a price and an add to cart button belong on a phone. The strip has no background of its own, so the controls scroll visibly behind it - give the area an area card in the Style tab if that bothers you. It pins only when the merchant's layout is Split, the one that keeps the 3D view itself pinned; in the Inline layout the strip simply sits above the controls. |
| Stays on the canvas | Floating over the model, as it does on a wide screen. The default for the centre. |
If the only add to cart button in your GUI lives in an area you hide on some screen, shoppers on that screen keep the theme's own add to cart button instead - the storefront never hides both - but the price shown and the button they press then come from different places. Either keep an add to cart visible on every screen, or hide the area on none.
Stacked order decides the sequence within a placement; lower comes first, and areas without one follow in the built-in order. You rarely type it: the Order on phones block under the list draws the phone as the shopper scrolls it - the areas on the canvas, the pinned strip, the above stack, the main panel, the below stack - and you drag a row, or use its arrows, to move it inside its group. Areas hidden on phones are listed underneath.
The 2D preview at phone width and the 3D preview's phone button (see Previewing as you go) both draw the result, and the app's Canvas Size page draws it on the product page skeleton with your other settings around it.
Your own areas
Custom areas put elements anywhere else on the product page. Add custom area puts a new row in the same list. Each one is an id of your choosing, a CSS selector that finds a spot in your theme, and a Position saying where to land relative to what the selector matched - append or prepend inside it, or before or after it. Assign an element to that id and it appears there. A custom area takes the same size, folding and per-screen settings as a built-in one.
That is how you spread the panel across the product page, with material choices near the title and personalisation near the buy button.
Areas fail softly, by design. If a selector matches nothing on the live page - the theme changed, or the element only exists on some templates - the elements assigned to it fall back to the main panel rather than disappearing. The same happens to elements pointing at a custom area you have since deleted.
You can also override where an area lands by placing a GUI Controls block in your theme. The block claims one area and hosts it wherever you drop it in the theme editor, which is useful when a selector cannot express the position you want. Its area list does not offer the canvas centre - if that is the area you want, type canvas-center into the block's Custom area id field instead.
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 phone width. At desktop width, elements you have sent to other areas are drawn as separate labelled blocks beneath the panel, so you can see what each area actually contains. At phone width the preview stacks the way a phone does - a placeholder for the 3D view with the areas that stay on it at their corners, then the pinned strip, the areas above the panel, the panel, and the areas below it - with the areas you hid on phones named underneath.
Play has the same switch: the phone button in its toolbar renders the stacked layout around the real 3D view in a phone-wide column, so you can scroll the controls with the pinned strip in place and the model in view. The eye button hides the controls in both previews, and on the phone one the 3D view then takes the whole column, the way a full-canvas phone page would.
The preview has two modes. Preview behaves as the page does: use the form, watch conditions react. Inspect adds an editing layer - hovering outlines what you are pointing at, clicking still works as it does for a shopper, and double-clicking opens and highlights that element in the editor. On a panel with forty elements this saves a lot of scrolling.
If you have translations, a language toggle appears here too, so you can read the panel as a shopper in that language would. A reset button puts every value back to its default.
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 shoppers are on a phone.