Introduction

In today’s e-commerce landscape, personalization is an expectation. With 74% of Gen Z consumers interested in personalized products and 45% of shoppers more likely to choose sites offering customization, many products are now designed specifically to be configured.

This shift makes it essential for brands to offer intuitive, engaging configurators that align with their platform and customer journey. A great configurator not only guides users through customization but also reflects the brand’s identity for a cohesive experience.

In this article, we’ll explore what makes a great product configurator, covering everything from entry points to UX patterns, best practices and details that help users navigate with ease.

Entry Points: How Users Find and Access Configurators

When integrating a configurator into an e-commerce platform, it’s essential to consider how users will find and access it. There are several effective ways to integrate a configurator into your platform, each serving different user needs.


On the Product Detail Page (PDP):
The most common entry point is to include a "Customize" button on the product page. This allows users to easily open the configurator from where they usually engage with the product.

If a user already has a variant selected, such as a red Nike ID shoe, the configurator can launch with that variant as a preset, streamlining the experience.

Additionally, preloading the configurator in the background while the user browses the PDP ensures that the sometimes large 3D assets are ready when the user clicks "Customize," resulting in a faster, smoother experience.


In the Navigation Bar:
For platforms where the configurator plays a central role—especially those with a low variety of items—adding a direct link in the navigation bar can be effective. This makes the configurator easily accessible and highlights its importance.

However, this approach works best when the platform has only one main configurator, as multiple configurators can complicate the navigation.


Configurator Landing Page:
Since configurators often don’t follow the traditional structure of typical sites, they can struggle with SEO. To address this, dedicated landing pages are created to promote the configurator and make it discoverable through search engines.

These landing pages can also include different presets for users to choose from when starting the configuration process.


External Access (Shared Links):
Users should be able to share their custom configurations with others, such as a friend or family member. For instance, if someone designs a custom couch, they can share the link with their partner for feedback.

This means that users may open the configurator directly from an external link, without visiting other parts of the platform first. To accommodate this, the configurator must be self-explanatory, providing enough context for users who haven’t read any additional information.

It should also offer an easy way for users to return to the main platform after finishing the configuration.

Configurator Types

Step-by-Step Scrollable
A step-by-step scrollable configuration process can be a highly effective way to guide users through customizing a product.

It’s considered best practice to present one configuration step at a time, while offering a "grayed out" preview of what’s coming next. This approach keeps the process simple and clear, reducing cognitive load and helping users feel more confident as they proceed.

Notable examples of this type of configurator include the configuration process for Apple products, the Tesla car configurator, Samara’s house configurator, and Cowboy’s bike configurator.

One downside of the scrollable approach, especially on mobile, is that the UI can take up a significant portion of the screen, leaving less space for the product visualization.


Step-by-Step (Click-Through)
Step-by-step configurators are a clear and structured way to guide users through customization. With a click-through configurator, users make one decision at a time and, once satisfied, move on to the next step.

This method ensures users don’t feel overwhelmed with too many options at once and can focus on each choice individually.
A great example of this approach is the Nike sneaker personalization tool, which allows users to customize various aspects of the shoe one step at a time.

However, one downside of the click-through method is that it can become cumbersome when users want to quickly experiment with different combinations. Going back and forth between multiple steps to tweak previous choices can disrupt the flow, making it less suitable for users who prefer to try many configurations in a short time.


Sublayers configurators
Users are presented with an overview of all the elements they can configure on the main screen. From there, they can click into a sublayer to customize a specific part of the product. Once finished, they return to the main overview to continue making adjustments or finalize the configuration.

This type of configurator is ideal for products where users want to quickly experiment with different combinations, as it allows for fast navigation between various options.

Examples of this approach include the Lockcard wallet configurator, SuitSupply's Lookbuilder, and Rimowa's luggage configurator.

While this method offers flexibility and encourages users to try different combinations, it’s less guided and doesn’t push users toward the checkout as directly as step-by-step methods.


Combination of Sublayers and Step-by-Step
This method blends the best of both sublayers and step-by-step configurators, offering a harmonious user experience. Users begin the configuration with the first sublayer open, often marked with a "1" next to the title, and are presented with a clear navigation bar that outlines the next steps.

For example, steps might be labeled as: 1. Fabric, 2. Armrest, 3. Wheels, 4. Checkout. This structure allows users to move through the process step by step while also providing a clear overview of the remaining steps. Users are free to follow the sequence or explore different sections at their own pace.

A great example of this approach is the Cowboy bike configurator.


Configurator Types: Show All Edit Options at Once
The show all edit options at once configurator type provides users with full control over the customization process, allowing them to make multiple adjustments simultaneously.

This approach is often used when users need extensive control over the product, offering a more advanced interface similar to 3D design software. It’s particularly useful for products that require precise customization.

Branding: A seamless Extension of your eCommerce Platform

The best e-commerce platforms are branded, speaking in a consistent tone of voice both visually and through body copy. This consistency should extend to the configurator, which often plays a key role in the customer journey.

A great configurator is not just functional—it’s an integral part of the platform’s visual language and should represent the product in a way that aligns with the brand’s identity.

Unfortunately, this aspect is often overlooked, with configurators treated as mere software tools.

Ensuring they feel like a natural extension of the brand’s experience is crucial to strengthening the brand-customer connection.

A great example of this is the Secrid Wallet Configurator, which is not only easy and fun to use but also maintains strong branding throughout the user experience.

Layout follows the Product

When designing a configurator, it’s important to let the product guide the layout. Generally, you want to give as much space as possible to the product visualization.

If the product is wide, placing the UI at the bottom can create a more harmonious layout. If the product is tall, consider positioning the UI on the left or right side.

A guided Userflow

Great configurators guide users through the process, whether through direct instructions or subtle cues. It’s essential that users always know what to do next and have a clear overview of their progress.

Helping users make difficult decisions is key—this can be done with presets for an easier start, tooltips explaining options, or clear body copy that guides users toward the best choice.

For tough decisions, like selecting a fabric, you might offer labeled benefits or even include a comparison tool. The goal is to make the process as smooth as possible, ensuring users feel confident and don’t drop off during the configuration.

User Decision Making

When designing a great user flow, it’s crucial to strike a balance between the number of decisions users make and the difficulty of those decisions. Ideally, you want users to focus on making one easy decision at a time. If a particular decision is difficult, think about smart ways to simplify it.

Product Visualization

A clear visualization of the product is essential in any configurator. It’s important to visibly show when changes are being made, whether through custom 3D or 2D representations.

While 3D offers more flexibility and a better sense of form, 2D visuals often provide higher quality. However, with recent advancements in web technology, 3D visualization has improved significantly, making it the better choice in most cases. 3D models can be animated to highlight changes, zoom in on specific areas, and rotate to focus on different features.

At the same time, it’s crucial to keep the interface accessible, allowing users to navigate, zoom, and adjust the view to their preferences.

Others

There are a few additional insights we’ve gathered from user testing and working on configurator projects.

1. If you're using a 3D configurator, it's helpful to let the 3D model auto-rotate when the configurator opens. Some users may not immediately realize it’s interactive, and a slow auto-rotation encourages them to grab and stop it, teaching them to engage without needing instructions.

2. Always provide visualization of configuration options with clear thumbnails. This allows users to see what changes will look like before applying them, reducing friction and making the process smoother.

3. The 3D pipeline created for a product configurator can also be used to explain features of the product with 3D animation.

4. Provide presets as entry points into the configurator.

Conclusion

Great product configurators can transform how customers interact with your brand, making the shopping experience more personalized, intuitive, and engaging.

From guiding users through complex decisions to seamless product visualization, a well-designed configurator enhances both customer satisfaction and loyalty.

If you’re ready to explore how a custom configurator can elevate your platform, feel free to book a call with us, and let’s discover what we can build together.