Canvas Size and Layout
This used to be the hardest part of setting up 3D on a product page, and it involved editing your theme's CSS. It does not any more.
With the app embed, the 3D view takes the full width available to it on the product page, and you control the height and the layout from the app. No CSS, no theme editing, and different products can be set up differently.
Where the settings are
Open a project in the 3D Bits app and find the Storefront settings card. Everything on this page lives there.
Changes take effect when you publish the project, the same as anything else.
Height
The setting you will actually use. There are four choices, shown with a small picture of what each looks like.
Tall takes three quarters of the visitor's screen. This is the default for new projects and the right answer for most configurators, since the product is the point of the page.
Half takes half the screen, which suits a product page where the description and specifications matter as much as the visual.
Compact takes 40% of the screen. Use it when 3D is a supporting detail rather than the main event.
Custom lets you type an exact figure. You choose the number and whether it is in pixels or as a percentage of the screen.
Desktop and mobile are set separately, because they genuinely want different answers. A view that fills three quarters of a laptop screen can swallow an entire phone, leaving the customer scrolling to find the buy button. If you are unsure, try Tall on desktop and Half on mobile.
Pixels or percentage
Percentage of the screen is usually the better choice. It keeps the same proportion of the page across a small laptop and a large monitor, so the layout feels deliberate everywhere.
Pixels are worth using when the product has a fixed aspect you want to preserve, or when you are matching the height of something else in your template exactly.
Width
You rarely need to touch this, because the view fills whatever width the product section gives it.
Max width on desktop stops it getting too wide on large monitors. On a very wide screen a full-width 3D view can push the buy button below the fold, and capping the width keeps everything in one eyeful. It takes a pixel value.
Side offset pulls the view out towards the edges of the page, past the normal content margin. This is how you get an edge-to-edge look on a theme that would otherwise keep it inside a narrow column.
Mobile side margin does the opposite on phones, adding a little breathing room at the sides so the view does not run flush to the screen edge.
Where the options panel sits
Two layouts, and this is more consequential than the numbers above.
Split puts the options panel beside the 3D view, on the left or the right as you choose. The customer sees the product and the choices at once, which is what you want for a configurator with a handful of options. New projects start here.
Inline puts the panel below the 3D view. Better for a long list of options, and closer to how a conventional product page reads.
Controls panel width sets how wide the panel is in split layout, in pixels. Wider suits controls with long labels or image swatches; narrower gives more room to the product.
On phones the split layout stacks automatically, because there is no room to place two things side by side. You do not need to configure this.
If it still does not look right
Almost always, the cause is your theme constraining the section the configurator sits in, rather than anything in these settings. A theme that keeps product media inside a narrow column will keep the 3D view there too.
Two things to try. Increase the side offset, which is the setting made for exactly this. Or change where the configurator is placed, using the app embed's Placement setting, to put it somewhere in your template with more room, such as your product media area.
If neither helps, your theme's own page width settings are worth a look. Most themes expose a maximum content width in the theme editor, and widening it affects the whole page rather than only the configurator.
Products placed with theme blocks
If you place theme blocks yourself rather than using the app embed, the height and layout settings above still apply, because they belong to the project rather than to the placement.
What changes is width. A block sits inside whatever container you put it in, so its width comes from your template at that spot. If you have deliberately placed the 3D view into a narrow column, that is where it will be, and the side offset setting is the way to push back against it.
Older products set up by hand
Products configured through the legacy metafields workflow predate these settings and are still sized by your theme's layout and any CSS you added at the time. Nothing about them has changed or will stop working.
Rebuilding one as a project and publishing it moves it onto the settings described here, and lets you remove whatever CSS you were using to control it.