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.

The store's discounts are on for every Price element while pricing is on and the product is sold through one of the charging methods; Pricing test mode shows none. When your store runs a discount this configuration qualifies for - an automatic discount, or a code the shopper has already put on their cart - the element shows it the way Discount style says:

• Concise is the default, and reads the way Shopify's own checkout shows a discounted item: the total struck through, the price after discounts beside it, and one line underneath naming each discount in a small tag, with the amount saved. When the tags do not fit on one line they wrap onto a second rather than squeezing the price, and a very long name is shortened with its full text on hover.
• Price only keeps it to the one line: the total struck through, the price after discounts and the percent saved. Pick it when the panel has no room to spare.
• Itemized lists each discount on its own row with its value, then the Total after discounts.

Concise       Total                  €120.00  €108.00
              Spring sale             You save €12.00

Price only    Total           €120.00  €108.00   -10%

Itemized      Total                           €120.00
              Spring sale (10% off)           -€12.00
              Total after discounts           €108.00

In the first two, €120.00 is struck through. Concise names each discount in a small tag; hovering a tag shows its value and amount.

When the shopper changes something that moves the total, the discounts keep their place and a small spinner with "Checking discounts…" stands in for them until Shopify has priced the new configuration, usually about a second, so the buy button does not jump. Nothing spins on a product with no discount showing.

The numbers come from Shopify. While the shopper configures, the storefront asks Shopify to price exactly the product, options and quantity on screen, the same way checkout will, and shows the discounts Shopify gives it. The rows appear only when Shopify's price for the configuration is the total the shopper sees, to the cent; when it is not, they stay hidden rather than discount a different price. Shopify prices the configuration on its own, for a shopper it does not know, so "Final price is confirmed at checkout" shows under the rows, and a few discounts only settle there:

• discounts that depend on the rest of the cart, such as a minimum spend across the whole order or buy X get Y, show at checkout rather than on the product page;
• discounts limited to logged-in customers or B2B buyers show at checkout;
• discounts limited to once per order or once per customer can show here and still be refused at checkout, for example when another item in the cart already used them;
• a subscription (selling plan) price is usually not the total shown, so the rows stay hidden for it;
• in a currency other than your store's, conversion rounding can leave Shopify's price a few cents away from the total, and then the rows stay hidden - see Other currencies.

Untick Show the store's discounts to never show them on that element.

Promo code advertises one of your discount codes on the Price element, as a chip with the code picked out. Type the code exactly as you created it under Discounts in your Shopify admin; Shopify matches codes regardless of case.

• Apply puts the code on the shopper's cart. From then on Shopify applies it to everything in the cart it covers, at checkout as well as in the discounts above. Once applied, the chip says so. Apply is not offered in Pricing test mode, where the chip only copies.
• Copy, the small copy icon beside Apply, copies the code for shoppers who would rather type it at checkout; it turns into a tick for a moment once the code is copied.
• Before the code is applied, the chip reads "Use code WELCOME5". As soon as Shopify confirms the code lowers this configuration's price, it reads "Save €6.00 with WELCOME5" instead, and it goes back to the plain wording whenever the configuration does not qualify - so a code with a minimum spend starts plain and states its saving once the shopper builds something big enough. If the shopper later removes the code from their cart, the chip offers it again.
• Once the code is on the cart but gives nothing on this configuration, the chip says it is on the cart and that any saving applies at checkout. That is also what a code limited to logged-in customers or B2B buyers shows, because the product page asks Shopify without knowing who the shopper is.
• The chip needs pricing switched on, like the rest of the Price element. The saving is checked for the first two different codes across your Price elements; a third still offers Apply and Copy, without stating a saving.
• Promo wording replaces "Use code {code}" with your own words; {code} is replaced with the code, and if your wording leaves {code} out, the code is added at the end. The saving and applied wording are built in and translate like the rest of the panel's wording.
• Promo placement puts the chip on its own line below the total, or beside it on the same line, wrapping underneath when there is no room.

Composer cannot check a code against your store, so a mistyped code shows as "Use code …" and never saves anything. Open the product page and press Apply once to be sure. To see the rows and the chip before you publish, open the discount simulator in Play - see Edit mode and Play.

You may not need a Parts list as well

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.

The Price element needs pricing switched on

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.

Confirmation has two prerequisites

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.

Screenshot lets shoppers save a picture of the 3D view, as they see it or from views you name, each pointing at a focal the camera flies to first. Shoppers can choose the size and shape of the picture. Screenshot 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.

A control's own condition lives on the Controls tab

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.

Only for visitors from a link

Page address shows an element only when the address of the product page carries a query parameter you name, such as ?preview=staff or ?trade - for a panel part meant for visitors who arrive from a campaign, a staff link or a trade portal. Give a Value to require that exact value, or leave it empty to accept any. Both compare exactly, capital letters included. It works together with Visible when: the element shows only when both hold. Bare control placements take it from a section around them.

Three things set it apart from the other conditions:

• It tailors, it does not protect. Anyone can type the parameter into the address, so never use it to hide a price or a choice someone must not get.
• Choices inside are charged either way. Checkout cannot see the page address, so a control inside keeps its default whether the element shows or not, and that default counts toward the price. Give any priced choice in such an element a default that costs nothing.
• Required fields inside are required only for those visitors. Everyone else never sees them, so they can add to cart without filling them in.

Don't use the parameter your shared configuration links carry (bb-config, unless you renamed it under The URL parameter): everyone opening a shared configuration would then see the element. The Composer lists that as a setup issue. Publishing warns you about a required or priced control inside such an element. An Add to cart inside one is likewise for those visitors only: everyone else keeps your theme's own buy button, even when you chose to hide it in favour of the panel's.

In Play, the link button in the toolbar appears once an element uses a page address. It lists every parameter your panel uses, so you can switch each on and see the panel as those visitors will. The Layout tab preview always shows these elements, so you can design them.

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 thirteen built-in choices:

Area	Where it lands
Main panel	The default. The panel beside the 3D view.
Main panel - pinned to the top, pinned to the bottom	Inside the main panel, staying in view at its top or bottom while the controls between them scroll.
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.

The Area field is honoured on top-level elements only

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.

Pinned to the top or bottom of the panel

The two pinned zones keep part of the main panel in view while the shopper scrolls through the controls - typically the price, the breakdown and Add to cart at the bottom, and perhaps a title or a lead-time note at the top. They share the panel's background and are separated from the controls by a thin line.

Beside the 3D view the panel has a fixed height, and the zones take what they need from it:

• A zone is as tall as its content by default. Tallest it may grow, in its row of the areas list, caps it in pixels or as a percentage of the panel; beyond the cap the zone scrolls inside.
• The controls between the zones always keep at least 40% of the panel. Controls keep at least, on the main panel's row, changes that. When the zones would take more, they shrink and scroll instead - the top zone first, since the bottom one usually holds the price and Add to cart.
• A price breakdown or parts list placed directly in a zone is limited to 30% of the screen's height and scrolls inside, so the Total and Add to cart stay in view when the shopper opens a long breakdown. A max height set under the element's Style overrides that.

On phones, and on tablets that stack the 3D view above the controls, the page scrolls instead of the panel, so the zones simply sit at the top and bottom of the controls. Keep on screen on phones, on the bottom zone, turns it into a bar along the bottom of the screen; it is held short enough that the 3D view and some of the controls stay visible. The same flow applies wherever the panel is not ours to size: when your theme's product information joins the panel, and when a GUI Controls theme block hosts the GUI.

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.

Do not hide your only add to cart

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.