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 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 into different parts that make up the final product, considering all the possible combinations. Those images need to be in a 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 much 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) your product has, define the options and then slice up your images.
Creating Layered Images
Before we get started
Make sure you have an account on ConvertCalculator. If you haven't set one up now for free 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: Cedar 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 “Lists” 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 the 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 it 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 it will be:
- Image #3: Cedar
- Visibility equation: IF(QB=1,1,0). This says that if the client selects option 1 (Cedar), 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”.
