3D product configurator case study: from CAD to web

Hi everyone, this is Niklas from Vanfittery! We create modular camping solutions that fit into various vehicle types. They are highly customizable and allow customers to configure modular products, based on a base product with optional add-ons. This offers maximum freedom, but the products have many different possible combinations (one of our bestsellers, a sleeping system for vans, has over 400 possible variants).

Customers were overwhelmed by technical dependencies, leading to high support loads and abandoned carts. This case study explores how Vanfittery implemented a logic-based 3D product configurator to automate compatibility checks and increase the conversion rate.

The challenge: dealing with complex technical products

Before Staggs, the Vanfittery shop was fragmented. Accessories like stove holders or cool boxes had to be searched for and purchased as separate products, making it difficult for customers to understand how the system fit together.

As an example, this was the product page of the “CampingBox Pro“. Here’s how the “configuration” part of the product page looked before:

The only available option was the color, but the product had several different optional parts and add-ons. In the shop, these had to be created as separate products and were manually implemented in the main product page. It looked like this:

This was not only confusing for the customer, but also led to wrong (unfulfillable) orders, because technical dependencies were hard to showcase. As an example: the cool box in the image above only fits in the “low rear extension”, but customers could still add the “high rear extension” and place their order. Explaining and visualizing the products was incredibly challenging.

This setup led to several major hurdles:

• Fragmentation: customers had to jump between various sections on the product page and manually cross-reference compatibility.
• Incorrect orders: there was no automated logic. For example, with the CampingBox Pro, the water tank and cool box only physically fit in the flat rear pull-out. In the old shop, customers often mistakenly ordered them for the high pull-out variant. There was no technical check to check for order errors.
• Support overhead: the shop owner often called the customers, correcting their configurations, before they could go into production.

The solution: real-time logic & clear visuals

By implementing Staggs PRO, Vanfittery moved beyond static images to a truly guided selling experience.

Customers see every change in real-time, from color and wood grain (Black, White, Nature) to accessory placements. This helps customers significantly in understanding complex products and guide the user through the different product options and add-ons. Staggs even added a Virtual Reality feature, allowing customers to place the 3D module directly into their actual van using a smartphone to ensure the perfect look and feel. This is how the 3D configurator looks now:

Using conditional logic, the shop understands the rules of the product. Using the example of the “CampingBox Pro”: if a customer selects a high rear pull-out, incompatible options (like the cool box) are automatically disabled or hidden. It is now impossible to place an incorrect order.

Behind the scenes: the implementation

For many shop owners, the word “3D” sounds like an expensive, months-long coding project. It was the same for us. When we first planned the shop, we originally wanted to use a 2D image layering configurator, because we hadn’t worked with 3D files and configurators before.

However, Staggs proved that with the right tools, you can transform an existing WooCommerce shop into a high-tech configuration suite without rebuilding anything.

Despite this being our first 3D project, we managed to tackle the challenges. This was our workflow:

1. From CAD to GLB files

The process began with existing engineering files. Using FreeCAD and Blender, these were optimized and converted into lightweight .gltf/.glb models. This ensured that the 3D experience remained lightning-fast and optimized for web, even for customers browsing on mobile devices.

2. The Staggs inspector

The bridge between the 3D model and the shop was the Staggs 3D model inspector. It helped us a lot to learn about 3D files, preview the results and check for mistakes on our end. We’ve uploaded the same files many, many times, improving our models step by step. A big challenge for us was to add all the variations, but with the use of the inbuilt blender gltf plugin and the Staggs inspector, we got it working.

3. Integrated order placement

One of the biggest wins was how the plugin handles the ordering and checkout. Staggs doesn’t just “show” a 3D model; it transforms the configured model into an actual product. When a customer clicks “Add to cart,” the plugin gathers all selected components into a single product, with all options added as a list. This makes it a lot easier for the customer to understand the order and creates the baseline for the oncoming production workflows.

4. Expert support

Transitioning to 3D can bring up technical questions, but close collaboration with the Staggs Support Team helped a lot. Our technical questions and even feature requests were solved quickly, turning a potentially steep learning curve into a smooth implementation.

The results: scientifically proven success

Since we were in the middle of our studies while developing the configurator, we used the transformation of the shop as the topic for one of our developer’s final thesis.

The impact of the new configurator was measured during a scientific thesis project, providing objective data on the transformation. Using a mixed-methods approach the shop’s performance was measured before and after, consisting of usability tests, eye-tracking simulations and standardised SUS questionnaires.

Particularly impressive: while 42% of the testers weren’t able to put together a complex product combination without errors in the old shop (TCR 58%), the success rate with the Staggs configurator was 100%.

The conclusion: happy customers, less support and more sales

When we started this project, we never expected to end up with a 3D configurator. But thanks to Staggs, we didn’t need a huge team of developers to build a shop that really delivers on the technical front. Once we learned how to properly prepare the GLB files, setting up the entire logic was straightforward and required zero coding.

Today, our customers are happy: No one has to guess whether the cool box will really fit in the pull-out drawer. You can simply see it, and that gives you confidence when making a purchase. Our orders come in complete and error-free, making it a lot easier to start with the production right away.

Ultimately, Staggs’ 3D configurator is the tool that really makes our shop complete.

If you also have products that can be configured and you are dealing with the same problems we had, give Staggs a try!