Product Builder
August 31, 2016 | 20 Feedbacks

Product Builder

A customizable and responsive product builder for your online store.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

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.

Creating such a web component from scratch is no easy work. Therefore we decided to create an easy-to-customize template that can help you realize your own product builder!

Photo credits for the demo: BMW.

Creating the structure

The HTML structure is composed of three main elements: a header.main-header for the builder top navigation, a for the builder steps and a for the builder bottom navigation and the overview of the selected product.

As for the builder steps, only the first one can be found in the index.html file. The other steps depend on the model the user selects and are loaded using Ajax (more in the Events handling section).

Adding style

The CSS used for this resource is quite simple, you can download the demo file to take a look at the entire code.

Just one note about the style of the main elements of the builder: the is used to wrap the different builder steps; its list items are in absolute position, have a height and width of 100%, are one on top of the others and are hidden by default; the class .active is then used to reveal the active step.

Events handling

To implement the product builder, we created a ProductBuilder object and used the bindEvents function to attach event handlers to the proper elements.

When the user selects one of the models, an Ajax call takes care of loading the new content for the model selected; a data-model attribute is added to each list item inside the ul.models-list and is equal to the name of the HTML file the new content has to be retrieved from (modelType in the code below).

Each list item has also a data-price, which is the price of the model selected. Data-price attributes are also added to the other options inside the builder (colors, accessories) and are used to update the final price of the product.

As for the possible product customizations, we used the .options-list class to target lists of options among which the user can choose (in our example models and accessories). When the user selects an option, the updateListOptions() function takes care of updating the product price (and builder content, if a model has been selected).

The class .js-option is added to each list item inside the ul.options-list and is used to detect the click event. If the options are exclusive (like with models since you can select just one), a second class (.js-radio) is added.

The .cd-product-customizer class is instead used for customizations like Colors, where the user can select an option and see a change in the product. When one of these options is selected, the customizeModel() function takes care of updating the product preview and the product price (if necessary).


Aug 31, 2016
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Farzad

    Thank you for the tutorial! This is awesome :) 1+
    I love the flawless of everything happens in the UI and background…

  • Brandon Granger

    Rad UX!

  • Eric Cerqueira de Oliveira


  • s_connolly7

    Looks great! The only thing I noticed was the pricing was a bit off on the accessories tab. Prices were “$6.300″ and “$1.080″. Then on the summary it says things like “Grey Metallic – $0″ but the “Total” amount on the bottom left was correct.

    • Claudia Romano

      Hi there, the prices in the accessories tab refer to the accessories only (need to sum it up to the basic price of the product). The same for the colors.

  • Diego Henrique

    Awesome! Thank you. :)

  • Eduardo Rodrigues

    Great :D

  • Anaet Hossain Rezve

    Awesome! Design :)

  • Philipp Wüthrich

    Why is the scrollbar faded out on the summary page in google chrome? is this intational?

    • Guilherme Marconi

      I didn’t looked to the code to answer this, but I think it’s because she used overflow: hidden in the body and overflow: auto in the element where all the information was displayed.
      The fade is in the fixed header.

      I hope it helps you understand, even if it’s not the exact way the effect was done.

  • Oriol Mendivil

    Great Job!

  • The BR Lab

    This is sooooo amazing!!! I love the interface design too. Is there a way to pass or send all the selections via e-mail?

  • Dami Oderinde

    Great template!

    Is it me or does the code have a bug…? Upon downloading it, I found, when clicking on the model types it literally does nothing. It keeps loading and will not proceed to the next step; choosing a colour. Neither does the “please select a model first!” notification.

    • Claudia Romano

      Hi Dami, you need to use a local server for the ajax call to work properly (if you are using Chrome). You can either open it in a different browser or upload it on a local server!

      • Arjun Chopra

        Why it works properly on other browser and for Chrome it requires a server.

        • basti

          Chrome has some restrictions on newer versions
          So therefore it requires a server

          Very easy to use is the python http simple server. You can run it very easily from the command line

  • Jake

    Hey how could you turn this into a form? Like when a user clicks on the “Buy Now” it would send form information and the overall price?

  • Dmitriy

    Please tell me

    How to remove Step 2


    Awesome! Thanks for the inspiration as usual, Claudia.

  • Junia

    Hey everyone, sorry for the ignorance, but does this work within Shopify Themes?