Display a Product with Images
The 2D image stack display offers a flexible way to present products with multiple views and layers. You can stack different images on top of each other and have them displayed based on attribute values.
Prerequisites
- You have created a configurator.
- You have prepared images for your product.
Enable Image Stack
- Open your configurator’s editor.
- Click Loading...in the sidebar.
- Select Loading....
- Under Product Display, select Image Stack.
- Click Loading....
The “Image Gallery” option is still available but is no longer being developed. For new configurators, use the “Image Stack” view.
Upload Images
Before you configure views and layers, you should upload the required images.
- Open your configurator’s editor.
- Click Loading...in the sidebar.
- Click Loading....
- Click Loading...and select one or more images.
- The images will be uploaded and displayed.
For the image stack display, you should use transparent PNG images. This ensures that the different layers are displayed correctly on top of one another without the images completely covering each other.
Creating Views
Views represent different perspectives of your product, such as the front and back.
- Open your configurator’s editor.
- Click on Loading...in the sidebar.
- Click on Loading....
- Click on Loading....
- Enter a name for the view (e.g., "Front," "Back").
- Click on Loading....
- Repeat these steps for all required views.
The views you create are displayed in a gallery that the end customer can navigate.
Adding Layers and Print Areas
Within a view, you can define layers and print areas. The order determines which images are "on top" of others.
Adding Layers
- Select a view.
- Click on Loading....
- Enter a name for the layer (e.g., “Base Color,” “Pattern,” “Logo”).
- Click Loading....
- Repeat this for all required layers.
The order of the layers is important! Layers higher up in the list are displayed on top of the layers below them. Use drag-and-drop to adjust the order.
Disable Layers
Layers and print areas can be disabled without deleting them.
- Hover over the layer in the list and click the eye icon (tooltip “Active” or “Inactive”).
- An inactive layer is no longer rendered but is retained along with all its images and rules.
- An inactive print area also includes the layers contained within it.
This allows you to quickly check how much of the overall image a single layer contributes to, such as with shadow or overlay layers. Remember to reactivate the layer afterward: The setting is saved with the configurator and also applies to the published version.
Adding Print Areas
Print areas are sections where end customers can upload their own images or text.
- Select a view.
- Click Loading....
- Enter a name for the print area (e.g., "Personalization," "Logo Area").
- Click Loading....
Set Position and Size
Layers and print areas are positioned and scaled in the same way.
- Click the Resize icon (the icon for changing the size) on the layer or print area.
- A visual preview of your layout will open.
- Position the area by dragging it.
- Resize it by dragging the corners.
- Click Loading....
- Click Loading...to return to full view size.
Layers are always displayed side by side in the view; they are not dragged into a print area. Each layer has its own position and size and remains referenceable everywhere— in the feature options as well as in Regeln.
Advanced View Settings
Each view can be configured in detail.
- Select a view.
- Click Loading....
Size
- Width and Height can be specified here if desired.
- Normally, the size is automatically determined by the uploaded images.
If you do not specify a size, K3 uses the dimensions of the first image loaded onto a layer of this view.
Background Color
- Under Background Color, you can set a color for the view’s background.
- This becomes visible when images have transparent areas or do not fill the entire view.
Scaling
Scaling determines how the view is fitted into the configurator’s display area:
-
Fitted:
- The view is fully visible and as large as possible.
- Empty spaces may appear at the sides.
- This is the recommended default setting for most use cases.
-
Fill:
- The view completely fills the display area.
- The view may be cropped at the sides.
- Use this if you want to ensure that the entire area is filled.
-
Absolute:
- The view is displayed at the specified (and therefore mandatory) size.
- The anchor point is at the top left.
- Use this for pixel-precise control over the display.
Display Images on Layers
You can now display images on layers based on characteristic values.
When Creating a Feature
- Create a new Merkmal or edit an existing one.
- Switch to the Actions tab.
- Check the box next to Display Image on Layer.
- Select the layers on which images should be displayed based on this characteristic.
- You can select multiple layers.
- Click Loading....
- The Values tab now contains columns for the selected layers.
- For each value, upload or select the appropriate images.
You can populate multiple layers with images for a single attribute at the same time. For example, for a color attribute, you can control both the base color and a color-dependent overlay.
About Rules
For more complex cases, you can also use the action manually in rules:
- In the editor, click Loading...in the sidebar.
- Click Loading....
- Enter a Name and, optionally, a Description.
- Click Loading....
- Click Loading....
- Under Attributes, select the attributes on which the image display should depend.
- Check the box next to Show image on level.
- Select the desired layers.
- Click Loading....
- You can now select the appropriate images for each combination of attribute values.
Additional Order Images
When a configuration is completed, K3 saves an image of each view. In addition, you can define additional images that contain only specific layers, such as a cutout of the product without the background layer. This is the counterpart to the Screenshot-Kameras in 3D.
- Click Loading...in the sidebar.
- Click Loading....
- Use the Save Every View as an Order Image toggle to control the automatic view images. Turn it off if you only want your own order images to be saved.
- Click on Loading....
- Enter a Name and select the View.
- Under Included Layers, check the layers and print areas that should appear in this image .
- Under Advanced, configure the following:
- Transparent Background (Cutout): The background color of the view is omitted.
- Format: PNG (with transparency) or JPEG.
- Resolution (DPI): Higher values for printing, e.g., in PDF documents.
- You can change the order of the order images using drag-and-drop; individual order images can be disabled just like layers.
- Click on Loading....
The order images are saved with the order in addition to the preview images and are therefore available in PDF-Dokumenten and Mails.
If you disable the preview images and no active order image is defined, no image will be saved with the order at all. In this case, K3 will notify you of this in the editor.
Related Topics
Color-Filling Layers
For products with many color options, you would normally have to create a separate image for each color. With the Ebenen einfärben function, you can dynamically color-fill a single image with different colors.
Custom Prints
You can define areas where end customers can upload their own images and text. Learn more in Aufdrucke auf Bildern.
Tips and Best Practices
Image Optimization
- Use PNG images with transparency for layers that are meant to overlap.
- Keep file sizes small (use compression).
- Use consistent image sizes for all images in a view.
Layer Organization
- Use descriptive names for layers (e.g., "Base Color," "Decoration," "Shadow").
- Arrange layers from bottom to top (background first, foreground last).
- Use as few layers as necessary, but as many as needed for flexibility.
Performance
- Too many layers or very large images can affect performance.
- Test your configurator on mobile devices.
- Do not use images larger than 2048x2048 pixels.
Avoiding Common Errors
Incorrect Layer Order
If images are overlapping when they shouldn’t be, check the layer order.
Missing Transparency
If layers do not overlap as expected, make sure the images have transparent areas (PNG with an alpha channel).
Different Image Sizes
If images have different sizes, the view may “jump.” Use uniform dimensions.