How to build a 2D product configurator

Our free template allows you to add a configurator to your website with minimal coding required.

1. Download the template

Download the template here.

2. Modify the JavaScript config file

The config.js file allows you to build your configurator without any code changes. An example config file is provided that demonstrates how to use this file.

3. Create the product images

To display a visualisation of the product you will need to create product images. Product components should be split into separate PNGs with transparent backgrounds, retaining the correct positioning which allows them to be layered on top of each other to create the configured product view.

4. Host the configurator online

Host the template files and product images online and your configurator is complete.

Need help building your configurator?
Hire Us
arrow-up icon