Creating proper images for the product configurator can be a very time consuming task. It can be very stressful when you realize that all images don’t even align correctly. That would be a disaster, because then you have to create all the images all over again. So we want to help you set up your product configurator image layers correctly. We start by listing a few popular tools that help you easily create your image layers. Then we will guide you through the process of adding the preview images to product items. Popular tools to create image preview layers for the configurator In order to properly create image layers you have to use the correct tools. A few popular tools are: Figma Adobe XD Sketch Adobe Illustrator Adobe Photoshop Creating image preview layers for the configurator With our favorite tool installed, we can start creating the image preview layers for the product. To get the desired result, we have to first identify the configurable product parts and create images for every product part variation. Keep in mind that, with all separate parts of the product are stacked upon each other, the final product image should become visible. The figure below demonstrates a configurable watch which can be configured in two steps: Step 1: the wrist band Step 2: the watch face Note: this can be split up into many more steps. But just for demonstration purposes, we kept it simple in this example. There is no limit to the amount of configurable steps. You can stack as many images on top of each other as you like to!
In the image above you see that the two images combined results in the final product image. You can also see that all image previews have the same dimensions! It is very important that you keep the same dimensions across all the product item previews! Otherwise your preview images might not stack correctly upon each other.