How to create a visual product configurator

A visual product configurator can be a really powerful eCommerce solution. Although not something you would expect, it's possible to build it yourself in ConvertCalculator. Follow this step by step guide to setup a visual product configurator for your website.

First things first

The most important thing in order to get started is to have clarity on what it is you want to let your users configure. Start with a list of all the dimensions and it's options. A simplified example for sunglasses is shown below:

Model: Wayfarer - Aviator Color: Black - Brown Size: Normal - Big

Creating and hosting your images

When you know what dimensions need to be configurable you are ready to create your images. We suggest you use a tool like Photoshop to create and manage the different images. You should create an image for every dimension. For the above example this would be 2 x 2 x 2 = 8 images.

You can name the images how you want, but we suggest to name them something like the following: "wayfarer-black-normal.jpg", "aviator-brown-big.jpg" etc.

Now it's time to host your images. Although there are a lot of options available, we prefer you use Netlify. It's simple, fast and free.

Head over to netlify.com, create your account and drag and drop a folder with your images on the sites page. Navigate to settings and change the name of your website to your preferred name (we picked "Sunglasses Example"). Now your images are available via https://{your-website-slug}.netlify.com/{image-name}. An example can be found here:

https://sunglasses-example.netlify.com/aviator-black-big.jpg

Questions

Now we have set up the images, it's time to create the questions that let us customize the product. You can create the questions as you would like, but the easiest way is to let question values return an index:

Label: Wayfarer, Value: 1 Label: Aviator, Value: 2

Variables and formula

Now it's time to create the formulas to make the images visible in the calculator. We start by creating a variable for each specified dimension. If you returned the index as a value, a variable can look like this:

CHOOSE(QA, "wayfarer", "aviator")

This basically means that it looks up the value of QA in a list of values. Once you created a variable for each dimension, you can build the formula that displays the image.

The equation in the formula should be something like this:

CONCATENATE("https://sunglasses-example.netlify.com/", VA, "-", VB, "-", VC, ".jpg")

How would I add a pricing formula?

You can add pricing in the same way as creating the variables for the selected option in a dimension. Something like this will do (assuming a Wayfarer is $50 and Aviator is $ 70):

CHOOSE(QA, 50, 70)

Now in the pricing formula you can just add the variables (e.g. VC + VD + VE ).

    ConvertCalculator is a powerful calculator form builder for your website