Development

The rise of 3D configurators for customized retail experiences

Bogdan Djukic

VP of Developer Experience

09.08.2024

Foto von Steve Johnson

3D configurators – a game changer for businesses

By allowing consumers to interact with virtual representations of products, 3D configurators offer a level of engagement and personalization that transcends the limitations of traditional online shopping experiences.

What is a 3D configurator?

A 3D configurator allows users to dynamically modify and visualize 3-dimensional models of products in real-time within a web browser or application interface. These configurators leverage advanced rendering techniques and interactive controls to enable users to customize various aspects of the product's design, such as colors, materials, and features.

At their core, 3D configurators utilize a base model of the product, which serves as a canvas for customization. Users can then manipulate specific parameters or attributes of the model, triggering instant updates to its appearance and configuration. This dynamic process enables users to experiment with different design options and see the results in real time, providing an immersive and engaging shopping experience.

For example, you could have a specific bike model as a canvas. Users can then change parameters like size, color, or even whole parts like tires. Thanks to the real-time 3D model, they can see immediately how their change influences the product and encourages them to experiment.

Read more about 3D configuration.

How 3D configurators enhance online shopping for users

3D configurators are an exciting technology that offers a multitude of advantages for consumers. From unparalleled product customization to immersive visualization experiences, they revolutionize the way we shop online.

How we developed a 3D configurator for bikes

One example of our teams’ groundbreaking work in terms of 3D configuration is Mindnow’s collaboration with Thömus, a renowned bike retailer based in Switzerland. Tasked with enhancing Thömus's online presence, our team developed a bike configurator that has set a new standard for the industry.

Shifting from 2D to 3D for live-rendering

At the beginning of the project, a 2D configurator had been planned. It was supposed to layer images on the user interface based on the selected components. The challenge for dynamic image creation was the fact that some bikes have different frames than others and also cables inside the bikes may have different positions. That means that components to be added to the bike, like pedals or handlebars, would require different positions of the components.

Our conclusion: With 2D, the bike could not be viewed from all sides, and dynamic rendering would have been very limited. We needed to upgrade to 3D. After careful consideration, we decided to render 3D models with WebGL using ThreeJS and develop a logic for 3D interaction.

Despite the additional effort, our development team was convinced and committed that this radical shift was crucial. Only in this way were we able to develop a configurator that stands out from the competition and at the same time meets the high demands of our client Thömus.

Each part is a separate object

In the Thömus configurator webshop, every part of each bike is a separate 3D object. These objects are then put together to become a whole bike. Programming this was probably the biggest challenge of the whole project. For all the parts together to create a holistic image of the bike – in a 360° view – they had to be perfectly coordinated. This involved matrix relationships between the objects and numerous calculations.

Mandatory product types for bikes ready to ride

To ensure that only bikes ready to ride are configured, some product types are set to be mandatory. Essential parts like tires or handlebars can be changed, but not removed. Only previously added extras like lights or mudguards can be removed.

While users cannot remove essential parts, they can customize every single feature to their individual preferences and view their bike creation from every angle.

Read more about the award-winning Thömus configurator.

3D as a powerful tool for businesses

Why Saleor was the perfect choice for the Thömus 3D bike configurator

Choosing the right technological platform was pivotal to creating a cutting-edge 3D bike configurator. We opted for Saleor, a robust and versatile solution that transformed the architecture and functionality of the Thömus sales platform.

The pre-Saleor landscape

Before adopting Saleor, Thömus relied on a combination of WordPress and offline sales methods to sell their bikes. This setup presented several challenges, particularly the inability of users to customize their bikes with personalized components online. Given that Thömus specializes in bespoke bikes tailored to individual preferences and needs, this limitation was a significant drawback. Most sales required extensive offline consultations, where the sales team had to manually suggest configurations based on a customer's driving style, expectations, and needs. This process was time-consuming and inefficient, often leaving customers without a clear visual of their custom bike until the final product was ready.

Identifying pain points and goals

The main pain points centered around the lack of a digital configurator that allowed customers to personalize their bikes online. Thömus needed a solution that could translate their in-depth, personalized consultation process into an interactive, user-friendly online experience. The goal was to enable customers to configure their bikes with ease, ensuring they could see exactly what they were getting.

Re-platforming to Saleor aimed to achieve several key objectives:

  • Increase leads and sales: By providing a more engaging and interactive online configurator, Thömus hoped to attract more potential customers and convert them into sales.

  • Support offline sales: The sales team needed a tool to showcase configurations during in-person consultations, enhancing the overall sales experience and increasing efficiency.

  • Boost company revenue: A more streamlined and appealing sales process was expected to drive higher sales volumes and, consequently, higher revenue.

Transitioning to API-first, modular, and headless

Mindnow chose Saleor due to its API-first, modular, and headless architecture, which offers unparalleled flexibility and scalability. This approach allowed us to model complex behaviors and set up intricate data structures tailored to Thömus's specific needs. Unlike traditional monolithic platforms, Saleor's headless nature meant we could seamlessly integrate various components and functionalities.

Customers can now configure their bikes online with a clear visual representation of their choices. At the same time, Thömus’ sales team can use the custom-built AR functionality to visualize configured bikes in real-time, both online and in the salesroom. This reduces the need for lengthy explanations and offers a more engaging and efficient sales process.

In addition, our re-platforming effort involved integrating several key systems:

  • Proprietary ERP system: To manage inventory, orders, and customer data effectively.

  • Marketing automation platform: To streamline and enhance marketing efforts, ensuring personalized and targeted campaigns.

  • E-mail providers: To facilitate communication and engagement with customers.

Read more about Saleor, the pioneer in headless e-commerce platforms.

Conclusion: Stunning details make a great experience

Customizable 3D configurators are transforming the online shopping landscape, providing a plethora of benefits that elevate the consumer experience and drive business growth. Thömus’ bike configurator is a great example of that. Thanks to our teams’ efforts, Thömus’ 3D bike configurator allows customers to explore an extensive range of bikes in stunning detail. 

I think what sets this project apart is our team’s end-to-end service, encompassing everything from initial 3D modeling to full integration capabilities. Our strength lies in our deep knowledge and experience with configurators. To make the vision a reality, we were prepared to go above and beyond. The transition from 2D to 3D proved once again that we at Mindnow do things completely or not at all.

The integration of Saleor was a game-changer for Thömus: It was the decisive step for an outstanding user experience. Our team’s expertise combined with Saleor's flexible and powerful platform, has set a new standard for e-commerce in the bike retail industry.

I’m proud that Mindnow is leading the change in this exciting field and I’m looking forward to helping other businesses harness the full potential of 3D technology.

Mindnow's involved minds:

Carina Felsberger

Senior UX Writer & Researcher

Vadim Kravcenko

CTO