Skip to main content

Theme Blocks

Start here: most stores do not need this section at all.

The app embed is one switch that puts your published configurators on your product pages automatically. It works on every theme, needs no per-product setup, and survives you publishing new products. That is the recommended route and it covers the large majority of stores.

Theme blocks are the alternative, for when you want to decide exactly where something goes in your template. You place them by hand, per template, in the Shopify theme editor.

When placing blocks yourself is worth it​

There are two honest reasons.

You want the option panel broken up and spread through the product page rather than sitting together next to the 3D view. Colour swatches beside the title, personalisation fields down by the buy button. That is what the GUI Controls block is for.

Or you want the 3D view in a very specific place that the embed's placement setting cannot reach, and you would rather position it in the theme editor where you can see it.

Everything else, including canvas height, maximum width and which side the panel sits on, is set per project in the app and works the same either way.

One trade-off worth knowing before you commit. Blocks live in your theme, so if you change themes you place them again. The app embed is switched on once per theme and then forgotten.

The blocks​

App embed, shown as 3D Bits - Auto 3D on product pages, is not placed in a template at all. You switch it on once under App embeds and it handles every published product. This is the one to use.

BITBYBIT GUI CONTROLS hosts one area of your option panel wherever you drop it. Pairs with a 3D view elsewhere on the page.

BITBYBIT VIEWER renders the 3D view for a product in a specific spot in your template, as an alternative to letting the embed place it.

BITBYBIT PREVIEW embeds a public project from bitbybit.dev. It shows a scene but does not respond to product options, so it suits a showcase rather than a configurator.

BITBYBIT RUNNER is legacy, and the theme editor labels it so. It runs an exported script directly in the template. If you are doing this today, build a Script in the app and link it into a Composer project instead, which gives you the option panel, pricing and publishing around it.

BITBYBIT APPS is a Pro plan block for development teams shipping an entire application of their own on the product page. Specialised, and rarely the right starting point.

Working with Shopify templates​

If you are going to place blocks, it helps to understand templates, because that is where blocks live.

Every product in your store uses a template, and new stores start with a default one. A template is a blueprint applied to many products at once, so editing it changes every product using it, which saves you repeating yourself. If only some of your products should show 3D, and you are placing blocks rather than using the embed, you would make a separate template for those.

To see which template a product uses, open the product in your Shopify admin and look for the Theme Template card at the bottom of the right sidebar. The eye icon opens it for editing.

Shopify Product Template

To create a new one, open View Template for a product, click the template name at the top of the screen, and use the Create template button, choosing an existing template as the starting point.

Inside a template you will find blocks from Shopify itself, such as Variant Picker and Buy Buttons, alongside blocks from apps like ours.

Theme app extension blocks listed

Shopify's own documentation on templates goes deeper if you need it.

Settings reference​

Several settings appear on more than one block and are documented once, in Shared Block Settings. Each block's own settings have their own page, linked from the list above.