Turn flat product photos into a fully interactive 3D experience. Customers can spin, zoom and inspect your product from every angle, switch between colours, finishes and materials and watch the model update instantly. On a phone, they can place the product into their own room using augmented reality.
You upload a single 3D model for each product, map your existing options (such as colour, finish and size) to it, then add the 3D Configurator element to your product page in the page builder. Because option values match the finishes in your model by name, most products need no manual setup. The plugin 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 — customers spin, zoom and inspect the product from any angle.
- Live finish switching — colour, finish and material changes are tied to your product options and update the model instantly.
- Augmented reality preview — shoppers on iOS and Android can view the product in their own space, with no app to install.
- One model per product — reuses your existing product options and variants.
- Automatic option mapping — option values are matched to model finishes by name.
- Show and hide parts — supports modular, "build-your-own" products.
- Per-variant models — an optional separate 3D model can be used per variant for simple products.
- Open standard, fast delivery — built on glTF with compressed, fast-loading models.
Before you start
To use this plugin you need a 3D model of your product in GLB (binary glTF) format. You provide one model per product.
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 the configurator to switch finishes automatically, it helps to have the model's materials and finishes named to match your product option values. See How option mapping works below.
Getting started
- Install the plugin and start your free trial. Add the 3D Product Configurator from the plugin store to begin your 14-day free trial.
- Upload a GLB model to a product. Open the product you want to configure and upload its GLB model. Use one model per product.
- Map your options (if needed). Match your product's option values (colour, finish, size) to the model. In most cases this happens automatically by name — see below.
- Add the 3D Configurator element. Open the product page in the page builder and drop the 3D Configurator element onto the page where you want the viewer to appear.
- 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 materials and finishes inside your 3D model.
- Automatic matching by name. Option values are auto-matched to the finishes in your model by name. If your colour option value is "Walnut" and the model has a finish named "Walnut", they link up with no manual setup. Keeping these names consistent is the simplest way to get instant finish switching.
- Modular show and hide parts. For modular, "build-your-own" products, the configurator can show or hide individual parts of the model so customers can assemble their own configuration.
- Per-variant models for simple products. For simple products, you can optionally use a separate 3D model per variant instead of switching finishes within a single model.
Augmented reality
On a supported phone, customers can preview the product in augmented reality — placing it into their own room at real-world scale to judge size and fit.
- It works on both iOS and Android, directly in the mobile browser.
- There is no app to install — the AR preview opens from the product page.
- Because it is built on the open glTF standard, the same model you upload powers both the on-page 3D viewer and the AR preview.
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.
Finishes are not switching when a customer changes an option. This usually means the option value names do not match the finish or material names in the model. Confirm that your option values (for example "Walnut" or "Matte Black") are spelled the same as the corresponding finishes in your GLB file, then re-check the product.
Augmented reality is not available on a device. AR depends on the customer's phone and browser supporting it. On unsupported or older devices the AR preview may not appear, while the on-page 3D viewer still works as normal.
The model is slow to load or the file is very large. The plugin uses compressed delivery on the glTF standard, but very large or highly detailed models can still load slowly. Where possible, reduce the model's size and detail before uploading so it loads quickly for shoppers, including on mobile.
Support
For help with this plugin, visit the Orbit Commerce Help Centre, or use the Get support link on the plugin's store page.