What is a 3D product configurator?
A 3D product configurator is software on a product page that renders a real-time 3D model the buyer can rotate, then lets them change options such as colour, material, size or components, recalculates the price, and passes the finished configuration to checkout or a quote request.
It is different from three things that often get sold under the same name. A 360-degree photo spin shows the product from every side but cannot change it. A variant gallery swaps pre-shot photos when you click a colour swatch, which works until you have more combinations than photos. A 2D customiser lets buyers type a name or upload a logo onto a flat image. A true 3D product configurator combines all of that in one live model, so even thousands of combinations need no extra photography.
Behind the viewer, a configurator is a small application with three parts: the 3D scene, a rules engine that knows which options are valid and what they cost, and an integration that turns the chosen configuration into something your store, your team and your workshop can act on. Most failed configurator projects got the scene right and the other two parts wrong.
Does your product actually need a 3D configurator?
You need a 3D product configurator when buyers must see a combination that you cannot photograph in advance, and the wrong choice is expensive to return. If your product has a handful of variants and photos already answer the buyer’s questions, a configurator is a costly way to decorate a page.
Three quick tests help. First, count combinations: multiply the options, for example 12 fabrics by 3 leg finishes by 4 sizes gives 144 versions. Beyond a few dozen, photography stops being practical. Second, look at your enquiries: if customers keep sending WhatsApp messages asking “how will this look in grey with brass legs?”, the configurator answers that question at scale. Third, consider returns and remakes: made-to-order goods are costly when the buyer is disappointed, so showing the exact result before payment protects margin.
Strong case
Made-to-order furniture, rings and pendants with metal and stone choices, custom uniforms and team kits, industrial equipment with options, doors, windows and modular kitchens.
Weak case
Fast fashion with fixed colourways, packaged goods, books, electronics sold in two or three variants, and anything where price and delivery speed decide the sale.
If you are not sure, start with a plain 3D viewer on your best-selling product and watch whether buyers use it. The 3D website design page covers that lighter step.
3D product configurators for furniture, jewellery, apparel and machinery
Each industry stresses a different part of a 3D product configurator. Knowing which part your category stresses tells you where the budget should go.
Furniture and home décor
Scale and material realism matter most. Buyers want to see wood grain, fabric texture and how a three-seater looks next to a single chair. Modular sofas and wardrobes add compatibility rules: which sections join, which doors fit which widths. AR placement in the buyer’s room is especially useful here.
Jewellery and watches
Light is everything. Metals and stones need environment lighting and carefully tuned materials so gold looks warm and a diamond sparkles without looking like plastic. Models are small but detailed, and price rules follow metal weight, purity and stone choice, which your price list must define clearly.
Apparel, footwear and team kits
Buyers change colours per panel, add names, numbers and logos, and pick sizes. The 3D side needs clean UV layouts so prints land where they should. The order side must produce a production sheet with exact colours, text and positions, or the factory will guess.
Machinery and industrial products
Configuration is usually about options and fit, not looks: motor size, attachments, mounting, voltage. These are often B2B quote tools rather than carts. Exploded views and dimension overlays help engineers, and the output is a spec sheet and quote request sent to your sales team.
Industry sites often come first; see our pages on furniture website design and jewellery website design for the rest of the store.
Custom Three.js configurator or a SaaS configurator platform?
Choose a SaaS configurator when your product fits its option model and you accept a recurring fee; choose a custom Three.js build when your rules, integrations or performance needs are unusual, or when you want to own the tool outright.
SaaS configurator platforms give you an editor for materials and options, a hosted viewer and plug-ins for common carts. Their strengths are speed and not having to maintain code. Their limits show up at the edges: pricing rules the platform cannot express, a production sheet format your factory needs, a checkout that is not on their plug-in list, or a monthly fee that grows with traffic. If the subscription stops, the configurator usually stops too.
A custom build uses Three.js (often with React Three Fiber) for the scene, your own rules code, and direct integration with your store. It costs more up front and needs maintenance, but there is no per-view or per-product fee, and the code, models and data stay in your accounts. For many Indian sellers with a few hero products and specific rules, custom works out cheaper over two or three years; for a large catalogue of simple products, SaaS may win. We will give you an honest view once we see your options list.
3D asset preparation: the part that decides quality and cost
3D asset preparation means turning your product files into light, modular models with a shared material library, so every option can be swapped in the browser instantly. It is usually the largest single task in a configurator project.
The web format is glTF, which the Khronos Group describes as “the JPEG of 3D” and which was published as ISO/IEC 12113:2022. We deliver GLB files, the single-file binary form, and compress geometry with Draco; the Three.js documentation notes that its glTF loader uses the Draco decoder internally for such files. For iPhone AR, a USDZ version is also needed.
Modularity is the key design decision. A configurable sofa is not one model; it is arms, backs, seats, legs and cushions as separate named parts that snap together at known points. Materials are defined once (walnut, oak, grey linen, brushed brass) and applied to any part, instead of baking one texture per combination. That is what keeps downloads small and makes adding a new fabric a ten-minute job rather than a re-export of everything.
- From CAD: accurate but heavy; needs simplification, hidden parts removed, UVs added.
- From a 3D artist: usually closest to web-ready; give the artist our target sizes and naming rules first.
- From scratch: photoreal modelling is a 3D artist’s job; we coordinate and integrate their files.
How pricing and compatibility rules work inside a configurator
A configurator’s rules engine does two jobs: it calculates the price of the current configuration, and it prevents combinations you cannot make. Both should come from data your team can edit, not from numbers buried in code.
Pricing is usually a base price plus option adjustments, sometimes multiplied by size or quantity, sometimes looked up from a table (for example ring price by metal, purity and weight band). Compatibility rules say things like “marble tops only on the 180 cm table” or “this motor needs the heavy base”. When a buyer picks something that breaks a rule, the interface should explain why and suggest the closest valid option, not just grey things out silently.
We store options, prices and rules in a small admin or a structured file your team can update, and the same data drives both the 3D scene and the cart price, so they never disagree. Where your store platform holds the price, the configurator calculates and displays it, but the platform stays the final authority at checkout. Pricing logic should be tested with your own worked examples before launch, because a small rounding error across hundreds of orders adds up.
Connecting a 3D product configurator to Shopify
On Shopify, the usual pattern is: the configurator runs on the product page, and when the buyer clicks add to cart, the chosen options travel with the line item as properties, so they appear on the order in your admin.
Shopify’s Ajax Cart API documentation confirms that /cart/add.js accepts line item properties as an object of key-value pairs, and that prefixing a key with an underscore keeps it private from storefront visitors while it stays visible in order details. That lets us send readable options (Fabric: Grey linen, Legs: Walnut) plus hidden technical data such as a configuration ID or a link to a snapshot image.
Pricing is the tricky part on Shopify, because the price is tied to variants. Common approaches are mapping configurations to a set of variants or price tiers, adding option charges through separate add-on products, or using apps and Shopify features that adjust price at checkout, depending on your plan. Shopify also supports 3D models as product media: its help centre lists GLB and USDZ, files up to 500 MB, automatic optimisation for files over 15 MB, and conversion so both formats exist for Android and iOS. That covers simple viewers; a configurator adds the options layer on top. See Shopify app development when a custom app is needed.
Connecting a 3D product configurator to WooCommerce
On WooCommerce, a small custom plugin attaches the configuration to the cart item, adjusts the price according to your rules, and saves everything on the order so it shows in the admin, in customer emails and on invoices.
WooCommerce is more flexible than Shopify on pricing, because PHP code on your own server can set the cart item price directly based on the configuration. That flexibility needs care: the price must be recalculated on the server from the chosen options, never trusted from the browser, otherwise a technically minded buyer could edit it. We validate each configuration against the same rules the front end uses.
The configurator front end itself is JavaScript and loads only on product pages that use it, so the rest of your WordPress site stays as fast as before. Order data can include a snapshot image of the configured product and a structured summary your workshop can print. If your store is still being built, our WooCommerce developer page covers the wider setup, and the Shopify vs WooCommerce comparison helps if you have not chosen a platform yet.
Can buyers see the configured product in AR on their phone?
Yes, on supported phones. The common approach is a “view in your room” button that hands the current model to the phone’s built-in AR viewer, so the buyer places the configured sofa or lamp in their own space.
Google’s open-source model-viewer web component supports three AR modes: WebXR, Android’s Scene Viewer and Apple’s AR Quick Look on iOS. Its source code shows that when no iOS file is supplied, it generates a USDZ from the scene on the fly, which matters for configurators because you cannot pre-export a USDZ for every combination. For fixed products, pre-exported USDZ files are still the more predictable option.
A few honest caveats. AR works best for objects with real-world scale, such as furniture, lighting and décor; it adds less for rings or small parts. Older or low-end phones may not support AR, so the button should hide itself when unavailable. And AR lighting depends on the room, so materials look slightly different than in the controlled viewer. We test the AR hand-off on real Android phones and iPhones before launch.
How much does a 3D product configurator cost?
With us, an online store with 3D product viewers and simple option swaps starts at ₹50,000 (US$750), and a custom 3D product configurator with pricing rules, compatibility logic, saved designs and an admin starts at ₹60,000 (US$900). These are starting prices; the itemised quote shows how yours is built.
Quotes across the market vary widely. When comparing, check what each includes on these drivers:
- Number of swappable parts and the size of the material library
- State of your 3D files: web-ready, CAD only, or none
- Complexity of pricing and compatibility rules
- Cart integration: Shopify, WooCommerce, custom checkout or quote form
- AR support and whether USDZ is pre-exported or generated
- Production outputs: snapshot images, spec sheets, order sheets
- Admin panel for your team to manage options and prices
- Ongoing subscription (SaaS) versus one-time build plus care
For wider store budgets, ecommerce website cost in India explains the base store costs a configurator sits on top of.
How long does it take to build a 3D product configurator?
A viewer with a few swaps on an existing store takes about four to six weeks; a custom configurator with rules, admin and cart integration takes eight to twelve weeks. Asset preparation often runs in parallel and sets the real pace.
Weeks one and two cover the options list, the pricing and compatibility rules, the asset audit and a greybox scene where you can already click through options with placeholder materials. This is where most of the important decisions are made, cheaply. Weeks three to six cover asset preparation, the material library, the interface and the rules engine. The remaining weeks cover cart or quote integration, order outputs, AR, phone testing and the admin.
The biggest delays we plan around are a price list that is not final, and 3D files that arrive late or much heavier than expected. Agreeing the options list and rules before modelling starts avoids rework. For a broader sense of build times, see how long it takes to build a website.
Making a 3D configurator work on budget phones
Most shoppers in India browse on Android phones, many of them entry-level, so a configurator must load quickly on mobile data, respond to a thumb, and never crash the browser tab. Desktop-first configurators often fail all three.
On the 3D side, that means compressed models and textures, loading only the parts and materials currently in view, capping the render resolution on high-density screens and baking lighting instead of computing shadows live. On the interface side, option pickers sit at the bottom of the screen within thumb reach, swatches are large enough to tap, the price and add-to-cart button stay visible, and the model area never covers the controls.
There should also be a graceful fallback. If a phone cannot run WebGL well, the configurator switches to 2D previews or pre-rendered images for the chosen options, and the buyer can still order. Page-level speed matters for search too: web.dev’s Core Web Vitals targets are LCP within 2.5 seconds, INP of 200 milliseconds or less and CLS of 0.1 or less, which we protect by keeping the product text and price in HTML and loading the 3D scene after them.
From configuration to workshop: order sheets and snapshots
A 3D product configurator is only useful if the order that reaches your workshop is unambiguous. Every configuration should produce a readable summary, a unique ID and a snapshot image attached to the order.
For furniture, the order sheet lists each part, its material code and dimensions. For jewellery, it lists metal, purity, stone, ring size and any engraving. For apparel, it lists colours by panel with their codes, names and numbers with font and position, and the size breakdown. For machinery, it lists every option, compatibility notes and the resulting part numbers. The format should match what your team already uses, so we ask for a sample job card early.
Saved configurations are a second benefit. Buyers can share a link to their design on WhatsApp with family before paying, and sales staff can open the same link to answer questions. For B2B, the configuration can feed a quote in your CRM or an ERP. If your team handles orders on spreadsheets today, the third of us can set up simple automation so configured orders land in the right sheet or tool automatically.
SEO and AI search for 3D product configurator pages
Search engines and AI assistants cannot see inside the 3D canvas, so a configurator page ranks on the HTML around it: product name, description, price, materials, dimensions, FAQs and structured data.
Keep all of that in plain HTML, add Product structured data with a price range if prices vary, and give the page a poster image with descriptive alt text. Popular configurations can have their own crawlable URLs, such as a walnut dining table in six-seater size, with unique copy and photos, so the page can match more specific searches. Share links for individual buyer designs should not be indexed, so they carry a noindex tag or canonical back to the main product.
AI answer engines tend to quote clear, self-contained text. A short section explaining the options, lead times, care and customisation limits in plain sentences helps them describe your product accurately. None of this guarantees rankings; it removes obstacles. For ongoing search work on a store, see ecommerce SEO.
Risks and red flags in a 3D product configurator project
The main risks are a configurator that looks different from the real product, a price in the cart that disagrees with the price shown, and a 3D scene too heavy for your buyers’ phones. Each one costs trust and orders.
Colour accuracy needs particular care. Screens vary, and lighting in a 3D scene changes how a fabric reads. Use real material samples and photos as references, show a small disclaimer about screen variation, and offer swatches for high-value orders. Price mismatches come from calculating price in two places; the fix is one rules source used by both the viewer and the server.
- A quote given before anyone has looked at your 3D files
- Price calculated only in the browser and trusted by the cart
- No testing on low-end Android phones
- Every combination baked as a separate model or texture
- Configurator locked to a platform account you do not control
- No order sheet format agreed with your workshop
Worked example: a hypothetical furniture exporter in Jodhpur
Imagine a solid-wood furniture maker in Jodhpur selling dining tables online to buyers in India and abroad. Tables come in three sizes, four wood finishes, two top options and three leg styles: 72 combinations. This is an illustrative scenario, not a real client.
We would ask for their CAD drawings and photos of each finish. Legs, tops and aprons become separate GLB parts with named attachment points; finishes become four materials built from high-resolution photos of real samples. The compatibility rule is simple: the marble top only comes in the largest size. Pricing is base price by size plus finish and top adjustments, kept in a small admin sheet the owner can update.
Their store runs on Shopify, so the configurator sits on the product page and sends options as line item properties, with a hidden configuration ID and a snapshot image. The workshop receives a printable job card per order. An AR button lets buyers check the table in their dining room on supported phones. Scope like this would be quoted from ₹50,000 if it stays close to a viewer with swaps, moving towards the custom band from ₹60,000 if the rules, admin and saved designs grow.
3D product configurator launch checklist
Use this before launch, or before you ask anyone for a quote. Each point is a decision that is cheap to make early and expensive to change later.
- Full options list with codes, and which combinations are invalid
- Price list and formula, tested with ten worked examples
- 3D files or drawings for every part, and real material samples
- Target phone and maximum 3D download size
- Cart or quote destination, and what the order must contain
- Job card or spec sheet format your workshop uses
- AR needed? Which products have real-world scale
- Crawlable product text, structured data and share-link rules
- Who updates options and prices after launch
- Accounts for code, hosting and models in your name
Send the list, even half-complete, on WhatsApp and you will receive an itemised quote in about two working days, with nothing billed before you approve it.