Category:
Strategy

5 Best Product Configurator Experiences With Examples.

In our previous article, "Part 1: Ecommerce product configurator: 2024 Guide." we discussed the essential elements required to create a top-notch product configurator, what’s the business value behind value and what are technological caveats when building a product configurator.

An image with product configurator interface.

Introduction

In this article, we're going to showcase a few examples of product configurators that we really like. These examples could be a great source of inspirations to make a product configurator truly outstanding.

Tylko

Tylko is a next-generation furniture company, improving homes through premium, customised storage furniture. Specialising in high-quality personalised shelving, buyers can customise their furniture down to the last detail. Democratising bespoke design through advanced tech tools and proprietary software, Tylko meets the needs of unique spaces through an intuitive online configurator and the Tylko Augmented Reality App.

Screen recording of Tylko configurator website.

Configure Yours: Tylko Configurator

Key values:

  • The loading experience is well-designed, feeling neither clunky nor slow. It loads quite fast.
  • Tylko built this configurator from scratch, integrating it deeply into their brand and manufacturing process, including CNC drawing generation.
  • The product configurator allows users to open shelves, which is impressive.
  • The model looks excellent and is highly interactive; users can change row height and the number of doors.
  • Users can customize the style (pattern, mosaic, slant), density, width, height, and color.
  • Dimensions are clearly displayed, with a human figure included for scale.
  • Users can save their designs and share them via Facebook or Twitter.

Let’s jump into a mobile:

  • The mobile experience includes a product preview with smooth panning and rotation functionality.
  • All customization variables are easily accessible on mobile devices.
  • Changing the shelf color triggers an inspirational gallery with high-resolution photos matching the selected color.
  • The only notable missing feature is AR mode via the mobile web. Although available through their mobile app, having it directly on the web would be a great enhancement.

Lift Foils

Founded in 2011 in Puerto Rico by Nick Leason, Lift began as a family business in the emerging field of hydro-foiling. Today, Lift is proud to be a leader in this space, recognized as the inventors and first mass distributors of the eFoil electric hydrofoil surfboard, with thousands of units shipped worldwide.

Screen recording of Lift Foils configurator website.

Configure Yours: Lift Foils Configurator

Key values:

  • The configurator uses Psydack, a platform for 3D renders and models, ensuring very fast loading times.
  • Photos are the default view, but there is also a 360-degree view option with realistic 3D models, showcasing details and lighting. It works smoothly on mobile devices as well.
  • Lift Foils offers numerous configurations, including options for Board Size, Board Finish, Battery, Front Wing, Mast, and more.
  • The size guide is particularly useful, allowing users to compare different options and providing suggestions for wings. Users can directly pick the size in this view.
  • The configurator leverages inspirational lifestyle videos that can be watched directly from the product detail page (PDP).
  • On mobile, you can use AR capabilities to place the 3D model in your real environment, enhancing the interactive experience.

Rivian

Rivian is an American electric vehicle manufacturer and automotive technology company founded in 2009. With a mission to keep the world adventurous forever, Rivian designs, produces, and delivers category-defining electric vehicles. The company is known for its all-electric R1T pickup truck and R1S SUV, which are designed for both on-road and off-road driving.

Screen recording of Rivian configurator website.

Configure Yours: Rivian Configurator

Key values:

  • The car model is positioned in an interior space, creating an immersive, game-like experience.
  • An estimated payment is instantly visible, with detailed financial payment options.
  • The payment estimator allows you to adjust variables like months and down payment, calculating the cost on the fly.
  • There is a full-screen gallery view for an in-depth look at the car.
  • Paint selection works seamlessly, with a subtle delay in color change that feels soft and premium.
  • As you scroll through configuration options, the images on the left dynamically change, reflecting your current selection (e.g., from wheels and tires to interior).
  • The options are staged with steps 1-4 on tabs for easy navigation.
  • The configurator provides well-executed guidance about packages and driving systems, though it could benefit from the ability to change decisions within the context of the comparison, similar to Lift Foils.
  • The mobile experience is excellent, with product previews and prices always visible and all configurations available. It is definitely mobile-first in design, with the added feature of rotating your phone horizontally for a different experience.

Nike

Nike, Inc., founded in 1964 as Blue Ribbon Sports and later renamed in 1971, is a global leader in athletic footwear, apparel, and equipment. Nike is renowned for its innovative products, iconic designs, and influential marketing campaigns. The brand's mission is to bring inspiration and innovation to every athlete in the world, with a belief that if you have a body, you are an athlete.

Screen recording of Nike configurator website.

Configure Yours: Nike Configurator

Key values:

  • This is one of the best configurators available, though it's important to note that Nike likely invested a significant amount of time and resources to develop it.
  • It's clear that they started with a mobile-first design approach, with the desktop version being an extended iteration. This is how you should approach the design!
  • One downside is that the quality of the models looks a bit "cartoony," which might be a tradeoff to ensure the 3D models load super fast.
  • Upon completing your configuration, you are directed to the PDP with the exact product you configured, including a matching product gallery.
  • Your designs are saved, and there's an "Inspiration" tab where Nike presents similar designs that could match your style.
  • On mobile, all configurable options are positioned at the bottom, easily reachable by finger.
  • Navigation is user-friendly, with arrows to move between different components of the configuration and a dropdown list to select specific options.
  • Seeing the product in AR could be a nice addition, allowing you to visualize it alongside your existing pair of Nikes.

Colnago

Founded in 1954 by Ernesto Colnago, Colnago is an Italian company well-known for its high-performance bicycles. Based in Cambiago, Italy, Colnago has a rich history of innovation and success in the world of cycling, consistently pushing the boundaries of bicycle design and technology. The brand has been associated with numerous victories in prestigious races, including the Tour de France and Giro d'Italia.

Screen recording of Colnago configurator website.

Configure Yours: Colnago Configurator

Key values:

  • Colnago leverages the London Dynamics system for its configurator (a London Dynamics demo is also available).
  • The initial load isn't super impressive, and loading each variable shows a short "loading animation."
  • The quality of the model is superb, with detailed reflections.
  • The UX for selecting colors could be improved; currently, you need to enter the Colors section, click a color, and then go back. It would be better if color options were visible on the first screen.
  • When changing parts like the Saddle or Wheels, it would enhance the experience to zoom in directly on the part being changed, similar to how Rivian executes this feature.
  • There is an "explode" view where you can see all components apart.
  • A standout feature is "See in AR," which allows you to scan a QR code and place the bike in your room, providing a very engaging experience.

Closing

In this article, we've explored some of the best product configurator experiences from various brands, showcasing their unique features and strengths. Each of these examples demonstrates how a well-implemented product configurator can enhance the customer experience, drive sales, and cover the business nedds.

We hope these examples inspire you to create a product configurator that not only meets but exceeds your customers' expectations. If you have any questions or need further assistance, feel free to drop us a line at simon@commerce-ui.com.

Let’s talk
Do you feel like we could help with your ecommerce challenges? Contact us at:
hello@commerce-ui.com
Copied to clipboard
Get eCommerce insights in your inbox. No spam, just relevant stories.

By signing up, you are agreeing to our privacy policy

Hiring Front-End Engineers

Join us

© 2025 Commerce-UI

linkedin
instagram
twitter