Our product configurator supports the popular stackable product image concept. But how do you get started? We will explain everything in this post. Identifying the layers Before we can create the images, we have to identify the product image layers. Your attributes are going to depend on the amount of layers your final product image has. Because every layer should have an attribute that controls the output for that layer. Say you have a sofa with a sofa color and legs type, then you have at least two attributes: sofa color and sofa leg type. Popular tools to create image 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 the images
When you have all the attributes layed out, you can start creating the product images. Make sure you test the final product image by laying all image parts on top of each other:
When all images align correctly, you can start adding the images to the configurator attributes. The images above are being used in our Sofa demo product. Adding the attributes The final step is creating the attributes and uploading all images to the corresponding attribute items. Something like this:
Configuring the image layer order If you don’t set an image layer order, all image layers are treated the same. So the last changed image will be placed on top. But you can also manually define the image layer order to ensure your image layers will remain the same throughout the configuration process.
Go to your attribute and make sure ‘Modify product image settings’ is set to ‘Yes’. You will now see the options as displayed in the image above. In the ‘Image Layer Order’ field, fill out any number you like. Higher numbers will be placed on top. So your bottom layer is ‘0’ and your top layer is ‘100’ for example. Validate the configurator theme settings The Staggs product configurator plugin supports two types of previews: Single image preview and Stacked image preview If you don’t see the expected behaviour, please make sure you have a theme linked to your configurator builder and the theme setting is set to Stacked image preview. Make sure configurator theme is linked Go over to your configurable product page and look for option: “Product Configurator Theme”
Make sure stacked image is selected Version 1.x Go over to your selected theme (Staggs -> Themes) On the main tab (appearance), scroll down and look for section “Product display“. See image below
Finally check the following settings: Configurator type: Image Preview type: Stacked image Version 2.x Go to Staggs -> Templates and select your template In the “Template” tab, check the “Configurator type“. In the “Gallery” tab, check the “Preview type“ Well done. You should see your stacked product images in place now. If you have any questions, feel free to reach out to our support team.