Alle Seiten
Bereitgestellt von GitBook
1 von 1

Loading...

Hover-Bild im Listing einrichten

Mit ThemeWare® blendest du im Produktlisting ein zweites Produktbild ein, sobald deine Kunden mit der Maus über eine Produktkachel fahren. So zeigst du z.B. die Rückseite, ein Detail oder das Produkt im Einsatz – ganz ohne die Produktseite zu öffnen.

Hinweis: Das Hover-Bild pflegst du je Produkt über ein Zusatzfeld und aktivierst den Effekt in der Theme-Konfiguration.


Voraussetzungen

  • ein Produkt, dem du ein zweites Bild zuordnen möchtest

  • ein passendes Bild für den Hover-Effekt im Shopware-Medienmanager


Schritt 1: Hover-Effekt im Theme aktivieren

"Theme-Manager" => dein ThemeWare®-Theme => Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild"

Stelle die Konfiguration "Hover-Effekt" auf "Bilder überblenden (Zusatzfeld)" und speichere deine Änderungen.


"Kataloge" => "Produkte" => Produkt wählen => Tab "Spezifikationen" => Bereich "Zusatzfelder" => Zusatzfeld-Set deines Themes

Wähle im Zusatzfeld "Hover-Bild" das gewünschte Bild aus dem Medienmanager und speichere das Produkt.


Fahren deine Kunden im Listing über die Produktkachel, wird das Cover-Bild sanft durch das Hover-Bild ausgetauscht. Wird nichts angezeigt, leere einmal den Shopware-Cache.


Alle Details zum Zusatzfeld findest du im ThemeWare® Handbuch:

Schritt 2: Hover-Bild am Produkt hinterlegen

Ergebnis

ThemeWare® Tipp: Nutze für Cover- und Hover-Bild das gleiche Seitenverhältnis, damit der Wechsel ruhig wirkt. Erweiterungen, die ihrerseits das Produktbild verändern, können die Option "Bilder überblenden" stören – wähle in dem Fall einfach einen anderen Hover-Effekt.

Weiterführende Informationen

Hover-Bild | ThemeWare® Handbuchdoku.themeware.design
ThemeWare® Handbuch ⇒ Hover-Bild
Logo