Customizable Product Builder For Your Online Store (With CSS and jQuery)


You’ve probably seen something similar to this before on car dealership sites. Pick a car, pick a color, pick wheel style, pick additional options etc. As you go through the image changes based on your selections. That’s a product builder!

Product builders are useful shopping tools that allow potential customers to build an ideal version of a product by combining different options. At the end of this process the user is generally given an action to perform: save the build, share it or buy the product directly.


When using product builder you first create Steps and options within those steps. Customers then “step” through the builder in a sequential manner going through each step and making a choice on each one. Each choice can be represented by a thumbnail and each time a different choice is made, the main preview can display a different image representing the current select(s). This graphical process makes it very easy for your customers to build and see exactly what they want before buying.

Demo    Source