How to build a 2D product configurator

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

1
Download the template

Download the files for a basic configurator example here.

2
Modify the JavaScript file

Update the configurator.js file to include your required fields, field values, prices and image/icon filenames.

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 files

Host the configurator.js file and product images online. The product images should be stored in a subfolder named /img and the configurator icons should be stored in a subfolder named /icons. The AssetsUrl propery in configurator.js should point to the location of these folders.

5
Generate the configurator URL

Complete the form below to receive your configurator URL via email:

6
Complete

Once the configurator URL is received your configurator can be accessed directly from the URL provided or embedded within your website using an iframe. You can make changes to your configurator.js file or product images and the configurator will be automatically updated.

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