What is a Combined Product Image? - With the combined product image, your customer always has his configured product right in his sight. Due to layer technology the product image is dynamically generated in real time. Therefore, you upload a partial view for every option value in the system. Due to our webshop plugins the image can also be displayed in the cart and in the final customer order. In addition to a 2D view, there is also a 360 degree / 3D view available.
Example Transporter: Combined Product Image (frontend):
A basic picture (picture below) serves as a a basis for the configuration. Images of the different product variations are placed on it as layers via the configuration, such as a red cab in the "Color" (Farbe) step or the car transporter as "structure" (Aufbau).
The basic picture of the transporter in the preview of the configurator:
How is the combined product image generated in the product configurator backend?
The following picture shows the characteristics of the transporter-configuration in the product configurator:
In this example the characteristics base image, color and structure are important for creating the combined product image.
Here you find help for creating characteristics in the product configurator.
1) Generating the basic picture
Click on "Add characteristics" in the component.
The base image will be created as a simple "select":
In the characteristic settings, scroll down to create value and click on "add value"
The value settings open. Type in title, value and price:
You can upload the actual basis picture below (upload or simply via drag-and-drop).
IM ENGLISCHEN SIEHT DAS ANDERS IM KONFIGURATOR AUS ALS IM DEUTSCHEN? Muss das unter preview hochgeladen werden???
Save and go back.
The characteristic "baseimage" now includes a value named "base image":
2) Gerate the layer-pictures
The characteristics "color" and "structure" are placed on the basic image to generate the combined image in the configuration. They are generated as "list with images". As an example we generate the characteristic "color". Save and leave the characteristics settings of your basic image. Now, add a new characteristic by clicking on "add characteristic":
The characteristic settings open. Type in ID, title and choose "list with images" as data type. Below, you can generate the different options (colors) as values. Therefore, click on add value:
Now you are again in the value settings. Type in all title, value and price:
Below, you can upload the corresponding thumbnail that represents this value (color option):
HIER IST IM KONFIGURATOR KEIN BILD ZU SEHEN (ORANGENES FÜHRERHAUS ALS EINZELBILD)?!!?
In der deutschen Version:
"BILD" GIBT ES IM ENGLISCHEN NICHT???!!
Save and and go back. Repeat the process for all other values (here: colors). Finally, in the characteristic color four colors are generated:
3) Check your configuration
Check the configuration you generated to see whether the combined product image works. Leave the characteristic settings and click on preview:
The initial configuration looks as following:
Please, configure the product (here: choose color and structure). The result should be a combined product image in the preview on the left:
Combined product image with price calculation:
Please give us a feedback! Does this article help you? If not, please do not hesitate to contact us personally via chat (blue chat button).