ConvertCalculator Icon

Layered Images Result

Stack multiple images (layers) on top of each other to create a visual product configurator.

With layered images, you can create your own visual product configurator. Instead of having one image for every configuration, you can combine multiple layers into one combined image. This approach allows you to create complex configurations, that are easy to set up and load quickly.

How do Layered Images work?

Layered images are images that are stacked on top of each other. You can see every image as a layer. By controlling which layer is visible and which is not, you can build up a complete and unique image with layers, depending on which layers you show.

When uploading layered images, it's essential that they are uploaded in a PNG format 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

See this tutorial on how to create a product configurator on how you can best apply layered images.

How to load image layers

There are two way to load image layers into your calculator. You either use the "Use Formula for Images" or you dont'. If you don't you can add images manually.

Use Formula for Images

When you use a formula to generate images, you can use Datasheets or Tables to return a matrix (spreadsheets data structure). This matrix is used to render the images. Make sure you specify the Image and Formula column. When you've setup your Table, the formula is as simple as this:

FS
TABLE(TA)

NB. Currently, the best way to use Layered Images is to pair it with a Table that has an Airtable source. Right now, Airtable is the only table source that let's you upload images. If you use another source (or a datasheet) you will have to provide image URLs and host your images elsewhere.

How to show or hide layers

For each image layer you have, you will have to create a formula. This way, whenever a question's value changes, it can calculate which layers need to be shown. When the outcome of a formula is a value, it will be shown. If the outcome is FALSE or 0, it will be hidden. Some examples:

FS
// If QA is bigger than 50, show layer, otherwise hide it
IF(QA > 50, 1, 0)

// If QA < 50, show layer, otherwise hide it
QA < 50

// If QA = 1 and QB = 2, show layer, otherwise hide it
AND(QA = 1, QB = 2)

// If QB = 1, show layer, otherwise hide it
IF(QB, TRUE, FALSE)

When using a table to organize your layers, you will have to make sure that the column type of the formula is of a type "Text".

Usage in calculations & notes

  • For create a visual product configurator you need to create different IF functions on each image you added according the different questions you already created. For this, you can also create variables and datasheets to extract values.
  • The result of this formula will be an image based on the customer’s configuration.
  • Make sure each layer has a transparant background and the exact dimensions of the other layers.
  • Avoid special characters like the + symbol in your images. Images with special characters are not loaded properly.