PrestaShop Produktgalerie — Komplette Anleitung

Überblick

PrestaShop Produktgalerie (Modulordner dfgallerypro) ersetzt die native Bildergalerie der Produktseite durch eine moderne Galerie: hochauflösender interner Hover-Zoom, vertikale oder horizontale Vorschaubilder, Vollbild-Viewer mit Pinch auf Mobilgeräten, Bildfilterung nach gewählter Variante und eine für den Largest Contentful Paint optimierte Ladestrategie.

Das Modul überschreibt kein Template: Die Galerie wird per JavaScript anstelle des nativen Bildblocks eingebunden, der ausgeblendet wird. Es nutzt keine SQL-Tabelle, keinen Override, und sein JavaScript ist in Vanilla JS geschrieben, ohne jQuery.

Installation

Voraussetzungen

• PrestaShop 8.0 bis 9.x
• PHP 7.4 oder höher
• Ein auf dem Classic-Theme basierendes Theme (oder eines mit den Standard-Bildcontainern der Produktseite)

Modul installieren

1. Öffnen Sie im Back Office Module → Modul-Manager.
2. Klicken Sie auf Modul hochladen und wählen Sie das Archiv dfgallerypro.zip.
3. Klicken Sie nach der Installation auf Konfigurieren.

Konfiguration

Alle Einstellungen befinden sich auf dem Konfigurationsbildschirm des Moduls. Änderungen wirken sofort im Shop, ohne Cache-Leerung.

Position der Vorschaubilder

• Links (vertikal) — Vorschaubildspalte links neben dem Hauptbild. Das ist die Standardeinstellung.
• Rechts (vertikal) — Spalte rechts neben dem Hauptbild.
• Unten (horizontal) — horizontale Leiste unter dem Hauptbild.

Zoom-Modus und Zoomstufe

• Hover (interner Zoom) — der Zoom folgt dem Mauszeiger innerhalb des Bilds. Nur auf Geräten mit präzisem Zeiger (Desktop) aktiv, automatisch erkannt.
• Klick (öffnet den Vollbildmodus) — kein Hover-Zoom; ein Klick öffnet den Vollbild-Viewer.
• Deaktiviert — keine Zoom-Interaktion auf der Bühne.

Die Zoomstufe definiert den Vergrößerungsfaktor des Hover-Zooms, von 1,5 bis 4. Der empfohlene Wert liegt zwischen 2 und 3.

Vollbild-Viewer und Pinch

Ist der Vollbild-Viewer aktiviert, öffnet ein Klick auf das Hauptbild (oder auf den Vergrößern-Button unten rechts) einen immersiven Viewer auf dunklem Hintergrund: Bildzähler, Pfeile, Schließen per Escape-Taste oder Klick auf den Hintergrund.

Die Option Pinch-to-Zoom auf Mobilgeräten aktiviert in diesem Viewer den Zwei-Finger-Pinch (bis 4x), den Doppeltipp zum Ein- und Auszoomen sowie das Verschieben des gezoomten Bilds. Am Desktop zoomt das Mausrad.

Bildfilterung nach Variante

• Strikt — nur die der gewählten Variante zugeordneten Bilder werden angezeigt.
• Intelligent (empfohlen) — die Bilder der Variante erscheinen zuerst, gefolgt von den übrigen Produktbildern.
• Deaktiviert — alle Bilder werden immer angezeigt.

Lazy Loading und LCP-Preload

• Lazy Loading — nur das erste Bild wird sofort geladen; Vorschaubilder ab dem vierten und Folgebilder werden verzögert geladen. Benachbarte Bilder werden bei jeder Navigation vorgeladen, für sofortige Übergänge.
• Titelbild vorladen (LCP) — fügt im Seitenkopf einen Preload-Hinweis mit hoher Priorität für das Titelbild hinzu und verbessert so den Largest Contentful Paint der Produktseite.
• Navigationspfeile anzeigen — zeigt Zurück / Weiter-Pfeile auf dem Hauptbild (am Desktop bei Hover sichtbar, am Smartphone immer sichtbar).

Bilder den Varianten zuordnen

Die Variantenfilterung basiert auf den nativen PrestaShop-Zuordnungen, ohne zusätzliche Konfiguration im Modul:

1. Öffnen Sie die Produktseite im Back Office, Reiter Varianten.
2. Öffnen Sie jede Variante und haken Sie im Abschnitt Bilder die passenden Bilder an.
3. Speichern: Die Galerie nutzt diese Zuordnungen sofort im Shop.

Verhalten im Shop

Am Desktop

• Hover über dem Bild: interner Zoom, der dem Mauszeiger folgt (bei aktivem Hover-Modus).
• Klick auf das Bild oder den Vergrößern-Button: öffnet den Vollbild-Viewer.
• Pfeiltasten zum Navigieren, Escape zum Schließen, Mausrad zum Zoomen im Viewer.

Am Smartphone

• Horizontales Wischen auf dem Hauptbild zum Bildwechsel.
• Tipp auf das Bild: öffnet den Vollbildmodus.
• Im Vollbild: Zwei-Finger-Pinch, Doppeltipp, Wischen zum Navigieren, Positionszähler.

Performance und LCP

Das Modul ist darauf ausgelegt, die Core Web Vitals der Produktseite zu verbessern statt zu verschlechtern:

• Das Titelbild wird im Seitenkopf als Preload mit hoher Priorität angekündigt (optional).
• Das erste Bühnenbild lädt mit hoher Priorität und asynchroner Dekodierung.
• Vorschaubilder nutzen das native Lazy Loading des Browsers; das Originalbild für den Zoom lädt erst beim ersten Hover.
• Das JavaScript lädt am Seitenende, ohne externe Abhängigkeit.

Theme-Kompatibilität und Fehlerbehebung

Das Modul zielt auf die Standard-Bildcontainer von Classic-basierten Themes. Verwendet Ihr Theme eine völlig andere Struktur, bleibt einfach die native Galerie sichtbar, ohne Fehler.

• Die Galerie erscheint nicht — prüfen Sie, ob Ihr Theme einen Standard-Bildcontainer auf der Produktseite bereitstellt. Kontaktieren Sie unseren Support mit der URL einer Produktseite: Die Anpassung an ein bestimmtes Theme ist in der Regel schnell erledigt.
• Der Zoom wirkt unscharf — die Schärfe des Zooms hängt von der Auflösung der hochgeladenen Originalbilder ab. Laden Sie Bilder mit mindestens 1500 px Breite hoch.
• Die Filterung reagiert nicht auf den Variantenwechsel — prüfen Sie, ob die Bilder im Reiter Varianten der Produktseite den Varianten zugeordnet sind und der Filtermodus nicht auf Deaktiviert steht.
• Schnellansicht — das Schnellansicht-Fenster behält bewusst die native Galerie, um Interferenzen mit dem Core-JavaScript zu vermeiden.

Deinstallation

Die Deinstallation über den Modul-Manager entfernt alle Konfigurationsschlüssel des Moduls. Es bleiben keine Restdaten zurück: Das Modul hat weder Tabellen noch Overrides noch Dateien außerhalb seines eigenen Ordners angelegt.

Changelog

• 1.0.0 (16.07.2026) — Erstveröffentlichung: HD-Hover-Zoom auf Basis des Originalbilds, Vollbild-Viewer mit Pinch, Bildfilterung nach Variante (strikt / intelligent), LCP-Preload, Lazy Loading, vertikale oder horizontale Vorschaubilder, Übersetzungen FR, EN, ES, DE, IT.