Bildwechsel bei Hover in Produktboxen

Über die Erweiterung

Mit dem Bildwechsel bei Hover zeigen Deine Produktboxen mehr als nur das Cover: Beim Überfahren erscheint das zweite Produktbild, oder Deine Kunden blättern per Mausposition oder Pfeilen durch bis zu 10 Bilder und Videos – direkt im Listing, ohne die Produktseite zu öffnen.

Drei Modi für den Bildwechsel

Im Modus Zweites Bild bei Hover wechselt die Produktbox beim Überfahren auf das zweite Produktbild und beim Verlassen zurück zum Cover. Mit Durchblättern per Mausposition wählt die waagerechte Mausposition das Bild, mit Durchblättern per Pfeilen blättern Pfeil-Buttons durch die Bilder. Eine Positionsanzeige zeigt beim Durchblättern, welches Bild gerade sichtbar ist.

Wie viele Bilder angezeigt werden, legst Du zwischen 2 und 10 fest. Sechs Übergänge stehen zur Wahl – vom direkten Wechsel über Überblenden bis zu Slide und Flip.

In allen Produktboxen Deines Shops

Der Bildwechsel greift überall, wo Shopware Produktboxen darstellt: in Kategorie-Listings, Suchergebnissen, Cross-Selling und im Merkzettel, aber auch in den Erlebniswelten-Elementen Produktbox und Produkt-Slider. Er funktioniert mit den Produktbox-Layouts Standard, Großes Bild und Minimaler Inhalt.

Schnell geladen, auch auf Touch-Geräten

Zusätzliche Bilder werden erst geladen, wenn die Maus über die Produktbox fährt – das Seitengewicht beim ersten Aufruf bleibt unverändert. Das jeweils nächste Bild wird vorgeladen, damit der Wechsel ohne Verzögerung erfolgt.

Auf Touch-Geräten öffnet der erste Tap weiterhin das Produkt. In den Modi zum Durchblättern blendest Du für einzelne Viewports dauerhaft sichtbare Pfeile ein, zum Beispiel nur für große Tablets im Querformat.

Bilder, Videos und Barrierefreiheit

Produktvideos werden mit durchgeblättert und starten automatisch, wenn in Shopware „Videos in Produkt-Listings“ aktiviert ist. Die Pfeile sind beschriftet und per Tastatur bedienbar; hat ein Besucher „Bewegung reduzieren“ eingestellt, wechseln die Bilder ohne Animation.

Funktionen im Überblick

Bildwechsel

• Zweites Bild bei Hover → Das zweite Produktbild wird angezeigt, solange die Maus über dem Bild ist.
• Durchblättern per Mausposition → Eine waagerechte Mausbewegung über das Bild blättert durch die Produktbilder.
• Durchblättern per Pfeilen → Pfeil-Buttons blättern durch die Bilder, das gewählte Bild bleibt stehen.
• Bildanzahl einstellbar → 2 bis 10 Bilder inklusive Cover, in der Reihenfolge der Produktmedien.
• Positionsanzeige → Zeigt beim Durchblättern, welches Bild gerade sichtbar ist.
• 6 Übergänge → Ohne Animation, Überblenden, Überblenden und Zoom, Fade-top-bottom, Slide-left-right oder Flip-in-out.

Medien & Performance

• Produktvideos → Videos aus den Produktmedien werden mit durchgeblättert, 3D-Objekte ausgelassen.
• Video-Autoplay wie im Listing → Folgt der Shopware-Einstellung „Videos in Produkt-Listings“.
• Nachladen bei Hover → Bilder werden erst beim Überfahren geladen, das nächste Bild wird vorgeladen.

Touch-Geräte & Barrierefreiheit

• Pfeile auf Touch-Geräten → Viewports von XS bis XXL einzeln wählbar.
• Erster Tap öffnet das Produkt → Touch- und Stifteingaben lösen keinen Bildwechsel aus.
• Barrierearm → Pfeile per Tastatur bedienbar und beschriftet, „Bewegung reduzieren“ schaltet Animationen ab.

Einsatz im Shop

• Alle Produktboxen → Listing, Suche, Cross-Selling, Merkzettel, Erlebniswelten-Produktbox und Produkt-Slider.
• Alle Produktbox-Layouts → Standard, Großes Bild und Minimaler Inhalt.
• Je Verkaufskanal → Aktivierung und alle Einstellungen getrennt für jeden Verkaufskanal.
• Kompatibel mit Zenit Themes → Ersetzt den Bildwechsel der Zenit Themes, solange die Erweiterung aktiv ist.