Skip to main content

BITBYBIT GUI CONTROLS

Normally your options panel appears next to the 3D view, and that is the right answer for most stores. This block is for when it is not.

It lets you take part of your option panel and put it somewhere else entirely in your product template. The 3D view stays where it is, and your colour swatches sit up beside the product title, or your personalisation fields sit down next to the buy button, wherever your template has a place for them.

You add it in the theme editor like any other block: Customize your theme, open a product template, then Add block and choose BITBYBIT GUI CONTROLS.

How it fits together​

This block does not display 3D on its own. It contributes a spot in your template, and the configurator fills that spot with whichever elements you assigned to that area.

So a product using this needs two things. A 3D view on the page, from either the app embed or a BITBYBIT VIEWER block, and one or more of these GUI blocks in the places you want panel content to appear. They find each other automatically as long as they are on the same product page.

The assignment happens in Composer. In the Layout tab you give an element an area, and that element then appears in the block claiming that area. Elements you do not assign go to the main panel.

If you place this block on a product with no published project, the theme editor shows you a note saying so, rather than leaving you guessing.

GUI area​

Which part of the panel this block hosts. The choices are:

Main panel (all unassigned elements) is the default and holds everything you did not deliberately put elsewhere. Use this when you simply want the whole option panel in a particular place in your template.

Canvas corner, in top left, top right, bottom left or bottom right, overlays the 3D view itself. Good for a small control that belongs visually on top of the product, like a colour switcher or a reset button.

Buy area is the spot next to your add to cart button, which suits things a customer decides right before buying, such as a quantity or a gift note.

Custom area id​

If you defined your own areas in Composer, enter that area's id here and it overrides the selection above. This is how you build a layout with more than the built-in areas, for instance three separate groups of options in three parts of a long product page.

You create these ids in Composer's Layout tab. Enter the id exactly as you named it there.

When to use this instead of the app embed​

Use the app embed unless you have a specific reason not to. It is one switch and it covers every product.

Reach for these blocks when a particular product needs its panel broken up and distributed through the template, in a way that placing the whole configurator in one spot cannot achieve. When a project is set up this way, the app embed steps aside for that product so the two do not both try to draw it.

Be aware that theme blocks live in your theme, not in the app. If you switch themes, the blocks do not come with you and you place them again, whereas the app embed only needs switching on once in the new theme.