Image switch on hover in product cards

About the Extension

With the image switch on hover, your product cards show more than just the cover: on hover, the second product image appears, or your customers browse up to 10 images and videos by mouse position or arrows – right in the listing, without opening the product page.

Three image switch modes

In the mode Second image on hover, the product card switches to the second product image on hover and back to the cover when the mouse leaves. With Browse by mouse position, the horizontal mouse position selects the image; with Browse by arrows, arrow buttons browse through the images. A position indicator shows which image is visible while browsing.

You set how many images are shown, between 2 and 10. Six transitions are available – from an instant switch to crossfade, slide and flip.

In every product card of your shop

The image switch works wherever Shopware displays product cards: in category listings, search results, cross-selling and the wishlist, as well as in the Shopping Experiences elements product box and product slider. It works with the product card layouts standard, big image and minimal content.

Fast loading, also on touch devices

Additional images are only loaded when the mouse moves over the product card – the page weight on first load stays the same. The next image is preloaded, so the switch happens without delay.

On touch devices, the first tap still opens the product. In the browsing modes, you can show permanently visible arrows for individual viewports, for example only for large tablets in landscape format.

Images, videos and accessibility

Product videos are included when browsing and play automatically if "Autoplay videos in product listings" is enabled in Shopware. The arrows are labelled and operable by keyboard; if a visitor has set "reduce motion", the images switch without animation.

Features at a glance

Image switch

• Second image on hover → The second product image is shown while the mouse is over the image.
• Browse by mouse position → Moving the mouse horizontally across the image browses through the product images.
• Browse by arrows → Arrow buttons browse through the images, the selected image stays visible.
• Adjustable number of images → 2 to 10 images including the cover, in the order of the product media.
• Position indicator → Shows which image is visible while browsing.
• 6 transitions → No animation, crossfade, fade-zoom, fade-top-bottom, slide-left-right or flip-in-out.

Media & performance

• Product videos → Videos from the product media are included when browsing, 3D objects are skipped.
• Video autoplay as in the listing → Follows the Shopware setting "Autoplay videos in product listings".
• Loading on hover → Images are only loaded on hover, the next image is preloaded.

Touch devices & accessibility

• Arrows on touch devices → Viewports from XS to XXL selectable individually.
• First tap opens the product → Touch and pen input don't trigger the image switch.
• Accessibility → Arrows are labelled and operable by keyboard, "reduce motion" turns off animations.

Use in your shop

• All product cards → Listing, search, cross-selling, wishlist, Shopping Experiences product box and product slider.
• All product card layouts → Standard, big image and minimal content.
• Per sales channel → Activation and all settings separately for each sales channel.
• Compatible with Zenit themes → Replaces the image switch of the Zenit themes while the extension is active.