How to create a visual product configurator

Learn step by step how you can create a visual product configurator using the Layered Image formula.

Why should you consider having a visual product configurator on your website?

A visual product configurator provides your customers with a unique buying experience. By showing how the final product will look, you remove any uncertainty from the buying process, which is good for your customers and for your business. One more time, calculator forms will allow you to save time on your sales process.

With an easy setup and beautiful design, ConvertCalculator is the go-to product customization software.

How do Layered Images work?

Before start loading images in your calculator, it is essential to know how the Layered Images configuration works.

What we want to do is create layers of images we can slide on top of each other to create a configuration. In other words, the images must be divided in different parts that make up the final product, considering all the possible combinations. Those images need to be in .PNG file with an opaque background, because this way, when they overlap, their opaque parts are filled by the layers below.

Layering, or stacking, the images is a way more efficient way of displaying configurations than adding images for each configuration. Let's say we have a product configurator with 4 parameters and each parameter has 4 options. These approaches make a huge difference:

  • Layered = 4 + 4 + 4 + 4 = 16 images needed
  • Individual = 4 * 4 * 4 * 4 = 256 images needed

NB. Before you start uploading all your images, think about what parameters (or dimensions) you product has, define the options and then slice up your images.

Creating a Layerd Images

Before we get started

Make sure you have an account on ConvertCalculator. If you haven't set one up, do it now at ConvertCalculator. Click on "+ New calculator" and select "Start from scratch" and we are ready to begin.

Create Layered Images

Now, let's show a concrete example to better understand how to create an attractive product configurator calculator.

We are going to create a visual configurator of dining tables, with:

Two different sizes: 1.50x0.90 and 1.90x0.90

Three color options: Black, Walnut and White

Two material options: Ceder and Pine

Create List questions

Go ahead and click the "+" icon in the top right to see an overview of all the available elements for your calculator. Select the "List" question by clicking on it or dragging it into the canvas. Now you need to:

  • Change the title of the question to "Table size".
  • Add both table sizes as "Options".
  • Add the value for each size.
    • 1.50 x 1.50 value: 1000
    • 2.00 x 2.00 value: 1500

After that, press “Done”, and create two more “List” in the same way for: “Color” and “Material”.

Add Layered Image formula

You need to add ("+") the "Layered Image" formula element to your calculator. Then, in the configuration panel you can add a "Title" or choose to hide this title.

Under "Images", start loading your images that you created earlier.

In "Visibility Equation" you will create the function that will determine if that image is shown or not. Using logic. For example:

For sizing options will be:

  • Image #1: 1.90 x 0.90 table
  • Visibility equation: IF(QA=1000,1,0). This says that if the client selects option 1 (or table value), this image will be displayed, otherwise it will be hidden.

For material options will be:

  • Image #3: Ceder
  • Visibility equation: IF(QB=1,1,0). This says that if the client selects option 1 (Ceder), this image will be displayed, otherwise it will be hidden.

For color options will be:

  • Image #5: Black
  • Visibility equation: IF(QC=1,1,0). This says that if the client selects option 1 (Black), this image will be displayed, otherwise it will be hidden.

After uploading all your images, click “Done”.

This is how it looks

Visual product configurator

Add a formula

We just need one formula in our calculator to show the pricing of the product. Go ahead and add “+” a formula to the bottom of the canvas, change the title to "Total" and add "$" as the prefix.

The equation will be according to table sizes. So on our List question with tables sizing options we already added values for each option.

Formula will be: QA.

Capture orders

Do you want to capture orders with your form and configure its layout? You can follow these easy steps (link to How to capture orders)

Congratulations, you made it! Now you and your customers will enjoy a joyful visual product configurator using Convertcalculator.