Show shoppers an interactive 3D model of your product on its product page. They can turn the model round and zoom in, and when they pick an option such as a colour or a finish, the model switches to match.
You upload a 3D model to each product, choose which finish or model each variant shows (matching names do much of this for you), then add the 3D Configurator element to your product page in the page builder. The viewer is built on the open glTF web standard, so there is nothing for your shoppers to install. It works directly in the browser.
Features
- Interactive 3D viewer: shoppers turn the model round and zoom in to inspect it.
- Finish switching: when a shopper picks an option, the model switches to the matching finish in your GLB file.
- Works with your options and variants: your existing product options and variants drive the model.
- Automatic matching by name: a finish named exactly like an option value is picked automatically. Where names differ, the dashboard suggests matches you can apply.
- Models per variant: add more than one model to a product and choose which model each variant shows.
- Two page builder elements: the 3D Configurator element shows the viewer on its own, and the Product Media element adds it to your product gallery with a switch between photos and the 3D view.
- Open standard: built on glTF, with models uploaded as GLB files.
Before you start
To use this plugin you need a 3D model of your product in GLB (binary glTF) format.
Merchants typically obtain a model in one of the following ways:
- Existing CAD or design files: if your product was designed digitally, your manufacturer or designer may already have a model that can be exported to GLB.
- A 3D artist: a freelancer or studio can build a model from photos or specifications.
- 3D scanning: a physical product can be scanned to produce a model.
For finishes to switch automatically, ask whoever makes your model to include each finish as a material variant (the glTF KHR_materials_variants extension), named exactly like your product option values. See How option mapping works below.
Getting started
- Install the plugin. Add the 3D Product Configurator from the plugin store. Its plans and prices are on its store page.
- Upload a model to a product. Open the product, go to its 3D Configurator area and select Add 3D model, then upload a GLB file.
- Check the variant models. In the Variant models table, apply any suggested finishes, or pick a model and finish for each variant, then save the product.
- Add the 3D Configurator element. In the page builder, open your product page template, open the Plugins tab and drag the 3D Configurator element (or the Product Media element) onto the page.
- Publish. Save and publish the page so customers can see and interact with the model.
How option mapping works
The configurator connects your existing product options to the finishes inside your 3D model.
- Automatic matching by name. If a finish in your model has exactly the same name as an option value (capital letters do not matter), it is picked automatically. A colour option value "Walnut" picks a finish named "Walnut", but not one named "Walnut / Tan leather".
- Suggested matches. Where names differ, the Variant models table suggests finishes, which you can apply one at a time or all at once.
- A model for each variant. You can upload more than one model and choose which model, and which finish, each variant shows. Variants without a model of their own use the default model.
Troubleshooting
The 3D model is not showing on the page. Check that you have uploaded a GLB model to the product and that the 3D Configurator element has been added to the product page in the page builder. Make sure the page has been published. If you use the Product Media element, it opens on your photos unless you set its default view to 3D.
Finishes are not switching when a customer changes an option. Check that your GLB file includes finishes with exactly the same names as your option values (for example "Walnut" or "Matte Black"), or pick the finish for each variant in the Variant models table, then save the product.
The model is slow to load or the file is very large. Large, highly detailed models load slowly, especially on phones. Where possible, reduce the model's size and detail before uploading so it loads quickly for shoppers.
Support
For help with this plugin, visit the Orbit Commerce Help Centre (opens in a new tab), or use the Support link below.