Shopware Agentur-Alltag #1 – Shopware Erlebniswelten Vorschaubild — so klappt es.

von Der Atilla | Juni 14, 2026 | Shopware, Shopware 6, Shopware Einstellungen | 0 Kommentare

Shopware Erlebniswelten sind ein kraftvolles Tool, um ansprechende, visuelle Landingpages und Kategorieseiten zu gestalten. Doch manchmal passiert etwas Frustrierendes: Man fügt einer Erlebniswelt ein Vorschaubild hinzu, und in der Layout-Übersicht bleibt die Kachel grau und leer. Der Editor bestätigt die Zuweisung, der Cache wird geleert – und trotzdem: Keine Reaktion. Dieser Artikel zeigt, warum Shopware Erlebniswelten-Vorschaubilder manchmal nicht angezeigt werden und wie die überraschend simple Lösung lautet. Die gute Nachricht: Das Problem ist fast immer schnell behoben, wenn man weiß, wo es liegt.

1. Das Symptom – Warum bleibt die Kachel grau?

In der Shopware-Admin-Oberfläche findet sich unter Inhalte > Erlebniswelten eine Übersicht aller angelegten Layouts. Jedes Layout wird dort als Kachel dargestellt – idealerweise mit einem aussagekräftigen Vorschaubild, damit Redakteure und Shop-Manager auf den ersten Blick erkennen, welches Layout welchem Zweck dient. Über das Kontextmenü einer Layout-Kachel (das „•••“-Symbol) lässt sich ein Bild aus der Medienbibliothek als Vorschau festlegen.

Der Prozess selbst funktioniert tadellos:

Das Kontextmenü öffnet sich beim Klick auf „•••“
Der Menüpunkt „Vorschau hinzufügen“ führt zum Medien-Dialog
Das gewünschte Bild lässt sich aus der Medienbibliothek auswählen
Der Dialog zeigt das Bild rechts sauber an und bestätigt die Zuweisung mit einem Speichern-Button

Trotzdem bleibt die Kachel in der Layout-Übersicht leer und zeigt nur das schematische graue Platzhalter-Symbol. Egal welches Bild man versucht zuzuweisen: null Reaktion. Das Leeren des Caches bringt ebenfalls nichts. Für viele Nutzer ist das der Punkt, wo aus Verwirrung Frustration wird – zumal die Fehlermeldungen ausbleiben.

Shopware Erlebniswelten – zurück zur Übersicht

2. Die ersten falschen Fährten

Wenn Shopware Erlebniswelten-Vorschaubilder nicht angezeigt werden, ist die erste Reaktion oft, das Bild selbst zu verdächtigen. Doch die naheliegendsten Erklärungen führen meist in die Irre.

Vermutung 1: Bildgröße und Dateigröße

Eine häufige Annahme ist, dass das Bild zu klein oder zu groß sein könnte. Im praktischen Fall lag das problematische Motiv bei 500 × 297 Pixel bei rund 37 KB – definitiv klein, aber keineswegs außergewöhnlich klein. Solche Dimensionen sind für Vorschaubilder völlig normal und sollten technisch problemlos funktionieren. Auch die Dateigröße von 37 KB ist völlig unkritisch. Wenn die Bildgröße die Ursache wäre, würde Shopware entweder eine Warnung anzeigen oder das Bild stark verzerrt darstellen – nicht einfach gar keine Anzeige.

Vermutung 2: Das Motiv selbst

Die zweite Vermutung betraf das Motiv selbst. Es handelte sich um einen hellen Screenshot mit fast weißem Hintergrund. Bei der CSS-Eigenschaft background-size: cover wird so ein Bild stark in die Kachel hineingezoomt, und der weiße Bereich könnte theoretisch die ganze Fläche füllen. Vor dem ohnehin hellen Admin-Hintergrund könnte das aussehen wie „kein Bild“. Das war ein plausibler Nebeneffekt – aber nicht die eigentliche Ursache des Problems. Ein weißes Bild würde zumindest irgendwie sichtbar sein; hier war schlicht gar nichts zu sehen.

Shopware Erlebniswelten – zurück zur Übersicht

3. Der Durchbruch: ein anderes Bild

Den entscheidenden Hinweis brachte ein Gegentest mit einer völlig anderen Datei. Ein Bild namens Greenfriday_de.png wurde der Erlebniswelt zugewiesen – und erschien sofort und korrekt in der Kachel. Damit war klar: Die Vorschau-Funktion selbst ist nicht kaputt. Die Engine funktioniert; das System speichert die Zuweisung korrekt.

Der Unterschied lag nicht in der Bildgröße, nicht im Motiv, nicht in der Dateigröße – sondern in etwas viel Banalererem: dem Dateinamen.

Das funktionierende Bild: Greenfriday_de.png – ein sauberer, einfacher Name
Das nicht funktionierende: Astronomik Kategorie (2026).jpg – mit Leerzeichen und Klammern

Damit war das Rätsel geknackt – oder besser: der Verdacht war zu einer tragfähigen Hypothese geworden, die es zu überprüfen galt.

Shopware Erlebniswelten – zurück zur Übersicht

4. Die eigentliche Ursache: der Dateiname

Es ist eine überraschende Erkenntnis, doch sie erklärt das Phänomen vollständig: Der Server liefert Bilder mit Leerzeichen und Klammern im Namen ohne Probleme aus. Ein direkter Abruf der Bild-URL antwortet mit HTTP-Status 200, die Datei wird übertragen. Das Problem entsteht erst im Browser, beim Rendern der Kachel.

Wie Shopware Erlebniswelten Bilder einbindet

Shopware Erlebniswelten binden Vorschaubilder über eine CSS-Eigenschaft ein. Der genierte HTML-Code sieht ungefähr so aus:

style="background-image: url(/media/12/3a/4b/Astronomik Kategorie (2026).jpg); background-size: cover;"

Das ist das Problem: Die Datei-URL wird unkodiert und ohne schützende Anführungszeichen in den Style geschrieben. Enthält die URL ein Leerzeichen, eine Klammer, einen Schrägstrich oder ein anderes Sonderzeichen, kann der CSS-Parser des Browsers diese Syntax nicht korrekt verarbeiten und verwirft die gesamte background-image-Anweisung stillschweigend.

Das Ergebnis

Es wird kein Bild geladen, der Platzhalter bleibt stehen – und Shopware „glaubt“ intern, ein echtes Bild zu zeigen (es schaltet von der Platzhalter-Darstellung in den Bildmodus um), liefert aber eine URL, die der Browser nicht annimmt. Im Browser-DevTools ist das deutlich nachvollziehbar: Der Inline-Style der Kachel enthält bei der problematischen Datei nur noch background-size: cover;, während die komplette background-image-Zeile fehlt – sie wurde vom CSS-Parser einfach ausgeworfen.

Shopware Erlebniswelten – zurück zur Übersicht

5. Systematisch nachgewiesen

Um auszuschließen, dass nur die Klammern oder nur die Leerzeichen schuld sind, wurden mehrere Namensvarianten desselben Motivs getestet. Das Muster war unmissverständlich:

Sobald irgendein Sonderzeichen im Dateinamen steckt, bricht die Anzeige in Shopware Erlebniswelten ab. Erst der komplett saubere Name funktioniert.

Die Testreihe ergab folgendes Bild:

Astronomik Kategorie (2026).jpg – mit Leerzeichen und Klammern – funktionierte nicht
Astronomik Kategorie 2026.jpg – mit nur Leerzeichen – funktionierte nicht
Astronomik-Kategorie-(2026).jpg – mit nur Klammern – funktionierte nicht
Greenfriday_de.png – ganz ohne Sonderzeichen – funktionierte einwandfrei

Das Ergebnis war eindeutig: Ein einzelnes falsches Zeichen im Dateinamen ist ausreichend, um das Vorschaubild zum Verschwinden zu bringen.

Shopware Erlebniswelten – zurück zur Übersicht

6. Die Lösung für Shopware Erlebniswelten

Die Lösung ist denkbar einfach, sobald man das Problem kennt: Dateinamen für Erlebniswelt-Vorschaubilder ohne Leerzeichen, Klammern und sonstige Sonderzeichen vergeben.

Erlaubte Zeichen

Erlaubt und sicher sind:

Buchstaben (a–z, A–Z)
Ziffern (0–9)
Bindestriche (-)
Unterstriche (_)

Gute Beispiele

astronomik-kategorie-2026.jpg oder astronomik_kategorie_2026.jpg funktionieren einwandfrei. Auch Kombinationen sind möglich: astronmik-kategorie_2026.jpg.

Was mit bereits hochgeladenen Dateien?

Bereits hochgeladene Dateien mit problematischen Namen lassen sich nicht nachträglich „umtaufen“ – die Datei-IDs in der Medienbibliothek sind an den ursprünglichen Dateinamen gekoppelt. Die pragmatische Lösung: Die problematische Datei unter sauberem Namen neu hochladen und dann erneut als Vorschau für die Erlebniswelt zuweisen.

Shopware Erlebniswelten – zurück zur Übersicht

7. Best Practices und Hintergrund

Streng genommen handelt es sich um einen kleinen Schönheitsfehler auf Shopware-Seite. Die URL müsste eigentlich URL-kodiert (percent-encoded) oder zumindest in Anführungszeichen gesetzt werden, dann wären Sonderzeichen unkritisch. Shopware hätte also saubere URLs generieren können – statt dessen passiert dies nicht, und die Folge ist dieses Problem.

Bis Shopware das ändert (falls überhaupt), gilt die pragmatische Faustregel aus diesem Fall: Dateinamen ohne Sonderzeichen, ohne Leerzeichen. Und diese Regel ist ohnehin Best Practice in der Web-Entwicklung. Saubere, kleingeschriebene Dateinamen ohne Leerzeichen und Sonderzeichen ersparen an vielen Stellen Ärger – nicht nur bei Shopware Erlebniswelten-Vorschaubildern, sondern generell bei:

Medienbibliothek-Management
URL-Struktur und SEO
Export- und Import-Prozessen
Datei-Synchronisationen
Plugin- und Theme-Entwicklung

Kernaussage: Wenn sich ein Erlebniswelt-Vorschaubild partout nicht zuordnen lässt, liegt es mit hoher Wahrscheinlichkeit nicht am Bild selbst, sondern an seinem Namen. Keine Sonderzeichen, keine Leerzeichen – und schon erscheint die Vorschau.

Shopware Erlebniswelten – zurück zur Übersicht