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: