Product Configurator


Users want to configure the product they may intend to buy


Allow users to configure a product using a direct and visual version of the configured product


Use when

You want users to get more enthusiastic about a product by letting them 'control' the product and kind of 'personalize' it.


Configuring is usually done is several steps because there may be several aspect of the product that can be configured, e.g. the color, material, writings, wheels etc. The product configurator is therefore a Wizard where every configurable aspect of the product is handled in a single step. Additionally there may be a 'buy' or 'order' step that leads to some additional steps for the wizard. Since the steps of the process are usually not dependent on each other, Tabs can also be used to set each aspect instead of using a Wizard.

The product configurator is a highly interactive concept where users can visually configure the product. Every time users make a change they should immediately see the results. Usually the users start with a base-configuration that can be changed.


The product configurator allows people to 'play' with a product and literally 'see' the different options. This way they can see the product as-is, a preview of the product they may want to order.

More Examples

At the Porsche US site potential customers can configure their 'ideal' Porsche. The model, exterior color, cabriolet tops, interior color, and equipment can be changed while the two images show the currently selected configuration.

plml logo


0 comments have been added to this pattern

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below