Product images
In this article we describe how to add images to your products and how to handle them properly. Furthermore we show you how assign them to specific variants. This gives you the opportunity to display the variant's specific image in the frontend.
Image management
Image upload
Beside the direct media upload in the Media-Manager you can upload your images in the products detail window, just open the "Images" tab in the item details:
In this tab, you have the following opportunities:
- Add image: Here you can assign images to your product. These images are handled from the Media-Manager which also generates the needed thumbnails at uploading new images.
- Mark as preview image: Select your desired image and click this button to mark this image as preview. As long as your customer don't use the variant expanding, this image is always used as preview.
- Remove image(s): Just mark an image or more and click this button to remove them from the product. Keep in mind, that this doesn't delete the images, but removes the assignment of the image to your product only! You still can find the image in the Media-Manager where you can delete it completely.
- Open configuration: Using the image configurator you can assign images to specific variants, so that this images only are displayed, when your customer selects the assigned variant. Select one or more image(s) and click this button to open the configuration (mapping). Hint: If you still have mapped images, you can also click the at the image appeared gearwhell icon to open the configuration of that image. Keep in mind, that opening the configuration of multiple images, the current configuration of the single images are not displayed.
- Download image: Using this button you can download the original image.
- Title: Here you can enter the SEO title of your selected image. Don't forget to save after changing this field.
- Assigned variants: This shows you the variant assignment of the image. Every assignment is shown in a seperate row.
- Free text fields: If configured, you can edit your free text fields here. By default no free text fields are configured, so Shopware shows you a button to create one. Further information can be found in the article Free text field management.
- Sort images: Sort your images using Drag'n'Drop to get the desired image order in the frontend, because this is important for displaying the right image in the listing and the detail page.
Settings of the Preview image
The preview image can be the first image of the first variant, the first image of the mapped (configured) variant or always the image which is marked as preview. This can be set up in Configuration > Basic settings > Frontend > Categories / lists > Always display the article preview image.
If you work with variants in the listing and your customers expand the variants, Shopware always uses the first matching variant / variant group image, no matter how this setting is configured.
To display the best matching image in case of expanding variants in the frontend, we recommend to sort the images with the finest matching to the front, e.g. "Leather > Black > XL" before "Leather > Black" before "Leather". This way the expanded variants will always show the correct image as preview, but nevertheless: expanding all possible groups will show the specific variant image.
Edit SEO title and attributes
Shopware always displays the imformations of the selected image, so first seleect the desired image which you want to edit. every image has a title field and attributes which you can set individually.
Attributes are not set by default, but you always can set them up using the Free text field management.
This free text fields are accessable in the frontend using that variable {$sArticle.image.attribute.XXX}, where XXX stands for the attribute name you're using.
View in the frontend
If you open products in the listing without filtering, Shopware always shows you the preview image of this product. If you filter by expanded variants (e.g. colour), Shopware will always display the first image which is assigned to this variant / variant group.
The listing will show different images depending on the situation. This basically depends on the option Configuration > Basic settings > Frontend > Categories / lists > Always display the article preview image.
If you use variants in the listing, the listing will display the image which matches the currently filtered variant / variant group, independent from the setting above.
Image mapping
The image mapping is the assignment of images to a specific variant to display differences in the products variants. In this section we describe how to use the mapping.
Create a configuration
The mapping is always applied to the selected image. If you want to map multiple images, you can select them using CTRL and your Mouse to select or you draw a frame around the images you want to edit. Keep in mind that mapping multiple images will always create your mapping for all images at once.
If you edit the mapping of multiple images, the current mapping is not shown in the configuration window, but you can create a new mapping for all your selected images there.Keep in mind, that mapping multiple images will overwrite the current mapping of the images!
Clicking the button "Open configuration" a popup opens, which shows you the configuration of the selected image:
If you want to create a new configuration (mapping), click "Add mapping", another window opens which shows you all the available configurator groups and their options (Here only your products groups and options are shown).
In our example we can access the colours and the sizes of the shoe. Now click the desired options to set your mapping.
You can activate only 1 option per group! You can create your mapping using colour only, size only or both. If you only map to colour, the image is displayed in the frontend, when you select this colour, no matter which size you select. If you change your mapping to a colour and a size, the image will be displayed only in the frontend, when you select exact this colour and size. If one option differs from the configuration, the image will be hidden.
Mnemonic:
Groups will always be connected with an "AND".
Only 1 option per group.
If you want to assign more options for 1 group, you can do that using multiple mappings.
To create the mapping correctly, choose the right options for your image In our example the blue shoe is selected, so we select "Blue" as colour and click save twice (to save the single mapping and the whole mapping settings). From now this image is displayed always, when you select the colour "blue" ind the frontend, no matter what size you select.
Images, which have a mapping, have a little blue gearwheel in the upper right, you can click that wheel to access the images mapping instantly.
As another example we take a product, which has 2 colours and 2 sizes, so it has 4 different variants which need to be shown. The lantern in the example is available in black and white plus in a round and an angular form, so the mapping must be set respective to the following values:
After the mapping the product will look like this in the frontend:
