Kategorie-Darstellung mit Erlebniswelten professionell gestalten

Kategorie-Seiten gehören zu den am häufigsten aufgerufenen Einstiegspunkten in einem Onlineshop. Kunden landen dort über Suchmaschinen, interne Verlinkungen oder Kampagnen, oft ohne die Startseite je gesehen zu haben. Wie diese Seiten gestaltet sind, beeinflusst direkt, ob ein Besucher bleibt und kauft oder den Shop sofort wieder verlässt.

In der Praxis zeigt sich, dass Kategorie-Seiten mit visueller Aufbereitung messbar höhere Verweildauern erzielen. Gerade bei saisonalen Aktionen, neuen Produktserien oder besonderen Highlights lohnt es sich, die Darstellung der Kategorie gezielt zu gestalten. Mit wenigen Schritten entsteht eine hochwertige Präsentation, die Ihren Kunden auf den ersten Blick vermittelt, was sie erwartet.

Dieser Artikel zeigt Ihnen zwei wirkungsvolle Möglichkeiten, wie Sie das mit Shopware 6 umsetzen. Beide Varianten sind nativ verfügbar, also update-sicher und wartbar. Alles geschieht direkt in den Shopware Erlebniswelten.

Zuerst geht es um eine Kategorieseite mit einem großen Hintergrundbild, vergleichbar mit der Umsetzung im Lindt Onlineshop. Im zweiten Schritt folgt eine moderne Kombination aus Bild, Text und Hintergrundfarbe. Diese eignet sich besonders gut, wenn Sie Inhalte gezielter strukturieren oder redaktionell aufbereiten möchten.

Welche Variante besser zu Ihrem Shop passt, hängt vom jeweiligen Einsatzzweck und Ihrer visuellen Linie ab. Beide lassen sich individuell anpassen und direkt auf Ihre Kategorien anwenden.

Als Beispiel dient die Kategoriedarstellung im Lindt Onlineshop.

Möglichkeit 1: Hintergrundbild wie bei Lindt, emotional und hochwertig

Die Idee: Ein großes Hintergrundbild im oberen Bereich der Kategorieseite, darüber gut lesbarer Text. Diese Variante eignet sich hervorragend für saisonale Kampagnen oder besondere Highlights, etwa Adventskalender. Ein häufiges Muster bei Shops mit saisonalem Sortiment: Die Hintergrundbild-Variante wird gezielt für Kampagnenzeiträume eingesetzt und danach wieder zurückgebaut.

So setzen Sie das Layout um

Zuerst legen Sie in Shopware eine neue Erlebniswelt an.

1. Gehen Sie im Adminbereich auf Inhalte > Erlebniswelten und erstellen Sie ein neues Layout.
2. Wählen Sie den Layout-Typ Kategorie-Seite ohne Sidebar aus, also in voller Breite.
3. Geben Sie dem Layout einen Namen, z. B. Weihnachten 2025, und klicken Sie auf „Layout erstellen".

Shopware fügt automatisch den Produktlisting-Block ein. Jetzt fügen Sie einen neuen Block oberhalb davon ein:

4. Klicken Sie oben auf das Plus-Symbol und wählen Sie Volle Breite.
5. In dieser Sektion fügen Sie ein Hintergrundbild ein. Laden Sie dort das Hintergrundbild hoch oder wählen Sie ein vorhandenes aus der Mediengalerie aus.
6. Jetzt folgt der Text. Ziehen Sie einen Zwei-Spalten-Block (Text) in den Container.
7. Fügen Sie die Informationen zum Textfeld hinzu, z. B. Alle unsere Adventskalender, und stellen Sie den Text auf H1. Zentrieren Sie ihn und färben Sie ihn bei Bedarf weiß ein, damit er sich vom Hintergrund gut abhebt.

Damit das Ganze auch optisch sauber wirkt:

9. Stellen Sie im Layout des Containers den oberen und unteren Abstand auf z. B. 10 bis 15 Prozent, damit der Text mittig im Bild sitzt. Hier ist etwas Feinarbeit nötig, da die optimale Darstellung je nach Bild variiert.
10. Weisen Sie das Layout einer Kategorie zu.

Abschließend sollten Sie den Cache leeren, damit die Änderungen im Frontend sichtbar werden: Einstellungen > System > Caches & Indizes > Cache leeren.

Das Ergebnis: eine deutlich hochwertigere Kategorieseite, emotional, großflächig und einladend.

Möglichkeit 2: Text-Bild-Kombination mit Hintergrundfarbe, flexibel, responsiv und modern

Wenn Sie statt eines vollflächigen Bilds eine Bild-Text-Kombination bevorzugen, funktioniert das ebenso unkompliziert. Diese Variante wirkt dezenter, ist aber sehr flexibel einsetzbar, etwa wenn Sie Produkte erklären oder thematische Kategorien bewerben möchten.

1. In einer Erlebniswelt fügen Sie eine neue Sektion ein.
2. Wählen Sie als Block Zwei Spalten, eine mit Teaser-Text (z. B. links Bild, rechts Text).
3. Tauschen Sie das linke Text-Element durch ein Bild aus und laden Sie Ihr gewünschtes Motiv hoch.
4. Im rechten Bereich geben Sie den Text ein, z. B. Alle unsere Adventskalender. Auch hier können Sie mit einer H1 arbeiten.
5. Jetzt kommt der entscheidende Schritt: Klicken Sie auf die Sektion selbst und vergeben Sie eine Hintergrundfarbe, die exakt zu Ihrem Bild passt. Nutzen Sie dafür ein Tool wie ColorSlurp oder ein anderes Pipetten-Tool, um den Farbwert direkt aus dem Bild zu übernehmen.
6. Fügen Sie den Farbcode im Hex-Format (z. B. #f4e9d8) ein.
7. Stellen Sie sicher, dass der Textbereich vertikal mittig ausgerichtet ist.
8. Im Beispiel-Bild ist der Anzeigemodus auf „Zugeschnitten" gestellt und eine Höhe von 400 Pixeln gewählt. Das sorgt für eine saubere Darstellung. Die optimale Höhe hängt allerdings vom jeweiligen Bild ab und sollte individuell geprüft werden.

Damit das Bild ohne zusätzliche Abstände abschließt:

9. Klicken Sie auf die Blockeinstellungen und stellen Sie den oberen und unteren Abstand auf 0 Pixel.
10. Cache leeren und das Frontend kontrollieren.

Diese Lösung wirkt ruhig und modern. Sie eignet sich ideal für Informationsblöcke mit optischer Unterstützung.

Hinweis zur mobilen Darstellung

Ein Punkt, den Sie bei der Gestaltung berücksichtigen sollten, ist die Darstellung auf mobilen Geräten. Immer mehr Nutzer besuchen Onlineshops über Smartphones oder Tablets.

Bei der Variante mit dem vollflächigen Hintergrundbild kann es vorkommen, dass Inhalte abgeschnitten wirken oder die Lesbarkeit leidet. Shopware bietet hier zwar Anpassungsmöglichkeiten, dennoch lässt sich das gewünschte Ergebnis für alle Bildschirmgrößen nicht immer exakt treffen.

Mehr Spielraum bietet die zweite Variante, die Bild-Text-Kombination mit Hintergrundfarbe. Hier übernimmt Shopware das sogenannte „Responsive Verhalten" automatisch: Das Layout stellt sich beim Verkleinern des Bildschirms von selbst um. In der Praxis wird aus dem Zwei-Spalten-Layout eine vertikale Darstellung, bei der das Bild oberhalb oder unterhalb des Textes erscheint.

Wenn Ihnen eine saubere Darstellung auf allen Endgeräten wichtig ist, empfiehlt sich die Bild-Text-Variante. Sie ist flexibel, übersichtlich und funktioniert auf Smartphones und Tablets ohne zusätzlichen Anpassungsaufwand.

Fazit

Beide Varianten verbessern den ersten Eindruck Ihrer Kategorie-Seiten erheblich:

• Die Hintergrundbild-Variante wirkt besonders emotional und hochwertig. Sie eignet sich ideal für saisonale Highlights und kampagnengetriebene Kategorien.
• Die Bild-Text-Kombination mit Hintergrundfarbe ist moderner, flexibler und bietet das bessere responsive Verhalten auf mobilen Endgeräten.

Welche Variante die richtige ist, hängt von Ihrem Sortiment, Ihrer visuellen Linie und dem jeweiligen Einsatzzweck ab. Beide Wege nutzen ausschließlich native Shopware-Funktionen und sind damit update-sicher, wartbar und langfristig stabil.

Bei komplexeren Anforderungen an die Kategoriegestaltung oder wenn Sie sich nicht sicher sind, welche Variante für Ihren Shop die bessere Wahl ist, unterstütze ich Sie gern.