With ThemeWare® you show a second product image in the product listing as soon as your customers move the mouse over a product tile. This lets you reveal the back, a detail or the product in use – without opening the product page.
Note: You maintain the hover image per product via a custom field and enable the effect in the theme configuration.
Requirements
- a product you want to assign a second image to
- a suitable image for the hover effect in the Shopware media manager
Step 1: Enable the hover effect in the theme
"Theme Manager" => your ThemeWare® theme => "Listing pages" tab => "Product box" block => "Product image" section
Set the "Hover effect" configuration to "crossfade images (Custom field)" and save your changes.
Step 2: Add the hover image to the product
"Catalogues" => "Products" => select product => "Specifications" tab => "Custom fields" section => your theme's custom field set
In the "Hover image" custom field, select the desired image from the media manager and save the product.
Result
When your customers hover over a product tile in the listing, the cover image gently crossfades into the hover image. If nothing shows up, clear the Shopware cache once.
ThemeWare® Tip: Use the same aspect ratio for the cover and hover image so the transition stays calm. Extensions that modify the product image themselves can interfere with the "crossfade images" option – in that case, simply choose a different hover effect.
Further information
You can find all details about the custom field in the ThemeWare® manual:
ThemeWare® Manual ⇒ Hover image