The rise of 3D configurators for customized retail experiences


With advancements in technology, consumers now expect more than just a catalog of products with static images. They want to get the look and feel of their desired purchases and a full customization experience. On top of that, immersive and engaging shopping experiences. 3D configurators open up a world of possibilities and allow businesses to meet these demands.

Foto von Steve Johnson

Article by

 

Bogdan Djukic

Senior Frontend Developer
4 min read09 Aug 2024

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.

1

Comprehensive visualization

One of the most significant advantages of 3D configurators is the ability for users to view products from all angles, zoom in and out, and make real-time changes. This level of control and flexibility allows an inspection of every aspect of the product.

Whether it's rotating the model to examine fine details, zooming in for a closer look, or adjusting parameters on the fly, users can actively engage with the product in a way that closely mirrors the tactile experience of shopping in person. It also facilitates more informed decision-making, as users can thoroughly assess the product before finalizing their purchase.

2

Personalization

3D configurators empower users to tailor products to their individual preferences and requirements. Whether it's selecting specific colors, materials, or optional accessories, users have the freedom to create personalized variations that align with their unique tastes and needs.

3

Interactive exploration

Unlike static images or pre-rendered videos, 3D configurators allow for interactive exploration of products. Users can interact with intuitive controls to manipulate different elements of the model, dynamically adjusting parameters and observing the immediate effects in real time.

4

Confidence in purchasing decisions

By providing a detailed and interactive representation of products, customizable 3D configurators help users make more informed purchasing decisions. Seeing the product from all angles and being able to customize it to their liking instills confidence in users, reducing uncertainty and mitigating the risk of buyer's remorse.

5

Streamlined product configuration

For businesses offering customizable products, 3D configurators streamline the product configuration process. Instead of relying on manual customization requests or lengthy back-and-forth communication, users can visually experiment with different options and instantly finalize their desired configuration.

6

Enhanced engagement and conversion

The immersive and interactive nature of customizable 3D configurators captivates users and keeps them engaged with the shopping experience for longer periods. This increased engagement can lead to higher conversion rates as users develop a deeper connection with the product and are more likely to make a purchase.

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

1

Enhanced product customization

By offering customizable 3D models, businesses can provide customers with a level of personalization that sets them apart from competitors. Whether it's adjusting colors, materials, sizes, or features, customers have the freedom to tailor products to their exact preferences, creating a unique and personalized experience that fosters brand loyalty.

2

Interactive product visualization

Customizable 3D configurators allow businesses to showcase their products dynamically and interactively, giving customers the ability to explore every aspect of the product's design and functionality.

3

Reduced return rates

By empowering customers to customize products to their specific requirements, businesses can minimize the likelihood of returns due to dissatisfaction or misalignment with customer expectations. When customers can visualize and customize products in real time, they are more likely to be satisfied with their purchase, resulting in fewer returns and exchanges.

4

Competitive differentiation

In a crowded marketplace, offering customizable 3D models can help businesses stand out from competitors and attract attention from discerning customers who value personalization and innovation. By providing a unique and engaging shopping experience, businesses can differentiate themselves and carve out a distinct identity in the market.

5

Market research and insights

By analyzing customer interactions, businesses can gain valuable insights into customer preferences, trends, and behaviors. By tracking which customization options are most popular or observing how customers interact with different product configurations, businesses can inform their product development strategies and marketing efforts to better align with customer needs and desires.

6

Brand reputation and innovation

By embracing customizable 3D configurators, businesses can position themselves as pioneers in their industry, showcasing their commitment to innovation and customer-centricity. This can enhance brand reputation and foster a positive perception among customers, leading to increased trust, loyalty, and advocacy over time.

Section by Vadim Kravcenko

CTO

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.

Section by Vadim Kravcenko

CTO

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.


Involved Minds:
Vadim Kravcenko
CTOInvolved as:Co-author
ChatGPT
Involved as:Co-author
Carina Felsberger
Senior UX WriterInvolved as:Editor