Skip to main content

App Embed

In the Shopify theme editor this appears under App embeds as 3D Bits - Auto 3D on product pages. It is the recommended way to run 3D Bits and the only thing most stores need.

Switching it on lets 3D Bits render on your storefront. On each product page it checks whether that product has a published 3D Bits project, and if it does, it draws the configurator. Products without one are left alone.

If you have not turned it on yet, Enable 3D on Your Store walks through it.

Most of the settings below have a sensible default and can be left alone. The ones that matter for a specific look, such as canvas height and where the options panel sits, are set per project in the app rather than here, so that each product can differ.

Placement​

Default: form[action*="/cart/add"]

A CSS selector saying where on the product page the 3D viewer is inserted.

The default targets your add to cart form, which every Shopify theme has. This is why the embed works on any theme without setup.

To put the viewer somewhere else, enter that element's selector instead. A common choice is the product gallery or media area, for example div.product__media-wrapper. The exact selector depends on your theme, and your theme developer or your browser's inspector will tell you what it is.

If the selector matches nothing on the page, no viewer appears, so it is worth testing on a real product after changing it.

Show Fullscreen Button​

Default: on

Adds a button that expands the 3D view to fill the screen. Worth keeping for products with detail people want to look at closely.

Fuller explanation in Show Fullscreen Button.

Show Spinner​

Default: on

Shows a loading indicator while the 3D scene is being prepared or recalculated. Leave this on. Without it a slower model looks like a page that is not responding.

Fuller explanation in Show Spinner.

Receive Input Names As Variants​

Default: on

Decides whether 3D Bits identifies your theme's product options by their technical field names or by the labels a customer reads.

Technical names are more reliable, because they survive translation and rewording, so this should normally stay on. It only matters if you are driving the 3D scene from your theme's own variant pickers rather than from a panel you built in Composer.

Fuller explanation in Receive Input Names As Variants.

Input Collection Mode​

Default: Standard

Chooses how much of the product form 3D Bits pays attention to. Standard watches product variants. All Inputs also watches other fields on the form, which you need when your theme adds custom personalisation fields that should affect the 3D scene.

Fuller explanation in Input Collection Mode.

Pins which version of the 3D Bits runtime your storefront loads. Leave it as it comes unless we have asked you to change it, or unless you are hosting the runtime files yourself.

Fuller explanation in Runner CDN Link.

Enable OCCT, Enable JSCAD, Enable Manifold​

These load geometry engines used by parametric configurators built with scripts. They only apply to script-driven products, and each one adds to what the page has to download, so turn on only what your scripts actually use.

Projects built in Composer choose their own engines in the Scripting section, which takes precedence over these. In practice you rarely need to touch them here.

The individual settings are explained under Enable OCCT, Enable JSCAD and Enable Manifold.

When the embed stays out of the way​

There are two situations where the embed deliberately does nothing, both to avoid drawing a second viewer on top of one that is already there.

The first is a project you have set up to use theme blocks for placement. You have told us you want to position things yourself, so the embed leaves that product to your blocks.

The second is a product configured before the app embed existed, using a BITBYBIT VIEWER or RUNNER block placed into a template. Those keep working as they always did.

Settings that live in the app instead​

Canvas height on desktop and mobile, maximum width, side margins, where the options panel sits and how wide it is, and maintenance mode are all set per project in the Shopify admin, under a project's Storefront settings. They are not here because they usually need to differ between products, and the app embed applies to your whole store.