PrestaShop Design & Navigation

Produktbild-Hover & Automatische Badges PrestaShop

Hover-Wechsel + smarte Badges in Ihren Listen

Das zweite Bild beim Hover sowie Badges für Neu, Sale und Geringer Bestand, die sich von selbst auslösen – ohne Theme-Überschreiben.

Auf einen Blick
  • Zeigt das zweite Bild des Produkts beim Hover in allen Listen an (Kategorie, Suche, Startseite, Neuheiten, Preisnachlässe, Hersteller, Lieferant).
  • Automatische Badges Neu, Sale und Geringer Bestand, gesteuert durch konfigurierbare Regeln, ohne manuelle Arbeit.
  • Kein Template-Überschreiben: JavaScript-Erkennung der Miniaturen, kompatibel mit dem Classic-Theme und Child-Themes.
  • Ein einziger gebündelter AJAX-Aufruf pro Seite und ein Hover-Bild, das beim ersten Hover per Lazy-Loading geladen wird.
  • Mehrsprachige Beschriftungen FR/EN/ES/DE/IT, Badge-Farben und -Position vollständig konfigurierbar.
PrestaShop 8 & 9 Multishop FR/EN/ES/DE/IT Theme-unabhängig Quellcode inklusive
  • 30 Tage Rückgaberecht
  • 12 Monate Updates
  • 24-h-Support
www.datafirefly.com/de/
Zweites Bild beim Hover und automatische Badges auf PrestaShop-Produktbildern
v1.0.0 · aktualisiert 2026-07-15
Was es leistet

Die Kurzfassung.

01

Zweites Bild beim Hover

Der Besucher fährt über eine Miniatur und entdeckt das zweite Bild des Produkts (anderer Winkel, getragen, ein Detail). Effekt Überblenden, Überblenden + Zoom oder Sofort, nach Wahl. Produkte mit nur einem Bild werden automatisch übersprungen.

02

Badges, die sich selbst auslösen

Neu je nach Alter des Produkts, Sale sobald ein spezifischer Preis aktiv ist (mit optionaler Prozentanzeige), Geringer Bestand unterhalb eines von Ihnen festgelegten Schwellenwerts. Keine Dateneingabe Produkt für Produkt.

03

Für Performance gebaut

Eine einzige gebündelte AJAX-Anfrage ruft die Daten der gesamten Seite ab. Das Hover-Bild wird erst beim ersten Hover geladen: keine verschwendete Bandbreite beim Laden.

04

Ohne Ihr Theme anzurühren

Keine Template-Datei wird überschrieben. Das Modul erkennt die Miniaturen in JavaScript und passt sich nach Facettennavigation und AJAX-Paginierung automatisch wieder an.

Die ausführliche Fassung

Alles, was Sie wissen sollten bevor Sie installieren.

Ein detaillierter Blick darauf, wie Produktbild-Hover & Automatische Badges PrestaShop funktioniert, warum wir es so gebaut haben und der Gedanke hinter den Funktionen oben.

§ 01

Eine lebendigere Produktkachel direkt in der Liste

In einem Shop ist die Listenseite oft der erste Kontaktpunkt mit dem Produkt. Indem Sie das zweite Bild beim Hover anzeigen, zeigen Sie einen anderen Winkel, ein getragenes Bild oder ein Detail, ohne dass der Besucher klicken muss. Das Ergebnis: ansprechendere Kategorieseiten und ein flüssigerer Kaufweg. Der Effekt funktioniert auf allen Listen des Shops – Kategorie, Suche, Startseite, Neuheiten, Preisnachlässe, Hersteller- und Lieferantenseiten.

§ 02

Badges, die sich ganz von selbst auslösen

Schluss mit Hervorhebungen, die Produkt für Produkt verwaltet werden müssen. Das Modul vergibt automatisch ein Neu-Badge je nach Produktalter, ein Sale-Badge, sobald ein spezifischer Preis aktiv ist – mit der optionalen Anzeige des Rabattprozentsatzes – und ein Geringer-Bestand-Badge, wenn die verfügbare Menge unter den von Ihnen definierten Schwellenwert fällt. Jedes Badge kann unabhängig aktiviert werden, mit eigenen mehrsprachigen Beschriftungen, Hintergrund- und Textfarbe.

§ 03

Für Performance gebaut

Das Modul vervielfacht die Anfragen nicht: Eine einzige gebündelte AJAX-Anfrage ruft die Daten aller auf der Seite sichtbaren Produkte in Losen ab. Das Hover-Bild selbst wird erst beim ersten Hover heruntergeladen, was das anfängliche Laden der Seite nicht belastet. Auf reinen Touch-Geräten wird der Bildwechsel beim Hover automatisch deaktiviert.

§ 04

Kompatibel, ohne Ihr Theme anzurühren

Keine Template-Datei wird überschrieben. Das Modul erkennt die Produkt-Miniaturen direkt in JavaScript, wodurch es mit dem Classic-Theme wie auch mit Child-Themes kompatibel ist. Es passt sich automatisch wieder an, wenn die Liste durch Facettennavigation oder AJAX-Paginierung neu erzeugt wird. Die Installation erfolgt mit wenigen Klicks und die gesamte Konfiguration wird über eine übersichtliche Admin-Seite geregelt.