Complete Guide to 3D Configurators for E-commerce

A 3D configurator lets your customers personalise your products in real time, directly on your e-commerce site. They choose a colour, material, or component : the 3D model updates instantly in the browser, with no plugin to install and no page reload.

This technology, once reserved for large brands, is now accessible to any e-retailer regardless of size. This complete guide explains how it works, how to integrate it on your CMS, what it costs, and what the concrete return on investment looks like.

What is a 3D configurator?

A 3D configurator is an interactive web application that allows a user to personalise a product in real time directly in their browser. Unlike a photo gallery that changes with options, a 3D configurator generates views from a 3D digital model, using the device's graphics card via WebGL.

In practice: your customer lands on your product page. They see an interactive 3D model they can rotate 360°, zoom into. If they pick "cognac leather" instead of "black leather", the model updates in milliseconds. If they click "view in augmented reality", their phone displays the product in their living room at real scale.

Difference from per-variant photos and 360° images

There are several approaches to showing product variants online. Here is how they compare:

• Per-variant photos: for every colour/material combination, a studio shoot. 5 colours × 4 materials = 20 photos to maintain. Expensive, slow to update, impossible on a large catalogue.
• 360° photos: better than fixed images, but still pre-captured. No real personalisation, no AR, studio cost still present.
• 2D configurator: displays flat images that change with options. Fast to set up, but no rotation, no AR, and one image needed per combination.
• 3D configurator: a single digital model, all combinations generated in real time. Adding a colour takes a few hours, not a photo session. 360° rotation, zoom and augmented reality included.

How does a 3D configurator work?

WebGL: the real-time rendering engine

WebGL (Web Graphics Library) is a standardised JavaScript API that enables 3D rendering in a browser by directly using the device's GPU (graphics processing unit). Without WebGL, interactive 3D without a plugin would be impossible.

WebGL operates via the HTML <canvas> element. The browser sends geometry data (vertex positions) and material data (textures, shaders) to the GPU, which calculates each frame to display : typically 30 to 60 times per second, giving a perfectly fluid impression.

WebGL is natively supported by 98% of modern browsers (Chrome, Firefox, Safari, Edge) on desktop and mobile. No installation, no plugin. For an e-commerce 3D configurator, it is the technological foundation that makes everything possible.

3D models and PBR textures

A 3D configurator relies on two types of digital assets:

1. 3D models (geometry) : the shape of the product, created in a 3D modelling application (Blender, Cinema 4D, SolidWorks…) and exported in GLTF/GLB or OBJ format. The quality and fidelity of the model determines the final visual realism. A well-made model is indistinguishable from a studio photo.

2. PBR textures (Physically Based Rendering) : images that define the appearance of each material. PBR is a set of texture maps:

• Albedo (base colour)
• Roughness (surface roughness : matte or glossy)
• Metallic (metallic appearance)
• Normal map (simulated surface relief)
• Ambient Occlusion (contact shadows)

It is this combination of maps that makes a fabric look like linen, velvet or cotton. When a user switches material in the configurator, the WebGL engine loads the new PBR textures and applies them to the model in milliseconds.

The Web Component: the universal HTML element

The 3DVue configurator is distributed as a Web Component : a native browser technology that allows custom, reusable HTML tags to be created. This is what makes integration so simple: no framework required, no build step, universal compatibility.

In practice, integrating the configurator on a product page requires two things:

1. Load the CDN script once (in the <head>):

<script type="module" src="https://cdn.jsdelivr.net/npm/@3dvue/viewer@latest/dist/viewer.js"></script>

2. Place the configurator tag where you want it to appear:

<viewer-3dvue name="my-configurator" src="https://app.3dvue.fr/c/xxx"></viewer-3dvue>

The configurator automatically resizes to fit its container. It is responsive by nature.

Connecting to your variant buttons

The configurator connects to your existing variant selectors via HTML attributes. Example with colour buttons:

<button data-viewer-3dvue-target="chair"
        data-viewer-3dvue-param="colour"
        data-viewer-3dvue-value="white">White</button>

<button data-viewer-3dvue-target="chair"
        data-viewer-3dvue-param="colour"
        data-viewer-3dvue-value="black">Black</button>

When a user clicks, the configurator listens to the event and updates the 3D model. No JavaScript to write. Your existing buttons or <select> elements remain untouched.

WebAR Augmented Reality

Augmented reality is included in all 3DVue projects at no extra cost. It lets your customers virtually place your product in their real space : their living room, office or garden : from their smartphone.

How does WebAR work?

Unlike native AR apps that require a download, WebAR works directly in the browser:

• On iOS: via Safari, using Apple's native USDZ format (Quick Look AR)
• On Android: via Chrome, using WebXR and Google's Scene Viewer

A "View in augmented reality" button appears automatically on mobile product pages. One tap opens the camera and the product appears at real scale in the customer's space. No app to download, no friction.

Coverage: over 95% of smartphones in use today support WebAR (all iPhones since 2017 on iOS 12+, all recent Androids on Chrome).

Why AR changes conversion figures

AR reduces one of the main barriers to online purchase: uncertainty about dimensions and how a product fits in a space. For furniture, decorative objects, lighting, rugs : categories where returns are frequent and costly : WebAR lets customers visually verify the product fits their environment before ordering.

Measured results: product pages with AR show on average +20 to +35% add-to-cart rates and a significant reduction in return rates for large-size products.

Integration on your CMS

The 3DVue configurator integrates on all major e-commerce CMS platforms. Here are the details for the four main ones.

Shopify

Integration requires no Shopify app from the App Store. It is done directly in the theme code.

Step 1 : Load the script in theme.liquid, before </head>:

<script type="module" src="https://cdn.jsdelivr.net/npm/@3dvue/viewer@latest/dist/viewer.js"></script>

Step 2 : Place the tag in your product template or a Liquid section:

<viewer-3dvue
  name="{{ product.handle }}"
  src="{{ product.metafields.configurateur.src }}">
</viewer-3dvue>

To connect native Shopify colour swatches, the data-viewer-3dvue-* attributes are added directly to the buttons generated by your theme. Compatible with all Shopify 2.0 themes (Dawn, Sense, Origin…) and legacy themes.

→ See the dedicated Shopify integration page

WooCommerce

On WordPress + WooCommerce, the script is loaded via wp_enqueue_script() in your child theme's functions.php file:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script(
        '3dvue-viewer',
        'https://cdn.jsdelivr.net/npm/@3dvue/viewer@latest/dist/viewer.js',
        [], null, false
    );
    wp_scripts()->add_data('3dvue-viewer', 'type', 'module');
});

Then place the <viewer-3dvue> tag in your product template (single-product.php), an Elementor HTML widget, a Gutenberg block or a custom shortcode.

To connect native WooCommerce variations, attributes are placed directly on variation <select> elements or swatch buttons. No WooCommerce plugin required.

→ See the dedicated WooCommerce integration page

PrestaShop

On PrestaShop 1.7 and 8.x, integration is done via native hooks in a custom module or directly in the theme's Smarty templates:

{* In product.tpl : before </body> *}
<script type="module"
  src="https://cdn.jsdelivr.net/npm/@3dvue/viewer@latest/dist/viewer.js">
</script>
<viewer-3dvue
  name="{$product.link_rewrite}"
  src="{$product.configurateur_src|escape:'html'}">
</viewer-3dvue>

No PrestaShop module to install, no back-office activation. Compatible with PS 1.7.x and PS 8.x.

→ See the dedicated PrestaShop integration page

WordPress (without WooCommerce)

For a WordPress showcase site, script loading is identical to WooCommerce. The tag can be placed in any block editor:

• Gutenberg: "Custom HTML" block
• Elementor: "HTML" widget
• Divi, Bricks, Oxygen: HTML code module

No WordPress plugin to install, no dependency on a specific page builder.

→ See the dedicated WordPress integration page

JavaScript API: advanced use cases

For more complex integrations : render capture, connection to an order flow, ERP synchronisation : the Web Component exposes a JavaScript API:

const viewer = document.querySelector('viewer-3dvue');

// Capture the current render as base64 (to store with the order)
const imageBase64 = await viewer.captureToBase64();

// Listen for configuration changes
viewer.addEventListener('config-change', (e) => {
    console.log('Configuration:', e.detail);
    // Update price, stock, shareable URL...
});

// Set a configuration programmatically
viewer.setParam('colour', 'white');
viewer.setParam('fabric', 'velvet');

Accepted 3D file formats

To create your configurator, you can provide existing files or simply photos of your products.

If you have no 3D files, 3DVue creates the models from:

• Your product photos (front, side, top, bottom : 4 angles minimum)
• Your technical drawings (PDF, DXF, dimensioned diagrams)
• A physical sample (if you are near Montpellier)

Indicative modelling times by complexity:

• Simple product (mug, cushion, pen): 2 to 3 days
• Intermediate product (chair, handbag, t-shirt): 4 to 6 days
• Complex product (modular armchair, technical shoe, bicycle): 8 to 15 days

Impact on your site's performance

A poorly implemented 3D configurator can hurt your Core Web Vitals. Properly implemented, its impact is negligible. Here are the optimisations applied by default on all 3DVue projects.

3D asset optimisation

• Draco compression: reduces 3D geometry weight by 60–80% with no visible quality loss
• KTX2 textures: GPU-compressed texture format, loads 3× faster than PNG
• LOD (Level of Detail): the low-resolution model appears immediately, the high-resolution version loads in the background
• GLTF 2.0 format: binary format optimised for the web, compatible with partial streaming

Non-blocking asynchronous loading

The 3DVue script loads as type="module" : it is non-blocking by nature. The configurator renders in an HTML <canvas> that does not interfere with the rest of the page. For optimal LCP, use the lazy loading attribute:

<!-- The configurator only loads when it becomes visible -->
<viewer-3dvue name="chair" src="..." loading="lazy"></viewer-3dvue>

Core Web Vitals targets

How much does a 3D configurator cost?

The cost of a 3D configurator depends on three main variables: the geometric complexity of the product, the number of materials to integrate, and the features required (proof generation, advanced AR, API…). For a detailed article on pricing, see our complete guide on 3D configurator pricing.

Production costs (one-off investment)

Monthly subscription (recurring cost)

The subscription covers hosting of 3D models on the 3DVue CDN, WebGL platform updates and support. No commission on your sales.

ROI: what it delivers

• Returns reduced by 20–40% : the customer sees exactly what they are ordering
• Average basket up 15–30% : personalisation creates attachment and justifies a higher price
• Fewer customer service requests : "does this fabric come in blue?" disappears when customers can see it in real time
• Competitive differentiation : very few e-retailers currently offer a real interactive 3D experience

3D configurator examples by sector

Furniture and home decor

Furniture is the sector where 3D configurators deliver the most value. Customers hesitate over dimensions, colours and materials : and returns are costly. A furniture configurator lets them choose frame colour and upholstery, select legs, add optional elements (headrest, armrests, ottoman) and visualise the product in AR in their living room.

→ See our furniture 3D configurator page

Textile and fashion

For clothing, bags and accessories, the configurator enables real-time personalisation: fabric colour, embroidery, panelling, logo. Textile render simulation (folds, materials, stitching) reaches photorealistic quality. A typical use case: a custom bag retailer who automatically generates an SVG production proof for the workshop.

→ See our textile and fashion 3D configurator page

Jewellery and luxury

In the jewellery sector, visual quality is paramount. A 3D configurator lets the customer personalise a piece (metal, stone, engraving) with photorealistic rendering. AR is particularly valuable here: seeing a ring "on" your hand before ordering dramatically reduces the return rate.

→ See our jewellery and luxury 3D configurator page

Promotional items

A sector where personalisation is the core of the business. A configurator for promotional items lets customers visualise a logo on a pen, mug or tote bag : changing background colour, print colour and logo position in real time. The production proof is generated automatically.

→ See our promotional items 3D configurator page

Sports kits and equipment

Kit personalisation (club colours, number, name) is an ideal use case. The user sees their personalised kit in real time : front, back : before ordering. The production file goes directly to the printing supplier.

→ See our sports kit 3D configurator page

Comparison table: 3D configurator vs alternatives

Comparing 3D configurator providers

The market is fragmented between players with very different models. Here is an honest analysis of each solution : strengths and limitations : to help you choose with full information.

Zakeke 🇮🇹 : Self-service SaaS (Italy, 2017)

Strengths: the most accessible on the market, from €29/month. Intuitive interface, easy integration on Shopify and WooCommerce via their app. Ideal if you already have your 3D files and a developer available.

Limitations: Zakeke is a tool, not a service. You must provide your own 3D models : without which you cannot start. No modelling included, no integration support. The 3D render is generic and hard to fine-tune. Support is ticket-based. For a complex product or a large catalogue, the platform quickly shows its limits.

→ Detailed comparison: 3DVue vs Zakeke

Emersya 🇫🇷 : SaaS + 3D services (France, Montpellier, 2012)

Strengths: solid French player with real 3D expertise, clients including Samsonite, Salomon and Vitra. Mature platform, quality rendering, AR presence.

Limitations: designed for brands with existing internal resources (digital team, project manager, access to 3D assets). The platform is powerful but complex to take on without a dedicated team. Pricing is on request and largely inaccessible to SMEs without significant volume. The 3D creation service is an optional add-on, not the core of the model.

→ Detailed comparison: 3DVue vs Emersya

Threekit 🇺🇸 : Enterprise (USA, 2019)

Strengths: the best photorealistic rendering on the market, Salesforce CPQ integration, Fortune 500 clients. For a large brand with a significant budget, it is the benchmark.

Limitations: completely out of reach for SMEs. Minimum budget of $50,000/year, deployment time of 3 to 6 months, requires a dedicated in-house 3D team. English-only support, focused on the US market. For a mid-sized e-retailer, this is a disproportionate solution.

→ Detailed comparison: 3DVue vs Threekit

Roomle 🇦🇹 : Furniture SaaS (Austria, 2014, HOMAG Group)

Strengths: very strong on modular furniture configuration and room planning. Advanced rules logic for products with many structural combinations.

Limitations: almost exclusively furniture-focused : unusable for textile, jewellery, promotional items or sportswear. Minimum €850/month for a basic plan. You must provide your own 3D files and manage integration yourself. Acquired by HOMAG (industrial woodworking machinery group), the product roadmap is drifting away from pure e-commerce.

VividWorks 🇫🇮 : CPQ SaaS (Finland, 2006)

Strengths: excellent for truly modular products with complex CPQ logic (configuration rules, dynamic pricing, ERP integration). Well-suited for B2B manufacturers.

Limitations: designed for technical teams capable of managing the platform autonomously. Setting up a project takes several weeks of configuration. No modelling service included. For a B2C e-retailer looking for a turnkey solution, the tool is over-engineered and complex to exploit without dedicated resources.

Salsita 🇨🇿 : Full-service studio (Czech Republic, Prague, 2010)

Strengths: full-service approach close to 3DVue's : they manage the project end-to-end with real 3D expertise. Good for complex, bespoke projects.

Limitations: 100% custom development = long lead times (several months per project) and costs that are hard to predict. No standardised product, no foreseeable subscription pricing. Based in Czech Republic, client communication is in English. After delivery, any change requires a new service negotiation : there is no continuous after-sales support built into a monthly subscription.

Cylindo 🇩🇰 : Product visualisation (Denmark, 2012, acquired by Chaos)

Strengths: very high-quality photorealistic product images, good for large-scale visual asset management.

Limitations: Cylindo is not really a real-time 3D configurator : it is a visualisation system based on pre-rendered images. No free WebGL rotation, no native WebAR, limited personalisation. Acquired by Chaos (publisher of V-Ray), the product is evolving towards studio use rather than e-commerce. Quote-based pricing, accessible only to large accounts.

Questions to ask before signing

1. Who creates the 3D models? : If the provider does not offer modelling, you will need to outsource it or do it in-house. Check the total real cost.

2. Who handles integration on my site? : Some platforms document integration but do not perform it. If you have no developer available, clarify this before signing.

3. Do the 3D files belong to me? : Essential to avoid being locked into a single provider and to use the assets on other channels.

4. What happens after delivery? : Who responds if a model needs updating, a new material must be added, or the configurator stops displaying after a theme update? Responsive human after-sales support is worth its weight in gold.

5. Are there hidden fees? : Per-render charges, sales commissions, undocumented session limits. Read the terms of service before signing.

Frequently asked questions

What is a 3D configurator?

A 3D configurator is an interactive web application that lets a visitor customise a product in real time directly in their browser. The user picks a colour, material, or component : the 3D model updates instantly, without page reload, without any plugin to install. Everything runs on WebGL, a native API built into modern browsers.

What is the difference between a 3D configurator and per-variant photos?

With per-variant photos, every colour/material combination requires a photo shoot. 5 colours × 4 materials = 20 photos to maintain. A 3D configurator generates all views in real time from a single digital model : adding a colour takes a few hours, not a studio session. Visual quality is comparable to professional studio photography.

Does the 3D configurator work on mobile?

Yes. The 3DVue configurator works on all recent devices : iOS Safari and Android Chrome : with no app to install. WebAR augmented reality is also available directly from the mobile browser. Over 95% of smartphones in use today support WebGL and WebAR.

Which 3D file formats do you accept?

3DVue accepts all standard formats: GLTF/GLB, OBJ, FBX, STL, STEP, as well as files from SolidWorks, Blender, 3ds Max, SketchUp and Cinema 4D. If you have no existing 3D files, we create the models from your product photos or technical drawings. No 3D file is required to get started.

How much does a 3D configurator cost?

The cost depends on the complexity of the product and the number of variants. A complete project starts at around €1,500 for a simple product and can reach €6,000–€8,000 for a textile configurator with automatic proof-of-production generation. A monthly subscription of €50–€500 covers hosting and platform updates.

How long does it take to integrate the configurator on my site?

Technical integration takes 2 to 4 hours for a developer. The configurator is a Web Component : an HTML tag to place on your product page, compatible with Shopify, WooCommerce, PrestaShop and WordPress without installing any module. 3DVue can handle the integration if you have no developer available.

Is the 3D configurator compatible with Shopify?

Yes. The 3DVue Web Component integrates into any Shopify theme : Shopify 2.0, Dawn, Sense and all OS 2.0 themes. Integration is done via the theme.liquid file or a custom Liquid section, without any Shopify app from the App Store.

What is WebGL and why does it matter for a 3D configurator?

WebGL is a native JavaScript API that enables 3D rendering in a browser by directly using the device's GPU. Without WebGL, interactive 3D without a plugin would be impossible. WebGL is supported by 98% of modern browsers on desktop and mobile, guaranteeing universal compatibility with nothing to install.

Is augmented reality included in the configurator?

Yes. WebAR augmented reality is included in all 3DVue projects at no extra charge. It works on iOS via Safari and Android via Chrome, without any app to download. The same 3D model serves both the configurator and AR : no additional work is required.

Will the 3D configurator slow down my e-commerce site?

No, if implemented correctly. The 3DVue script loads asynchronously and does not block page rendering. 3D models are optimised (Draco compression, KTX2 textures) to minimise load time. With the loading="lazy" attribute, the configurator has no impact on your page's LCP.

What is the difference between a 3D and a 2D configurator?

A 2D configurator displays flat images that change with options : quick to set up but limited: no rotation, no AR, one image needed per combination. A 3D configurator generates all views in real time from a single model, enabling 360° rotation, zoom and augmented reality.

Do the 3D models created for the configurator belong to me?

Yes, entirely. All source files (GLB, OBJ, FBX, PBR textures) are delivered to you at project completion. You can use them on other platforms, for marketing, 3D printing, or hand them to another provider. No exclusivity clause on your own assets.

Can the configurator generate a production file (proof)?

Yes. For projects requiring a production file (textile, promotional items, engraving, embroidery), the configurator can automatically generate a proof in SVG or PDF that exactly reflects the customer's chosen configuration. This file goes directly into production.

How many variants and combinations can the configurator handle?

There is no technical limit. A configurator with 10 customisation zones and 20 materials per zone generates millions of combinations with no slowdown. Only the combinations you allow are offered to your customers. Rendering remains smooth regardless of complexity.

What is the ROI of a 3D configurator for an e-commerce store?

Measured results with our clients: returns reduced by 20–40%, average basket increase of 15–30%, significant reduction in customer service enquiries. Payback typically happens within 6 to 18 months depending on order volume. For a furniture e-retailer with 200 orders/month, a 25% reduction in returns often represents €800–€1,000/month in savings.

Conclusion: where to start?

The 3D configurator is no longer a luxury reserved for large brands. The technology is mature, prices have come down, and the impact on conversions and returns is documented across dozens of projects.

If you sell customisable products : furniture, textile, jewellery, promotional items, sportswear : a 3D configurator is probably the highest-return investment available in 2026.

The next step is simple: describe your product and variants in 15 minutes. Thibaut will reply within 24 hours with a precise estimate of cost, lead time and the recommended technical approach for your case : no commitment.