Create an interactive Wix product configurator using Wix Stores and Velo, so customers can customise colours, options, text, images and product choices before they order.
Online shoppers increasingly expect more than a standard product page. They want to choose colors, materials, styles, text, finishes, and other options before placing an order.
A product configurator can turn a traditional product page into an interactive shopping experience.
With Wix Stores and Velo, businesses can create product pages where customers select different options and see those choices reflected in the product experience.
Wix's current developer documentation includes a product-configurator tutorial using Wix Stores and Velo, including selectable options, repeaters, product previews, and adding customized products to the cart.
A product configurator allows customers to customize a product before purchasing it.
For example, imagine a product where customers can select:
Instead of navigating through multiple product pages, the customer can make their choices within one interactive interface.
A configurator can improve the shopping experience by making customization easier to understand.
It can help customers:
This type of functionality can be particularly useful for:
A typical configuration journey looks like this:
The original Brain Quest example uses background color, text color, custom text, and product information as configurable elements.
Start by creating the product inside Wix Stores, then define the options customers can choose from.
Black · White · Blue · Green
White · Gold · Black
Customer-entered text
Your product structure should be planned before building the interface.
Design a dedicated product page with clear customization controls. A simple structure could be:
Large visual area showing the current configuration.
Buttons, swatches, or cards for available choices.
Input field where customers can enter their personalized content.
A summary showing what the customer has selected.
A clear CTA that becomes available once the required configuration is complete.
Wix repeaters can be useful when displaying multiple choices. For example:
Each repeater item can represent one product choice. When the customer selects an option, the corresponding preview can update.
This is where the configurator becomes interactive. Suppose the customer selects Background: Black and Text: Gold. The product preview can immediately update to reflect those choices.
The original implementation uses separate repeaters and event handlers to update visual elements when customers select color options.
For personalized products, add a text input. The preview can then display the customer's text instead of requiring them to imagine what the final product might look like.
This can be especially useful for:
Once all required selections are made, the selected configuration needs to be associated with the product being added to the cart.
The original article uses Wix Stores' cart functionality to send selected choices and custom text fields along with the product. However, this is an area where Wix's APIs have evolved.
Wix currently marks the older wix-stores.cart.addProducts() method as deprecated and recommends newer eCommerce cart APIs for new implementations.
For a new project, use the current Wix eCommerce APIs rather than blindly copying older code from a previous tutorial.
A good configurator should prevent incomplete configurations.
This prevents customers from accidentally ordering incomplete configurations.
Before publishing, test:
Wix's official configurator tutorial also recommends testing the customization experience and checkout before publishing.
Technical functionality is only half of the experience. Your configurator should also be easy to understand.
Instead of "Option 1", use "Choose Your Material".
Colour swatches, product images, thumbnails, material samples and visual previews.
Give users a summary: Color: Forest Green · Text: Gold · Personalization: ELAN
Collapsible sections, step-by-step choices, a sticky CTA, large touch targets and clear progress indicators.
Color, size, fabric, embroidery.
Material, dimensions, finish, fabric.
Name, message, color, design.
Style, color, dimensions, finish.
Design, text, background, image.
Yes. Wix supports building product configurator experiences using Wix Stores and Velo/custom development. Wix provides an official configurator tutorial as well.
Yes. A properly designed configurator can dynamically update a product preview based on the customer's selections.
Yes. Custom text fields can be incorporated into a configurable product experience.
For simple product options, Wix's built-in functionality may be sufficient. More advanced visual configurators generally require custom development.
Yes, but the interface should be specifically designed for touch interaction rather than simply shrinking the desktop layout.
Product structure, live preview, cart integration and testing. One call, one page of plan.
Start a project →