Zum Inhalt springen
Shopware 6 Handbuch

Bildergalerie: Raster, Masonry, Slider und Lightbox

Bildergalerie, die sich selbst füllt: Ein Medienordner oder ein Tag reicht. Du zeigst sie als Raster, Masonry oder Slider mit Lightbox in Erlebniswelten und auf Produktseiten.

Version 6.7.0 Kompatibel mit 6.7.0 und neuer 26 Min. Lesezeit
Auf dieser Seite

Einleitung

Mit Bildergalerie: Raster, Masonry, Slider und Lightbox legst du Bildergalerien einmal an und zeigst sie überall dort, wo sie hingehören: in Erlebniswelten und direkt auf Produktseiten.

Was du mit diesem Plugin erreichst

  • Du pflegst eine Galerie an einer Stelle und nutzt sie in beliebig vielen Erlebniswelten und auf beliebig vielen Produktseiten. Tauschst du ein Bild aus, ist es überall ausgetauscht.
  • Deine Galerie füllt sich auf Wunsch von selbst: Du wählst einen Medienordner oder ein Tag, und neue Dateien erscheinen automatisch in der Galerie.
  • Du wählst die passende Ansicht: Raster, Masonry, Bildreihen oder Slider mit fünf Effekten.
  • Deine Kunden öffnen jedes Bild in einer Großansicht (Lightbox) mit Zoom, Wischgesten, Bildunterschrift und Vorschauleiste — auch auf dem Smartphone. Videos laufen direkt darin, Dokumente wie PDFs lassen sich herunterladen.
  • Einzelne Bilder bekommen auf Wunsch einen eigenen Titel, eine Beschreibung und einen Link, zum Beispiel zur passenden Kategorie — in jeder Sprache deines Shops.

Für wen ist dieses Plugin?

Für Shop-Betreiber und Redakteure, die Referenzen, Projekte, Anwendungsbeispiele, Veranstaltungen oder Einblicke hinter die Kulissen zeigen wollen, ohne jede Galerie in jeder Erlebniswelt neu zusammenzustellen. Das Plugin ersetzt nicht die Produktbilder oben auf der Produktseite — Galerien kommen zusätzlich dazu.

Installation

Nach dem Kauf steht dir das Plugin direkt in deiner Administration zur Verfügung — du musst nichts herunterladen.

  1. Melde dich in deiner Shopware-Administration an (DeinShop.de/admin).
  2. Öffne Erweiterungen → Meine Erweiterungen.
  3. Klicke neben Bildergalerie: Raster, Masonry, Slider und Lightbox auf Installieren.
  4. Aktiviere das Plugin über den Schalter links neben dem Eintrag — fertig.

Das Plugin in Meine Erweiterungen, installiert und aktiv Abb. 1: Das Plugin unter Erweiterungen → Meine Erweiterungen — installiert, aktiv und mit dem Link „Konfigurieren“

Taucht das Plugin nicht in der Liste auf, ist dein Shopware-Konto noch nicht mit dem Shop verbunden. Das erledigst du unter Erweiterungen → Meine Erweiterungen im Reiter Shopware Account.

Nach der Installation findest du in der Administration unter Inhalte den neuen Eintrag Bildergalerien.

Erste Schritte

In vier Schritten zur ersten Galerie im Shop:

  1. Galerie anlegen: Öffne Inhalte → Bildergalerien und klicke auf Galerie anlegen. Gib einen Namen ein und wähle im Reiter Bilder die Bildquelle — zum Beispiel einen vorhandenen Medienordner. Klicke auf Speichern (Kapitel 6).
  2. In eine Erlebniswelt einbauen: Öffne unter Inhalte → Erlebniswelten dein Layout, füge aus der Block-Kategorie Bilder den Block Bildergalerie ein und wähle deine Galerie (Kapitel 7).
  3. Oder einem Produkt zuordnen: Wähle in der Galerie im Reiter Zuordnung die Produkte, auf deren Seiten sie erscheinen soll (Kapitel 8).
  4. Ergebnis prüfen: Öffne die Seite im Shop. Ein Klick auf ein Bild öffnet die Großansicht.

Die Plugin-Einstellungen brauchst du für den Anfang nicht anzufassen. Sie regeln vor allem, wie Galerien auf Produktseiten erscheinen.

Einstellungen

Die Einstellungen öffnest du unter Erweiterungen → Meine Erweiterungen über den Link Konfigurieren neben dem Plugin.

Ganz oben wählst du unter Verkaufskanal, für welchen Shop die Einstellungen gelten. Mit Alle Verkaufskanäle legst du die Grundeinstellung fest; für einen einzelnen Verkaufskanal kannst du jede Einstellung abweichend setzen. So zeigst du Galerien zum Beispiel im B2C-Shop als eigenen Tab und im B2B-Shop gar nicht.

Die Schaltfläche Dokumentation öffnen führt dich direkt zu dieser Anleitung.

Plugin-Konfiguration mit Verkaufskanal-Auswahl und dem Bereich Allgemein Abb. 2: Die Konfiguration mit der Auswahl des Verkaufskanals und dem Bereich „Allgemein“

Plugin für diesen Verkaufskanal aktivieren

Mit dem Schalter Plugin für diesen Verkaufskanal aktivieren legst du fest, ob Galerien in diesem Verkaufskanal überhaupt erscheinen. Standardmäßig ist er eingeschaltet. Schaltest du ihn aus, zeigt der Verkaufskanal keine Galerie mehr — weder in Erlebniswelten noch auf Produktseiten noch für angebundene Frontends.

Wozu das gut ist: Du betreibst mehrere Shops und möchtest Galerien nur in einem davon zeigen, ohne das Plugin zu deinstallieren.

Dateiname als Bildtitel verwenden

Ist Dateiname als Bildtitel verwenden eingeschaltet, zeigt die Galerie den Dateinamen (ohne Endung) als Titel und Bildunterschrift — aber nur, wenn weder am Galeriebild noch in der Medienverwaltung ein Titel gepflegt ist. Standardmäßig ist der Schalter aus.

Wozu das gut ist: Deine Dateien tragen sprechende Namen wie „Kueche-Eiche-Landhaus“ und du möchtest nicht jeden Titel einzeln nachtragen.

Diese beiden Felder sind optional. Pflegst du Links schon heute in eigenen Zusatzfeldern an deinen Medien (zum Beispiel aus einem früheren Galerie-Plugin), trägst du hier den technischen Namen dieser Zusatzfelder ein. Du findest ihn unter Einstellungen → System → Zusatzfelder. Das Plugin liest den Link und den Text der Schaltfläche dann aus diesen Feldern.

Die Felder greifen bei Galerien aus Medienordnern und Tags und überall dort, wo am Galeriebild selbst kein Link gepflegt ist. Verweist ein solcher Link auf eine fremde Website, öffnet er sich in einem neuen Fenster.

Wozu das gut ist: Du steigst von einem anderen Galerie-Plugin um und behältst deine vorhandenen Links, ohne sie neu einzutragen.

Einstellungen für die Produktdetailseite

Im Bereich Produktdetailseite legst du fest, wo und wie Galerien erscheinen, die du einem Produkt zugeordnet hast. Für Erlebniswelten gelten diese Werte nicht — dort stellst du alles direkt am Block ein (Kapitel 7).

Bereich Produktdetailseite der Plugin-Konfiguration Abb. 3: Der Bereich „Produktdetailseite“

Position zugeordneter Galerien — wo die Galerie auf der Produktseite erscheint:

  • Eigener Tab neben Beschreibung und Bewertungen (Standard): Die Galerie bekommt einen eigenen Tab Galerie.
  • Unter dem Kaufen-Button: Die Galerie steht im Kaufbereich direkt unter dem Warenkorb-Button.
  • Unter der Produktbeschreibung: Die Galerie folgt im Tab Beschreibung auf den Beschreibungstext.
  • Nicht anzeigen: Zugeordnete Galerien erscheinen in diesem Verkaufskanal nicht auf Produktseiten.

Darstellung — die Ansicht auf der Produktseite: Raster (gleich groß, auf Seitenverhältnis zugeschnitten) (Standard), Masonry (Spalten, Originalformat der Bilder), Bildreihen (gleiche Höhe, volle Breite) oder Slider. Was die Ansichten unterscheidet, zeigt Kapitel 9.

Bilder je Reihe auf großen Bildschirmen — wie viele Bilder nebeneinander stehen (1 bis 12, Standard 4). Gilt für Raster, Masonry und Slider. Kleinere Bildschirme zeigen automatisch weniger: auf dem Tablet höchstens 4, auf dem Smartphone höchstens 2.

Seitenverhältnis der Rasterbilder — auf welches Format die Bilder im Raster zugeschnitten werden: Quadratisch (1:1) (Standard), Querformat (4:3), Querformat (3:2), Breitbild (16:9), Hochformat (3:4), Hochformat (2:3) oder Original (kein Zuschnitt).

Bildhöhe in Pixel (Bildreihen und Slider) — wie hoch die Bilder in diesen beiden Ansichten sind (80 bis 1200, Standard 240).

Höhe des Galerie-Titelbilds in Pixel — wie hoch das Titelbild über der Galerie ist (Standard 320). Mit 0 erscheint es in seiner Originalhöhe.

Anfangs angezeigte Bilder — wie viele Bilder sofort sichtbar sind. Die übrigen erscheinen über die Schaltfläche Mehr anzeigen. Mit 0 (Standard) siehst du alle Bilder sofort.

Mit den Schaltern darunter blendest du Inhalte ein oder aus:

  • Galerie-Titel und Titelbild anzeigen (Standard: an)
  • Galerie-Beschreibung anzeigen (Standard: an)
  • Bildtitel an den Vorschaubildern anzeigen (Standard: aus)
  • Bildunterschrift in der Lightbox anzeigen (Standard: an)
  • Bildzähler in der Lightbox anzeigen (z. B. 2 / 14) (Standard: an)

Klicke nach jeder Änderung oben rechts auf Speichern.

Gut zu wissen: Auf der Produktseite ist die Großansicht immer eingeschaltet, mit Vorschauleiste und Zoom-Effekt beim Überfahren. Als Slider-Effekt gilt dort Slides (Liste).

So verwaltest du deine Galerien

Was dir das bringt: Alle Galerien deines Shops stehen in einer Liste. Du siehst auf einen Blick, woher die Bilder kommen und welche Galerie aktiv ist.

Öffne Inhalte → Bildergalerien.

Liste der Bildergalerien Abb. 4: Die Liste unter Inhalte → Bildergalerien

Die Liste zeigt je Galerie:

  • Name — ein Klick öffnet die Galerie.
  • Bildquelle — Einzelne Bilder (manuell), Medienordner oder Tags.
  • Aktiv — ein grünes Häkchen für aktive, ein rotes Kreuz für inaktive Galerien. Inaktive Galerien erscheinen nirgends im Shop.
  • Zuletzt geändert

Über die Suchleiste oben (Galerien durchsuchen …) findest du eine Galerie nach ihrem Namen.

Galerie bearbeiten, duplizieren oder löschen

Klicke am Ende einer Zeile auf …. Im Menü findest du:

  • Bearbeiten — öffnet die Galerie.
  • Duplizieren — legt eine Kopie mit allen Bildern, Texten und Zuordnungen an und öffnet sie direkt. Die Kopie ist zunächst inaktiv, damit sie nicht versehentlich doppelt im Shop erscheint. Benenne sie um, passe sie an und schalte sie dann auf Aktiv.
  • Löschen — entfernt die Galerie. Deine Dateien in der Medienverwaltung bleiben erhalten.

Menü einer Galerie mit Bearbeiten, Duplizieren und Löschen Abb. 5: Das Menü einer Galerie in der Liste

Mehrere Galerien auf einmal löschst du, indem du sie links über die Kästchen markierst.

So legst du eine Galerie an

Was dir das bringt: Eine Galerie ist ein eigener Datensatz mit Name, Beschreibung, Titelbild und Bildern. Du legst sie einmal an und verwendest sie danach überall.

Klicke unter Inhalte → Bildergalerien auf Galerie anlegen. Die Galerie hat drei Reiter: Allgemein, Bilder und Zuordnung.

Neue Galerie, Reiter Bilder Abb. 6: Eine neue, noch leere Galerie im Reiter „Bilder“

Reiter Allgemein: Name, Beschreibung und Titelbild

Reiter Allgemein einer Galerie Abb. 7: Der Reiter „Allgemein“ mit Name, Aktiv-Schalter, Beschreibung und Titelbild

  • Name — Pflichtangabe. Der Name erscheint im Shop als Überschrift der Galerie und hilft dir, die Galerie in Listen und Auswahlfeldern zu finden.
  • Aktiv — nur aktive Galerien erscheinen im Shop. Neue Galerien sind aktiv.
  • Beschreibung — ein optionaler Text, der im Shop über den Bildern steht. Du kannst ihn mit dem Editor formatieren.
  • Titelbild (Banner über der Galerie) — ein optionales Bild, das im Shop als breites Banner über der Überschrift erscheint. Du lädst es hoch oder wählst es aus der Medienverwaltung.

Reiter Bilder: Woher die Bilder kommen

Unter Bilder kommen aus wählst du eine von drei Bildquellen:

  • Einzelne Bilder (manuell) — du stellst die Bilder selbst zusammen und bestimmst ihre Reihenfolge.
  • Medienordner — die Galerie zeigt alle Dateien eines Ordners aus der Medienverwaltung.
  • Tags — die Galerie zeigt alle Dateien, die ein bestimmtes Tag tragen.

Unter Sortierung legst du die Reihenfolge fest: Manuell (Reihenfolge der Galerie) (nur bei einzelnen Bildern), Neueste zuerst, Älteste zuerst, Zufällig, Dateiname A–Z oder Dateiname Z–A. Zufällig mischt die Bilder bei jedem Seitenaufruf neu.

Der Schalter Nur Bilder anzeigen blendet Videos, Audiodateien und Dokumente aus. Ist er aus, zeigt die Galerie auch diese Dateien: Videos und Audiodateien laufen in der Großansicht, Dokumente lassen sich dort herunterladen oder öffnen.

Einzelne Bilder hinzufügen und sortieren

Bei der Bildquelle Einzelne Bilder (manuell) erscheint der Bereich Bilder der Galerie.

  1. Ziehe Dateien in das Feld Dateien zum Hochladen hierhin ziehen oder klicke auf Dateien hochladen. Hochgeladene Dateien legt das Plugin in der Medienverwaltung im Ordner „Image galleries“ ab.
  2. Bilder, die schon in deiner Medienverwaltung liegen, wählst du über Medien öffnen aus. Du kannst mehrere Dateien auf einmal markieren.
  3. Ändere die Reihenfolge, indem du ein Bild mit der Maus an die gewünschte Stelle ziehst.
  4. Klicke auf Speichern.

Reiter Bilder mit einzelnen Bildern Abb. 8: Eine Galerie aus einzelnen Bildern — oben die Bildquelle, unten die Bilder in ihrer Reihenfolge

Über der Bilderliste siehst du, wie viele Dateien die Galerie enthält. Ein kleines Ketten-Symbol neben dem Titel zeigt dir, dass ein Bild einen Link hat. Fügst du eine Datei hinzu, die schon in der Galerie ist, weist dich die Meldung Diese Datei ist bereits in der Galerie. darauf hin.

Jedes Bild hat ein eigenes Menü (…) mit zwei Einträgen:

  • Bildtexte und Link bearbeiten
  • Aus Galerie entfernen — nimmt das Bild aus der Galerie. In der Medienverwaltung bleibt die Datei erhalten.

Menü eines Galeriebilds Abb. 9: Das Menü eines einzelnen Bildes

Was dir das bringt: Jedes Bild erzählt seine eigene Geschichte und führt deine Kunden auf Wunsch weiter — zum Beispiel zur passenden Kategorie.

Wähle im Menü eines Bildes Bildtexte und Link bearbeiten. Es öffnet sich der Dialog Galeriebild bearbeiten:

  • Titel — erscheint im Shop unter dem Vorschaubild (wenn eingeschaltet) und als Bildunterschrift in der Großansicht. Lässt du das Feld leer, verwendet die Galerie den Titel aus der Medienverwaltung.
  • Beschreibung — ein kurzer Text, der in der Großansicht unter dem Titel erscheint.
  • Link — eine Adresse, auf die das Bild verweist. Erlaubt sind vollständige Adressen (https://…), Pfade in deinem Shop (/kategorie/…) sowie mailto: und tel:.
  • Linktext — der Text der Schaltfläche am Bild. Lässt du ihn leer, steht dort Mehr erfahren.
  • Link in neuem Fenster öffnen — öffnet den Link in einem neuen Browser-Tab.

Klicke auf Übernehmen und danach in der Galerie auf Speichern.

Dialog Galeriebild bearbeiten Abb. 10: Titel, Beschreibung und Link eines einzelnen Bildes

Wichtig: Zu deiner Sicherheit prüft das Plugin jeden Link. Gibst du eine Adresse ein, die nicht erlaubt ist, erscheint die Meldung Dieser Link ist nicht erlaubt. Erlaubt sind https://, http://, mailto:, tel: und Pfade ab /. und die Schaltfläche Übernehmen bleibt gesperrt. Auch im Shop gibt das Plugin keine Links mit anderen Kürzeln wie javascript: aus.

Meldung bei einem unzulässigen Link Abb. 11: Ein unzulässiger Link wird abgewiesen

Galerie aus einem Medienordner

Was dir das bringt: Du lädst neue Fotos einfach in den Ordner — die Galerie zeigt sie automatisch, ohne dass du die Galerie öffnen musst.

  1. Wähle unter Bilder kommen aus den Eintrag Medienordner.
  2. Wähle unter Medienordner den gewünschten Ordner.
  3. Schalte Unterordner einbeziehen ein, wenn auch die Dateien aus allen Unterordnern erscheinen sollen.
  4. Wähle die Sortierung und klicke auf Speichern.

Im Bereich Vorschau der Treffer siehst du sofort, wie viele Dateien passen und welche es sind.

Galerie aus einem Medienordner mit Vorschau der Treffer Abb. 12: Eine Galerie aus dem Ordner „Fotoreisen“ samt Unterordnern

Galerie aus Tags

Was dir das bringt: Du vergibst in der Medienverwaltung ein Tag — und die Galerie sammelt alle Dateien mit diesem Tag, egal in welchem Ordner sie liegen.

  1. Wähle unter Bilder kommen aus den Eintrag Tags.
  2. Wähle unter Tags ein oder mehrere Tags.
  3. Lege unter Treffer fest, welche Dateien erscheinen:
    • Mindestens ein Tag — jede Datei, die eines der gewählten Tags trägt.
    • Alle Tags — nur Dateien, die alle gewählten Tags gleichzeitig tragen.
  4. Wähle die Sortierung und klicke auf Speichern.

Galerie aus Tags mit Vorschau der Treffer Abb. 13: Eine Galerie aus allen Dateien mit dem Tag „Frühjahrsausstellung“

Tags vergibst du in der Medienverwaltung unter Inhalte → Medien: Wähle eine Datei aus und trage in der Seitenleiste im Bereich Tags das gewünschte Tag ein.

Tipp: Titel und Alt-Text pflegst du bei Ordner- und Tag-Galerien direkt in der Medienverwaltung. Die Galerie übernimmt den Titel als Bildtitel und den Alt-Text als Beschreibung für Suchmaschinen und Screenreader.

Wichtig: Die Galerie zeigt nur öffentliche Dateien. Private Dateien aus der Medienverwaltung erscheinen weder in der Vorschau noch im Shop. Je Galerie erscheinen höchstens 500 Dateien.

Reiter Zuordnung: Produkte und Verkaufskanäle

Reiter Zuordnung mit Produkten und Verkaufskanälen Abb. 14: Die Galerie erscheint auf der Seite des Produkts „Schreibtisch Eiche massiv“ und nur im Verkaufskanal „Storefront“

  • Auf diesen Produktseiten anzeigen — wähle die Produkte, auf deren Detailseite die Galerie erscheinen soll. Ordnest du die Galerie einem Hauptartikel zu, zeigen auch alle seine Varianten die Galerie. Wo und wie sie auf der Produktseite erscheint, legst du in den Plugin-Einstellungen fest (Kapitel 4).
  • Nur in diesen Verkaufskanälen anzeigen — beschränkt die Galerie auf einzelne Verkaufskanäle. Lässt du das Feld leer, erscheint die Galerie in allen Verkaufskanälen.

Klicke danach auf Speichern.

So zeigst du eine Galerie in einer Erlebniswelt

Was dir das bringt: Du setzt die Galerie auf jede beliebige Seite deines Shops — Startseite, Kategorie, Landingpage oder Produkt-Layout — und bestimmst dort Ansicht, Spalten und Großansicht.

Block einfügen

  1. Öffne Inhalte → Erlebniswelten und dann das gewünschte Layout.
  2. Klicke in der rechten Leiste auf das Plus-Symbol, um die Blöcke zu öffnen.
  3. Wähle unter Block-Kategorie den Eintrag Bilder.
  4. Ziehe den Block Bildergalerie an die gewünschte Stelle im Layout.

Block Bildergalerie in der Block-Kategorie Bilder Abb. 15: Der Block „Bildergalerie“ in der Block-Kategorie „Bilder“; links die Vorschau bereits eingefügter Galerien

Hinweis: Blöcke fügst du in der Standardsprache deines Shops hinzu. In anderen Sprachen bleibt die Block-Auswahl gesperrt.

Element einstellen

Klicke im Layout auf den Block und dann auf das Zahnrad-Symbol. Es öffnet sich der Dialog Element-Einstellungen (Bildergalerie) mit bis zu vier Reitern. Mit Fertig übernimmst du die Einstellungen; vergiss nicht, danach das Layout zu speichern.

Reiter Inhalt

Element-Einstellungen, Reiter Inhalt Abb. 16: Galerie, Sortierung und Anzahl der Bilder

  • Galerie — welche Galerie hier erscheint.
  • Sortierung — mit Wie in der Galerie eingestellt gilt die Sortierung der Galerie. Du kannst sie für diese Stelle aber auch abweichend festlegen, zum Beispiel Zufällig auf der Startseite.
  • Maximale Anzahl Dateien — begrenzt die Galerie an dieser Stelle. 0 zeigt alle Dateien (höchstens 500).
  • Anfangs angezeigt — wie viele Bilder sofort sichtbar sind. Weitere erscheinen über Mehr anzeigen; jeder Klick zeigt dieselbe Anzahl weiterer Bilder. 0 zeigt alle sofort. Beim Slider ist das Feld gesperrt.

Reiter Darstellung

Element-Einstellungen, Reiter Darstellung für das Raster Abb. 17: Darstellung „Raster“ mit Spalten je Bildschirmgröße

  • Darstellung — Raster, Masonry, Bildreihen oder Slider (Kapitel 9).
  • Anzahl automatisch nach Platz — statt fester Spalten je Bildschirmgröße passt sich die Anzahl der verfügbaren Breite an. Bei Raster und Masonry gibst du dann unter Mindestbreite je Bild (px) vor, wie breit ein Bild mindestens sein soll.
  • Spalten Smartphone (XS), Spalten Smartphone quer (SM), Spalten Tablet (MD), Spalten Desktop (LG) und Spalten großer Desktop (XL) — wie viele Bilder je Bildschirmgröße nebeneinander stehen (1 bis 12).
  • Seitenverhältnis (Raster) — nur beim Raster: auf welches Format die Bilder zugeschnitten werden, von Quadratisch (1:1) bis Original (kein Zuschnitt).
  • Bildhöhe in px (Bildreihen und Slider) — nur bei diesen beiden Ansichten.
  • Höhe des Titelbilds in px (0 = Original)
  • Abstand zwischen Bildern (px) — von 0 bis 64.

Es erscheinen immer nur die Felder, die zur gewählten Darstellung passen.

Reiter Anzeige

Element-Einstellungen, Reiter Anzeige Abb. 18: Was die Galerie zeigt und wie die Großansicht arbeitet

  • Galerie-Titel und Titelbild anzeigen
  • Beschreibung anzeigen
  • Bildtitel unter den Vorschaubildern
  • Zoom-Effekt beim Überfahren — vergrößert ein Bild leicht, sobald die Maus darüberfährt.
  • Lightbox (Großansicht) aktivieren — ein Klick auf ein Bild öffnet die Großansicht. Ist die Lightbox aus und hat ein Bild einen Link, führt der Klick auf das Bild direkt zum Link.
  • Bildunterschrift in der Lightbox, Zähler in der Lightbox (z. B. 2 / 14) und Vorschauleiste in der Lightbox — erscheinen nur, wenn die Lightbox eingeschaltet ist.

Slider einrichten

Wählst du die Darstellung Slider, erscheint im Reiter Darstellung zusätzlich das Feld Slider-Effekt und ein weiterer Reiter Slider.

Element-Einstellungen, Darstellung Slider mit Slider-Effekt Abb. 19: Darstellung „Slider“ mit dem Effekt „Coverflow“

Unter Slider-Effekt stehen fünf Effekte zur Wahl:

  • Slides (Liste) — mehrere Bilder nebeneinander, die seitlich weiterlaufen.
  • Coverflow — das mittlere Bild steht im Vordergrund, die Nachbarn sind leicht gedreht.
  • Flip, Würfel und Hero (Überblenden) — immer genau ein Bild, mit Umdreh-, Würfel- oder Überblendeffekt. Die Spaltenfelder entfallen hier.

Element-Einstellungen, Reiter Slider Abb. 20: Pfeile, Punkte, Endlos-Blättern und automatisches Weiterblättern

Im Reiter Slider:

  • Pfeile anzeigen — Nie, Nur Desktop oder Desktop und mobil.
  • Punkte-Navigation anzeigen
  • Endlos blättern — nach dem letzten Bild geht es mit dem ersten weiter.
  • Automatisch weiterblättern — der Slider läuft von selbst. Unter Anzeigedauer je Bild (ms) legst du fest, wie lange jedes Bild stehen bleibt (1000 bis 30000 Millisekunden, also 1 bis 30 Sekunden). Fährt die Maus über den Slider, pausiert er.

Tipp: Im Layout-Editor zeigt der Block eine Vorschau der gewählten Galerie. Ist keine Galerie gewählt, steht dort Bitte wähle in den Einstellungen eine Galerie aus. Ist die Galerie inaktiv, weist dich Diese Galerie ist inaktiv und wird im Shop nicht angezeigt. darauf hin.

So zeigst du Galerien auf Produktseiten

Was dir das bringt: Montagefotos, Referenzen oder Anwendungsbeispiele erscheinen genau dort, wo deine Kunden über den Kauf entscheiden.

  1. Öffne die Galerie unter Inhalte → Bildergalerien.
  2. Wähle im Reiter Zuordnung unter Auf diesen Produktseiten anzeigen die gewünschten Produkte (Kapitel 6).
  3. Klicke auf Speichern.
  4. Lege in den Plugin-Einstellungen im Bereich Produktdetailseite fest, wo und wie Galerien erscheinen (Kapitel 4).

Eigener Tab (Standard): Neben Beschreibung und Bewertungen erscheint der Tab Galerie.

Galerie als eigener Tab auf der Produktseite Abb. 21: Die Galerie im eigenen Tab „Galerie“

Unter dem Kaufen-Button: Die Galerie steht im Kaufbereich. Wechselt dein Kunde die Variante, bleibt die Galerie dort sichtbar.

Galerie unter dem Kaufen-Button Abb. 22: Die Galerie unter dem Button „In den Warenkorb“

Unter der Produktbeschreibung: Die Galerie folgt im Tab Beschreibung auf den Beschreibungstext.

Galerie unter der Produktbeschreibung Abb. 23: Die Galerie unter der Produktbeschreibung

Gut zu wissen:

  • Varianten zeigen die Galerien ihres Hauptartikels mit. Ordnest du einer einzelnen Variante zusätzlich eine eigene Galerie zu, erscheinen auf deren Seite beide.
  • Hat ein Produkt mehrere Galerien, erscheinen sie untereinander, alphabetisch nach Namen sortiert — höchstens zehn je Produkt.
  • Die Produktbilder oben auf der Produktseite bleiben unverändert.

So sieht die Galerie im Shop aus

Die vier Ansichten

Raster — alle Bilder gleich groß und auf ein einheitliches Seitenverhältnis zugeschnitten. Ideal für gleichmäßige Produkt- oder Detailfotos. Über der Galerie stehen auf Wunsch Titelbild, Name und Beschreibung, darunter die Schaltfläche Mehr anzeigen, wenn du die Zahl der anfangs sichtbaren Bilder begrenzt hast.

Galerie als Raster mit Titelbild und Mehr anzeigen Abb. 24: Raster mit Titelbild, Bildtiteln, einer Link-Schaltfläche und „Mehr anzeigen“

Masonry — Spalten mit Bildern in ihrem Originalformat. Hoch- und Querformate stehen ohne Zuschnitt nebeneinander.

Galerie als Masonry Abb. 25: Masonry mit gemischten Hoch- und Querformaten

Bildreihen — alle Bilder einer Reihe haben dieselbe Höhe und füllen gemeinsam die volle Breite. Ideal für Fotostrecken.

Galerie als Bildreihen Abb. 26: Bildreihen mit gleicher Höhe

Slider — die Bilder laufen seitlich durch, mit Pfeilen, Punkten oder automatisch.

Galerie als Slider mit Coverflow-Effekt Abb. 27: Slider mit dem Effekt „Coverflow“

Die Großansicht (Lightbox)

Ein Klick auf ein Bild öffnet die Großansicht. Dort sehen deine Kunden:

  • oben links den Zähler (zum Beispiel 3 / 11),
  • oben rechts die Lupe zum Vergrößern und das Kreuz zum Schließen,
  • unter dem Bild Titel und Beschreibung sowie die Link-Schaltfläche des Bildes,
  • unten die Vorschauleiste, über die sie direkt zu jedem Bild springen.

Blättern geht mit den Pfeilen links und rechts, mit den Pfeiltasten der Tastatur oder per Wischgeste auf dem Smartphone. Ein Doppelklick vergrößert das Bild; im vergrößerten Zustand verschieben sie den Ausschnitt mit der Maus oder dem Finger. Die Escape-Taste schließt die Großansicht.

Lightbox mit Bildunterschrift, Zähler, Link und Vorschauleiste Abb. 28: Die Großansicht mit Zähler, Bildunterschrift, Link-Schaltfläche und Vorschauleiste

Videos und Audiodateien spielen direkt in der Großansicht ab. Dokumente wie PDFs erscheinen mit den Schaltflächen Herunterladen und Öffnen.

Lightbox mit einem PDF-Dokument Abb. 29: Ein PDF in der Großansicht

Auf dem Smartphone

Auf kleinen Bildschirmen zeigt die Galerie so viele Spalten, wie du für Smartphones eingestellt hast. Die Großansicht nutzt die ganze Bildschirmbreite und reagiert auf Wischgesten.

Auf der Produktseite öffnet ein Tipp auf den Tab Galerie die Galerie wie Beschreibung und Bewertungen als Seitenleiste. Über Menü schließen kehrt dein Kunde zur Produktseite zurück.

Galerie auf dem Smartphone Abb. 30: Raster mit zwei Spalten auf dem Smartphone

Lightbox auf dem Smartphone Abb. 31: Die Großansicht auf dem Smartphone

Rechte für dein Team

Was dir das bringt: Du legst fest, wer Galerien sehen, bearbeiten, anlegen oder löschen darf.

Öffne Einstellungen → System → Benutzer & Rechte und im Bereich Rollen die gewünschte Rolle. Im Bereich Inhalte findest du die Zeile Bildergalerien mit den Spalten Ansehen, Bearbeiten, Erstellen, Löschen und Alle.

Berechtigungen einer Rolle für Bildergalerien Abb. 32: Die Rolle „Redaktion“ darf Bildergalerien ansehen, bearbeiten und erstellen, aber nicht löschen

  • Ansehen — die Liste und die Galerien öffnen, ohne etwas zu ändern.
  • Bearbeiten — Galerien ändern, Bilder hinzufügen und hochladen. Schließt Ansehen ein.
  • Erstellen — neue Galerien anlegen und duplizieren. Schließt Ansehen und Bearbeiten ein.
  • Löschen — Galerien löschen.

Wer Erlebniswelten ansehen darf, darf in den Element-Einstellungen auch eine Galerie auswählen.

Mehrere Verkaufskanäle und Sprachen

Verkaufskanäle

Du steuerst Galerien auf drei Ebenen:

  1. Plugin je Verkaufskanal — mit Plugin für diesen Verkaufskanal aktivieren schaltest du alle Galerien eines Verkaufskanals ein oder aus (Kapitel 4).
  2. Galerie je Verkaufskanal — mit Nur in diesen Verkaufskanälen anzeigen beschränkst du eine einzelne Galerie (Kapitel 6).
  3. Produktseite je Verkaufskanal — Position und Darstellung auf Produktseiten stellst du für jeden Verkaufskanal getrennt ein (Kapitel 4).

Sprachen

Name und Beschreibung der Galerie sowie Titel, Beschreibung, Link und Linktext einzelner Bilder pflegst du je Sprache. Wähle dazu oben rechts in der Galerie die Sprache aus, trage die Texte ein und speichere. Fehlt eine Übersetzung, zeigt der Shop den Text der Standardsprache.

Bei einer neuen Galerie speicherst du zuerst in der Standardsprache; danach lässt sich die Sprache umschalten.

Bei Galerien aus Medienordnern und Tags kommen Bildtitel und Alternativtexte aus der Medienverwaltung — dort pflegst du sie ebenfalls je Sprache.

Fehlerbehebung

Der Eintrag „Bildergalerien“ fehlt unter Inhalte

Woran es liegt: Das Plugin ist noch nicht aktiv, oder deiner Rolle fehlt das Recht Ansehen für Bildergalerien.

So behebst du es:

  1. Prüfe unter Erweiterungen → Meine Erweiterungen, ob der Schalter neben dem Plugin eingeschaltet ist.
  2. Prüfe deine Rolle unter Einstellungen → System → Benutzer & Rechte (Kapitel 10).
  3. Lade die Administration neu.

Die Galerie erscheint nicht im Shop

Woran es liegt: Eine der Bedingungen für die Anzeige ist nicht erfüllt.

So behebst du es:

  1. Ist die Galerie Aktiv (Reiter Allgemein)?
  2. Ist unter Nur in diesen Verkaufskanälen anzeigen dein Verkaufskanal gewählt — oder das Feld leer?
  3. Ist in den Plugin-Einstellungen für diesen Verkaufskanal Plugin für diesen Verkaufskanal aktivieren eingeschaltet?
  4. Enthält die Galerie überhaupt Dateien? Bei Ordner- und Tag-Galerien zeigt dir die Vorschau der Treffer, was gefunden wird.
  5. Hast du das Layout der Erlebniswelt nach dem Einfügen des Blocks gespeichert und das Layout der Seite zugewiesen?

Auf der Produktseite erscheint keine Galerie

So behebst du es:

  1. Ist das Produkt (oder sein Hauptartikel) im Reiter Zuordnung gewählt?
  2. Steht in den Plugin-Einstellungen unter Position zugeordneter Galerien für diesen Verkaufskanal nicht Nicht anzeigen?
  3. Bei der Position Eigener Tab und Unter der Produktbeschreibung: Dein Produkt-Layout braucht den Bereich mit Beschreibung und Bewertungen. Bei Unter dem Kaufen-Button braucht es den Kaufbereich. Manche Themes ersetzen diese Bereiche vollständig — teste in diesem Fall eine andere Position.

Die Ordner- oder Tag-Galerie findet keine Bilder

Woran es liegt: Die Dateien sind privat, liegen in einem Unterordner oder tragen nicht alle gewählten Tags.

So behebst du es:

  1. Schalte Unterordner einbeziehen ein, wenn die Dateien in Unterordnern liegen.
  2. Stelle bei Tags unter Treffer auf Mindestens ein Tag, wenn eine Datei nicht alle Tags tragen muss.
  3. Ist Nur Bilder anzeigen eingeschaltet, erscheinen Videos und Dokumente nicht.
  4. Private Dateien zeigt die Galerie grundsätzlich nicht.

Woran es liegt: Das Plugin erlaubt aus Sicherheitsgründen nur Links, die mit https://, http://, mailto:, tel: oder / beginnen.

So behebst du es: Trage die vollständige Adresse inklusive https:// ein oder einen Pfad deines Shops, der mit / beginnt.

Änderungen erscheinen nicht sofort im Shop

Woran es liegt: Normalerweise aktualisiert das Plugin die betroffenen Seiten selbst. In seltenen Fällen hält ein vorgeschalteter Zwischenspeicher (zum Beispiel ein externer Cache deines Hosters) die alte Seite noch fest.

So behebst du es: Leere den Cache unter Einstellungen → System → Caches & Indizes mit Cache löschen und lade die Seite neu.

FAQ

F: Ersetzt das Plugin die Produktbilder auf der Produktseite?

A: Nein. Die Produktbilder bleiben unverändert. Galerien kommen zusätzlich dazu — als eigener Tab, unter dem Kaufen-Button oder unter der Beschreibung.

F: Kann ich YouTube- oder Vimeo-Videos einbinden?

A: Nein. Die Galerie zeigt Videodateien aus deiner Medienverwaltung. Videos von externen Plattformen bindet sie nicht ein.

F: Ich nutze bisher ein anderes Galerie-Plugin. Wie steige ich um?

A: Bestehende Galerien übernimmt das Plugin nicht automatisch, du legst sie neu an. Deine Medienordner und Tags wählst du dabei direkt als Bildquelle. Hast du Links bisher in Zusatzfeldern an deinen Medien gepflegt, trägst du deren technische Namen in den Plugin-Einstellungen ein (Kapitel 4).

F: Kann ich dieselbe Galerie mehrfach verwenden?

A: Ja. Eine Galerie kann in beliebig vielen Erlebniswelten stehen und beliebig vielen Produkten zugeordnet sein. An jeder Stelle in einer Erlebniswelt stellst du die Ansicht getrennt ein.

F: Wie viele Bilder darf eine Galerie haben?

A: Je Galerie erscheinen höchstens 500 Dateien. Bei großen Galerien begrenzt du mit Anfangs angezeigt, wie viele Bilder sofort sichtbar sind; der Rest kommt über Mehr anzeigen.

F: Wird mein Shop durch große Galerien langsamer?

A: Kaum. Die Galerie lädt die Bilder in passender Größe und erst, wenn sie ins Bild scrollen. Großansicht und Slider werden nur auf Seiten geladen, die sie brauchen.

F: Ist die Galerie mehrsprachig?

A: Ja. Name, Beschreibung und die Texte einzelner Bilder pflegst du je Sprache (Kapitel 11). Die Bedienoberfläche gibt es in Deutsch, Englisch und Niederländisch.

F: Sendet das Plugin Daten an fremde Server oder setzt es Cookies?

A: Nein. Auch die Slider-Technik liegt im Plugin selbst.

F: Was passiert mit meinen Galerien, wenn ich das Plugin deinstalliere?

A: Entscheidest du dich bei der Deinstallation, die Daten zu behalten, bleiben alle Galerien erhalten. Sonst entfernt das Plugin seine Galerien. Deine Dateien in der Medienverwaltung bleiben in beiden Fällen erhalten.

Für Administratoren / Technische Details

Dieser Abschnitt richtet sich an technische Administratoren. Für die normale Nutzung brauchst du ihn nicht.

Systemanforderungen

  • Shopware: 6.7
  • PHP: 8.2 oder neuer
  • Datenbank: MySQL 8.0 / MariaDB 10.11 oder neuer

Installation über die Kommandozeile

Liegt das Plugin im Ordner custom/plugins deines Shops, installierst du es so:

php bin/console plugin:refresh
php bin/console plugin:install SwpGallerySix --activate
php bin/console cache:clear

Daten und Medien

  • Galerien, Galeriebilder, ihre Übersetzungen und die Zuordnungen zu Produkten, Tags und Verkaufskanälen liegen in eigenen Tabellen. Die Tabellen von Shopware bleiben unverändert.
  • Bei der Installation legt das Plugin den Medienordner „Image galleries“ als Standardordner für Galerie-Uploads an, mit Thumbnails in allen eingerichteten Größen.
  • Bei der Deinstallation ohne „Daten behalten“ entfernt das Plugin seine Tabellen und die Zuordnung des Standardordners. Dateien in der Medienverwaltung bleiben erhalten.

Store-API (Headless, Composable Frontends)

Zwei Routen liefern Galerien samt aufgelöster Dateien; beide nehmen GET und POST an und erwarten wie jede Store-API-Route den Zugangsschlüssel des Verkaufskanals:

RouteInhalt
/store-api/swp-gallery/{galleryId}eine Galerie mit ihren Dateien, der Gesamtzahl und dem Hinweis, ob die Reihenfolge zufällig gemischt werden soll
/store-api/swp-gallery/product/{productId}die Galerien eines Produkts und seines Hauptartikels, höchstens zehn, nach Name sortiert

Optionale Parameter: sorting (manual, newest, oldest, random, name_asc, name_desc) und limit (höchstens 500). Ist die Galerie unbekannt, inaktiv, für den Verkaufskanal nicht freigegeben oder das Plugin im Verkaufskanal ausgeschaltet, antwortet die erste Route mit 404 und dem Fehlercode SWP_GALLERY__NOT_FOUND. Links liefert die Store-API nur mit den erlaubten Anfängen aus.

Bei zufälliger Sortierung kommt die Liste mit dem Kennzeichen shuffle: true; das Frontend mischt die Reihenfolge dann selbst bei jedem Aufruf.

Die Daten des Erlebniswelten-Elements kommen mit der Seite über die Store-API mit. Für Composable Frontends lauten die Komponentennamen:

  • Block: CmsBlockSwpGallery
  • Element: CmsElementSwpGallery

Eine fertige Frontend-Komponente liefert das Plugin nicht mit; die Darstellung baust du in deinem Frontend selbst.

Cache

Die Galerie-Ausgabe trägt eigene Cache-Kennzeichen. Ändert sich eine Galerie, eines ihrer Bilder, eine Zuordnung oder ein Tag, leert das Plugin genau die betroffenen Einträge. Änderungen in der Medienverwaltung (Titel, Alt-Text, Datei, Tags, Ordner) erneuern alle Seiten mit Galerie beim nächsten Aufruf. Produktseiten ohne Galerie bleiben davon unberührt; sie werden erst neu aufgebaut, wenn ihrem Produkt eine Galerie zugeordnet wird.

Datenschutz

Das Plugin sendet keine Daten an externe Server, setzt keine Cookies und speichert keine personenbezogenen Daten. Die Slider-Bibliothek Swiper (MIT-Lizenz) ist im Plugin enthalten.


Diese Anleitung wurde für Bildergalerie: Raster, Masonry, Slider und Lightbox Version 6.7.0 erstellt.

Wer betreut deinen Shop, wenn es ernst wird?

Wir pflegen Shopware-Shops seit über 20 Jahren, inklusive Updates, Hotfixes und der Plugins, die du hier gerade einrichtest.