20 eCommerce Product Configurator Examples
Learn the latest of how other merchants are leveraging product configurators to help earn customer trust and reduce post-order problems.
A configurator’s value
Online eCommerce all too often represents a dry, faceless, unemotional wall between you and the buyer. Unanswered questions frequently motivate customers to click “back” and locate a competitor’s website that adequately answers them. Depending on the product, their question could be, “How will this look with my requested changes?”
If you sell anything other than simple products, you will make happy, informed customers with a configurator.
How is a configurator helpful?
Money transfer is based on trust. You can do everything possible (customer quotes, trust badges, reviews) to earn your visitors' trust. But, if they are left guessing what the final product will look like, you haven’t yet earned trust. The imagination gap is too much. This is compounded if the product has a significant price tag.
Types of configurators
We will categorize configurators into three different types:
- Essential: You already have access to this on your website as a variant or configurable product. You can change the image according to the selected configuration.
- Product customizer: You use external data sources to identify image, pricing, and shipping timeframe data. Even though advanced 3D rendering is not used, these configurators can be very difficult to build.
- 3D / Augmented Reality: This is the new sexy option. You can use it with your Apple Vision Pro, Oculus, or even interact with it on your phone. When you change a color or upload an image, the pictured object changes.
Is it finding the right product or configuring the product?
Your customers may be more frustrated by trying to find the exact, right product. For example, if you sell cell phone cases, you may have one product display page (PDP) for each iPhone model. The iPhone model will likely be called out in the product’s name, which is good. However, as a visitor, it is difficult to find “14” or “15 Pro” in a sentence—one for each displayed product.
Helping customers find a product using a Quiz tool, or better annotating products on your product list pages (PLP) will make a massive difference.
The other option is to combine these products under the umbrella described in Essential below.
Essential
This is the easiest and least expensive to implement because you already have it at your fingertips.
- BigCommerce and Shopify call them product variants. Note that BigCommerce has a limit of 600 variants, and Shopify has a limit of 100 (but 2,000 through the API).
- Adobe Commerce/Magento 2 calls them configurable products.
- WooCommerce calls them product variations or composite products.
Apparel websites use this technique all the time. They have one product display page containing color and size SKUs. Customers will identify the final product they wish to purchase by selecting from dropdown menus or selecting boxes. Sometimes, they still show the different colors on the product list pages (categories), but these links all point to the same page.
Pros
- Free! You just have to set it up.
- No complexity to configure or maintain.
Cons
- It is difficult to account for custom pricing rules.
- Doesn’t account for product customizations like monogramming, engraving or custom printing.
All you have to do is
- Source and upload photos for each relevant combination. Invisible attributes don’t matter—only size, color, and texture changes.
- Ensure pricing is accurate.
- Configure your eCommerce system to change the image when a new image is selected.
Product Customizer
The customizer gets the customers the information they need without the flash and expense of going to a complete 3D solution. Colors, frames, pricing, and shipping data are readily available. A quality eCommerce agency like SwiftOtter can craft a configurator that even communicates with your ERP to provide the latest information to customers at any time.
Best for
- There is no need for 3D, but product complexities must be presented to the visitor.
- The effort to build 3D models is too much.
- A stepping stone into a 3D customizer as this involves the foundation data layer.
Examples
Pros
- Likely less expensive than 3D.
- Easier to achieve a quality polish.
- Solid foundation to then add on 3D.
Cons
- But, it’s still not 3D.
All you have to do is
This project will involve a discovery phase to identify the combinations and convert the permutations into database lookups and mathematical calculations. If this sounds complicated, it’s because it is. Depending on your product, the heavy lifting will fall on the pricing or visualization/image sides. The shipping timeframe is often driven by pricing, so it’s essential to consider this simultaneously.
We’ve helped brands like Grandstand, Marlow White, and Kee Safety overcome these challenges, building reliable solutions to consolidate complicated calculations and visualizations into a web interface quickly. Let’s chat.
3D / Augmented reality
The difficulty of launching a 3D configurator has dramatically reduced over the past two years. Technology has improved, and companies have emerged, so implementation costs are significantly less.
3D configurators are the holy grail of this space. Your customers will be impressed when they select the color and size and then spin it around—even putting it on the wall to ensure it’s the right size.
The key to making this work is your 3D models. Nowadays, most manufacturers have a 3D model that can be seamlessly transformed into a web-ready model by simplifying and adding parameters.
Best for
- When visual changes drastically affect the look of the product.
- A premium experience to build trust and reduce risk.
- When augmented reality helps the buyer see that the product fits its environment (furniture).
Examples
Pros
- Premium option to help customers see exactly what they are getting. No ambiguity.
- Reduce returns thanks to configured images through the cart process. The customer sees exactly what they are getting. Your fulfillment team also has a visual check to ensure the product being shipped matches customer expectations.
Cons
- Most expensive option, especially if 3D models have to be created.
- You still have to do your homework on determining pricing and fulfillment times.
All you have to do is
You need to select an eCommerce-ready 3D provider. We recommend ShapeDiver, which has built accessible 3D technology at an excellent value point.
Your 3D models need to be transformed into a web-ready format. ShapeDiver uses Grasshopper to create parameters and control the output. ShapeDiver can output files in any format to simplify the production or fulfillment.
You will also need the “Product Customizer” data to present pricing and fulfillment times to the customer. Thus, we recommend starting with the “Product Customizer” step and rolling out 3D capabilities on a limited scale.
Manufacturing Configurator Examples
ThermaTru
Type: 2D configurator
Platform: Custom-built
ThermaTru answers the classic question, “What will my door look like?” Visitors can customize their door and see what it looks like before investing $2,000+ to have this custom-manufactured for their home. No surprises.
Fender
Type: 3D Configurator
Platform: Configure ID
eCommerce Platform: Salesforce Commerce Cloud (Demandware)
If you are a guitar player like me, you might just dream of owning that perfect guitar, or one that looks like one of your heroes. What could be more awesome to configure a guitar and see how much it will cost? This custom-built configurator is tied in with the Fender eCommerce application.
Radio Flyer
Type: 2D Configurator
Platform: Custom-built
eCommerce Platform: Shopify
Radio Flyer gives visitors the ability to identify the exact wagon desired. This is a custom-built system that appears to be a highly cost-effective solution to build. This relies on static images that overlay at pre-defined points.
Outdoor sporting goods configurator examples
Dimond Bikes
Type: 3D Configurator
Platform: Angle 3D
eCommerce Platform: Shopify
Dimond sells premium bikes. With some starting over $10,000, customers will expect premium features. And Dimond delivers—big time. They provide a beautiful configurator experience to help customers see how this unique, high-performance bike will look when it arrives on their doorstep.
Dialed Archery
Type: 3D Configurator
Platform: Angle 3D
eCommerce Platform: Shopify
Dialed makes archery sights. You can get the exact specifications delivered to your front door. Angle 3D brings a refined configurator experience to the table. Little things like selecting a new option smoothly focus the product to highlight this area.
Deviation Works
Type: 3D Configurator
Platform: Spiff 3D
eCommerce Platform: Shopify
If you’re in the market for a pair of skis matching your personality and skill level to a tee, Deviation Works is the place to find them. You can select the profile, hardness, and design. Note that some aspects of this configurator are not working. We are still including it to highlight the ongoing maintenance required to keep 3D configurators running.
Western Birch
Type: 3D Configurator
Platform: Zakeke
eCommerce Platform: Shopify
This is a good example of a basic configurator, but one that’s highly relevant. We could get away with a “Upload Image” field on a page that gives examples of what others have uploaded. However, there’s nothing like seeing our logo on the product.
B2B configurator examples
Metro
Type: 3D Configurator
Platform: Roomle
eCommerce Platform: BigCommerce
Metro has them if you are ready to order well-built shelves for your restaurant or office. This example doesn’t allow for color or engraving options. Instead, it gives a personalized view of the product that will arrive. You can zoom in and observe the quality. Then, you can download into modeling applications to plan into the construction process.
Herman Miller
Type: 2D and 3D Configurator
Platform: Marxent
eCommerce Platform: Salesforce Commerce Cloud (Demandware)
Herman Miller takes user-friendliness to the next level. One of the biggest downsides of a 3D configurator is the time it takes to download the relevant files. Herman Miller answers this problem by offering a 2D configuration by default. This is the best of both worlds.
Automotive configurator examples
Gem Car
Type: 3D Configurator
Platform: Expivi
eCommerce Platform: WooCommerce
If you want to configure the perfect vehicle for your beachfront home, Gem Car has you well covered. Why not see this new acquisition as it will be when it arrives at your house? This is a simple but well-defined configurator process.
Eduard Trailers
Type: 3D Configurator
Platform: Expivi
eCommerce Platform: Custom
As you review this article, you will agree that not all configurators have to be as complicated as sending a rocket to the moon. Eduard Trailers is a good example of this. This is a simple configuration process in which not all options affect the rendering of the final product.
Apparel configurator examples
Zelli Handbags
Type: 3D Configurator
Platform: Mime EQ
eCommerce Platform: Shopify
This article repeatedly demonstrates that 3D configurators build trust and make it easier to spend money. Zelli Handbags only reinforces this pattern. Visitors have eleven options for customizing the bag precisely to their wishes. One way this could be improved is to give a better indication of when this tailored product will arrive.
Crocs
Type: 3D Configurator
Platform: Expivi
eCommerce Platform: Salesforce Commerce Cloud
Who wouldn’t love a pair of SwiftOtter-themed Crocs? I’d be up for a pair myself.
But you can see that this configurator bucks a trend set thus far: high-priced products do best with configurators. No, Crocs are a reasonably-priced apparel choice that the average consumer can purchase.
Furniture configurator examples
Unruh Furniture
Type: 3D Configurator
Platform: ShapeDiver
eCommerce Platform: WooCommerce
Unruh Furniture is one of our favorite configurator examples. You can custom-order the most precise piece of furniture desired—perhaps even too exact. Click, drag, and even utilize Augmented Reality to see how this product will fit in your dining room. Impressive.
Love Sac
Type: 3D Configurator
Platform: Threekit
eCommerce Platform: Adobe Commerce / Magento 2
Love Sac offers a configurator, but it also has some additional tricks that are worthy of a mention. First, it displays its value proposition well: “Total Comfort Guaranteed. Risk-Free 60-Day Home Trial.” Second, it does a great job showing the visitor their progress through this configuration task.
Palliser
Type: 3D Configurator
Platform: Custom
eCommerce Platform: Adobe Commerce, PWA Studio
Palliser has one of the more featured configurators on the market. You can raise or lower the footrest, see the measurements, and add or remove sectional pieces. Pieces are also excluded from selection at specific points in the design process.
How SwiftOtter can help
If you are in the market for a 3D configurator, we can help you walk through the process and get your new configurator seamlessly added to your website. While there are many steps necessary, the result is almost guaranteed to be massively worth it. Let’s chat!