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 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

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

How to load image layers

There are two ways to load image layers into your calculator. You either use the "Use Formula for Images" or not. 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 set up your Table, the formula is as simple as this:

FS
TABLE(TA)

NB. Currently, the best way to use Layered Images is to pair them with a Table that has an Airtable source. Right now, Airtable is the only table source that lets 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 the type "Text".

Usage in Calculations and Notes

To create a visual product configurator, you need to use different IF functions for each image added according to the different questions you have created. 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.
Ensure that each layer has a transparent background and the dimensions of each layer are identical.
Avoid using special characters like the plus symbol in your images, as images with special characters may not load properly.

Create a summary image

You can include the layered image formula reference (e.g., FA) in a regular formula field to display the summary image. This image is generated by combining all separate active layers into one image.

The summary image allows you to show the entire configuration in a separate view in your form. The summary image will also be included in your submission (email, Zapier, table, etc.), enabling you to use the data elsewhere, such as in a PDF quote, or to save it in your CRM system.

Learn more about layered images in one of the following articles