Documentation
This article covers visual image updates for regular images in choice options. To show text inputs, read the next article: “Text input field visual”
If you are working with 3D models, please visit this article.
To add visual images for your configuration options, we support 2 options:
In case your thumbnail image is the same as the visual preview image you want to show in the product gallery, you can save yourselves some time by re-using the thumbnails instead of creating new visual rules.
To use option thumbnails for your product gallery, make sure the option “Display option thumbnails” is set to “yes”:
Next, head over to the Visuals tab in your choice.
Now check the box “Visual thumbnail” and save the choice.
This will automatically place the thumbnail onto the product image when the option is selected.
Here you can also specify the layer of the thumbnail image.
If you have larger images, or different images, you have to use the WCB Visuals.
Note: with thumbnails you can only show one image in the first gallery image. If you want to display more images, you should also resort to visual groups.
When using choice thumbnails, you can also allow drag and resize for these options. You can define a default top and left position for the draggable image as well.
If you don’t want to use thumbnails, you can use visuals to update the gallery images based on option selections.
To add a new visual group, head over to WCB > Visuals and create a new visual.
When creating a new visual group, make sure to add descriptive title so you can find your visual group later if you need to make adjustments.
Now you can add in as many visuals as you want. Each visual contains an image, optional layer and index settings, and the corresponding display rules.
You can optionally limit the visual group display by entering a specific configuration form, product or product variation. This enables you to show different images for different products and variations.
Please note that these fields are not required. If you have only one single configuration form on your website, you can leave these fields empty.
You can also update multiple product views at once. Simply add more images to the Visuals field. Each image will represent a single view.
This allows you to add 3 images for example: one for front, left, and top view.
Image view indexes
The order of images is important. By default, the indexes will be: 1, 2, 3 for 3 images.
If you want to skip a view, you need fill out the field “Indexes” as well.
Then you can enter something like: 1, 2, 4 if you want to skip view 3.
Image view layers
Finally, you can control the layer index of the images. Higher numbers will be displayed on top.
Again, we support separated comma values. So you can set different layer for different view.
If you enter 10, 50, 90 for example, image on slide 1 will have layer 10, slide 2 layer 50 and slide 3 layer 90.
Note: you need to define all slots in the configuration. If your configurator only has 2 images, you cannot set the index at 3. That one does not exist.
By default, leave the option “Visual dimensions” set to no. Only when you want to add a specific visual group that contains dimensions, set it to “yes”.
You can then use the dimensions toggle in the gallery to show or hide the dimension layers. Dimension layers will be hidden by default.
