Shopware 6 Ratgeber
Shopware

Der Shopware 6 Erlebniswelten Guide

Luca Hollenbach 12. Oktober 2021

Aus den altbekannten Einkaufswelten aus Shopware 5 sind nun in Shopware 6 die Erlebniswelten geworden. Doch bringt das Content-Management-System (CMS) Feature auch neue Funktionen mit oder ist es ein einziger Marketing Gag?

Gemeinsam nehmen wir in diesem Ratgeber Beitrag die Shopware 6 Erlebniswelten unter die Lupe und klären jede Funktion von A-Z, sodass auch keine Fragen mehr offenbleiben. Los geht’s:

  1. Was sind die Erlebniswelten?
  2. Warum sind sie so genial?
  3. Erstellung einer Erlebniswelt
  4. Sektionen: Empfehlenswerte Arbeitsweise
  5. Responsive Erlebniswelten bauen
  6. Verwendung von Erlebniswelten
  7. Unsere Kritik an den Erlebniswelten

1. Was sind die Erlebniswelten?

Die beliebten Einkaufswelten in Shopware 5 gaben einem Shop-Besitzer die Option Landingpages und Shopseiten ohne großartige Programmierkenntnisse zu erstellen und zu verwalten. Besonders für saisonale Änderungen, Rabattaktionen, neue Produktvorstellungen oder für die Erstellung von schönen Slidern waren die Einkaufswelten ein viel genutztes Tool.

Für Shopware 6 hat sich das Shopware Team nun viele Gedanken gemacht und vor allem auf eine einfache und intuitive Bedienung gesetzt, um den Look von Shops noch leichter anzupassen.

2. Warum sind sie so genial?

Kurz und knackig: Die Erlebniswelten vereinen Shopsystem mit Content-Management-System (CMS). Wer sich schon mal mit WordPress und Co. auseinandergesetzt hat weiß die vielen Vorteile eines guten CMS‘ zu schätzen. Einfache Änderungen an Webseiten durch einen zentralen Admin bzw. Backend Bereich zu steuern hat schon vielen Seitenbetreibern etliche Kopfschmerzen erspart.

Dasselbe gilt für die Erlebniswelten in Shopware 6. Nun ist es möglich einzelne Shopseiten, Landingpages, Kategorieseiten, Produktseiten oder auch einen ganzen Blog über die Erlebniswelten zu managen. Durch die zunehmende Relevanz von gutem Content auf Online Shops steuert das Shopware Team mit den Erlebniswelten definitiv in die richtige Richtung. Mit wenigen Klicks lassen sich nun wunderschöne Slider und Seiten mit ansprechendem Content nach den individuellen Wünschen des Shop Betreibers neu erstellen und anpassen. Wie genau zeigen wir dir in folgendem Abschnitt.

3. Erstellung einer Erlebniswelt

Klickst du in deinem Shopware 6 Admin Bereich auf den Reiter Erlebniswelten gelangst du zuerst zu einer Übersicht aller derzeit aktiven und inaktiven Erlebniswelten. Der Kreis unter der Vorschau zeigt den aktuellen Status der Erlebniswelt. Grün bedeutet aktiv, grau bedeutet inaktiv. Sprich, ist die Erlebniswelt einer Kategorie/Landingpage zugeordnet oder nicht. Auf der linken Seite kannst du jeweils nach bestimmten Kategorien filtern. Mit der Einführung von Produktseiten existieren nun die vier Filtermöglichkeiten „Shopseiten“, „Landingpages“, „Kategorieseiten“ und „Produktseiten“.

Zusätzlich kannst du die Erlebniswelten nach Erstell- oder Berarbeitungsdatum filtern oder dir eine Tabellenansicht durch das Icon mit den vier gestapelten Balken anzeigen lassen. Fährst du mit der Maus über die Erlebniswelt kannst du mit einem Klick auf die drei Punkte ein Vorschaubild hinzufügen, die Erlebniswelt duplizieren oder sie komplett entfernen.

Shopware 6 Erlebniswelten Übersicht

Auf dem blauen Button rechts oben kannst du nun eine neue Erlebniswelt anlegen. Daraufhin fragt dich Shopware schon automatisch was du genau erstellen möchtest. „Shopseite“, „Landingpage“, „Kategorieseite“ oder „Produktseite“.

Unter einer Shopseite fallen bspw. AGBs, Impressum oder auch die Datenschutzseite. Durch die Auswahl Landingpage lässt sich eure Landingpage mit unterschiedlichen CMS Elementen dynamisch gestalten. Mit der Erlebniswelt einer Kategorieseite bist du in der Lage individuelle Texte für Kategorieseiten mit bestehenden Produktlistings zu verfassen und zu verwalten. Und mit Produktseiten kannst du deine Produkt Detailseiten noch ansprechender erstellen.

Shopware 6 Erlebniswelten Layout Auswahl

In diesem Beitrag erstellen wir gemeinsam eine eigene Landingpage. Im nächsten Schritt wirst du gefragt, ob du ein Layout mit voller Seitenbreite nutzen möchtest oder eine Landingpage mit Sidebar erstellen möchtest. Wir entscheiden uns für eine Landingpage ohne Sidebar, da eine Sidebar in der Regel nur bei Kategorieseiten zum Einsatz kommt.

Kurzer Exkurs zur Sidebar:

An einer Sidebar lassen sich bspw. Navigationspunkte, Filtermöglichkeiten und eine Suchleiste implementieren, um der Seite zusätzliche Usability für den Kunden zu verleihen.

Shopware 6 Erlebniswelten Breite

Nun vergeben wir den internen Namen für die Erlebniswelt. Keine Sorge, diesen Namen werden deine Kunden nirgends sehen können. Wähle hierbei jedoch eine möglichst treffende Beschreibung, um die Erlebniswelt in der Übersicht später einfacher wiederzufinden. Wir nennen sie der einfachheitshalber „Landingpage“.

Shopware 6 Erlebniswelten Benennung

Glückwunsch! 🎉 Wir haben soeben unsere erste eigene Erlebniswelt erstellt! Nun befinden wir uns im zentralen Bearbeitungsbereich unserer Erlebniswelt, dem sogenannten Layout Editor. In dieser Ansicht lassen sich viele verschiedene Stellschrauben drehen, um eine wirklich einzigartige Erlebniswelt zu erstellen. Dann wollen wir mal loslegen!

Zuerst klicken wir auf das Plus in der Mitte unseres Bildschirms, um ein Element hinzuzufügen. Nun öffnet sich automatisch ein Menü auf der rechten Seite.

Shopware 6 Erlebniswelten Layout Editor

Beginnen wir von oben nach unten. Klickst du auf das Zahnrad Symbol, gelangst du zu den Grundeinstellungen der Erlebniswelt. Hier lassen sich Name und Layout-Typ im Nachhinein noch ändern. Wir belassen diese Einstellungen jedoch.

Klicken wir also wieder auf das Plus Symbol. Hier können wir entscheiden, welches der vielen verschiedenen Elemente wir nutzen möchten. Wir haben uns dazu entschieden unsere Landingpage mit einem Bilder Slider zu starten, um unseren Kunden bspw. neu eingetroffene Produkte direkt präsentieren zu können.

Tipp:

Durch Bilder Slider lassen sich beispielsweise auch Rabattaktionen super in Szene setzen.

Wir wählen in der Block-Kategorie also „Bild“ aus. Nun steht uns eine Auswahl von verschiedenen Bildblöcken zu Verfügung. Den Slider, den wir suchen befindet sich in dieser Übersicht eher weiter untern. Scrollen wir also nach unten.

Wir fahren mit dem Mauszeiger über den Block und ziehen ihn mit gedrückter Maustaste in die Mitte unseres Bildschirms. Erscheint der blau hervorgehobene Bereich, können wir den Block loslassen und wir haben ihn erfolgreich in unserem Layout Editor platziert. Die intuitive Drag & Drop Funktion ist super leicht, oder? Wir finden das schon deutlich besser umgesetzt im Vergleich zu den Shopware 5 Einkaufswelten.

Hinweis:

Das Bild der Berglandschaft ist nur ein Vorschaubild. Würden wir jetzt die Erlebniswelt speichern, würden wir eine Fehlermeldung erhalten, da wir noch kein Bild hinterlegt haben.

Klicken wir auf unseren Slider im Layout Editor können wir schon direkt einige Einstellungen festlegen. Geben wir unserem Slider auf der rechten Seite doch mal direkt einen Namen. Wir nennen ihn „Hauptslider“.

Shopware 6 Erlebniswelten Slider

Eine Hintergrundfarbe möchten wir nicht hinzufügen, wir wollen schließlich Bilder in unser Slider Element einbinden. Ein Hintergrundbild möchten wir ebenfalls nicht hinzufügen. Den Bildmodus können wir dementsprechend auch nicht beeinflussen, da kein Hintergrundbild gepflegt wurde.

Das Layout möchten wir jedoch gerne ändern. Mit Klick auf den Pfeil öffnet sich eine erweiterte Einstellung. Zum einen lassen sich hier für unseren Block „Hauptslider“ CSS-Klassen definieren, zum anderen können wir den Abstand unseres Blocks beeinflussen. Standardmäßig werden für jeden Block 20px Abstand an jeder Seite hinterlegt. Wir möchten den linken und rechten Abstand jedoch entfernen, um einen Slider in voller Breite zu erstellen.

Nun sind wir auch schon fertig mit den Einstellungen des Blocks und können endlich Bilder für unseren Slider hinterlegen. Fahren wir mit der Maus über den Slider zeigt sich ein kleines Zahnrad am rechten oberen Rand des Blocks. Mit Klick auf das Zahnrad öffnet sich ein Fenster, durch welches wir unsere Bilder dem Slider kinderleicht hinzufügen können. Durch „Dateien hochladen“ fügen wir unsere Bilder für den Slider hinzu.

Hinweis:

Wir empfehlen dir die Bildgröße so klein wie möglich zu halten, da es sonst zu Ladezeitverzögerungen auf deiner Landingpage kommen kann. Wir nutzen in unserem Beispiel eine Größe von 1000 x 500px. Vergiss auch nicht deine Bilder zu komprimieren. Mit einem Online Komprimier Tool wie https://compressjpeg.com schaffst du es selbst große Bilder auf unter 100kb zu minimieren.

Lade die Bilder am besten einzeln in das Slider Element. Beginne dabei mit dem Bild, welches zuerst im Slider zu erscheinen soll. Zum Zeitpunkt des Beitrags lassen sich die Bilder noch nicht per Drag & Drop in eine andere Reihenfolge bringen.

Solltest du schon Bilder in deiner Mediathek hochgeladen haben, kannst du diese auch mit Klick auf „Medien öffnen“ einfach aus der Mediathek hinzufügen.

Wir haben uns für drei Bilder entschieden. Nun sollten wir noch ein paar Einstellungen an unserem Slider vornehmen. Mit dem Klick auf Einstellungen kommen wir zu einer weiteren Übersicht.

Shopware 6 Erlebniswelten - Slider Einstellungen

Im Anzeigemodus kannst du einstellen wie das Bild dargestellt wird. Bei Standard passt sich das Bild bis zu seiner nativen Größe an die umgebende Box an. Mit Füllen füllt sich die Box mit dem Bild komplett und mit Beinhalten, manchmal auch Strecken genannt, wird das Bild auf die Box Größe gestreckt.

Wir nehmen bei Bildern als Einstellungen immer gerne Beinhalten, da die Bilder somit immer einheitlich auf die komplette Größe des Elements gestreckt werden. Gerade responsiv verhalten sich die Bilder ideal.

Hinweis:

Wichtig ist jedoch beim Slider Element und dem Anzeigemodus Beinhalten, dass auch alle Bilder die gleiche Größe (bspw. 1000 x 500) haben. Ist dies nicht der Fall, wechselt das Element beim durchrotieren der Bilder die Größe, was nicht mehr schön aussieht.

Die Minimale Höhe kannst du nur mit dem Anzeigemodus Füllen einstellen und mit vertikaler Ausrichtung kannst du, nun ja, dein Bild in die gewünschte Richtung ausrichten, sollte es nicht die komplette Box ausfüllen 😉.

Eine Navigation mit Pfeilen möchten wir nicht, wir finden eine Punktnavigation innerhalb des Sliders ansprechender.

Zu den einzelnen Slider Bildern kannst du nun noch Links setzen. Im Idealfall führst du den Kunden direkt zu einer Kategorie oder einem spezifischen Produkt. Wir setzen in diesem Beispiel jedoch keine.

Yaay! 🎉 Wir haben soeben unseren ersten eigenen Slider erstellt! Das ging wirklich schnell.

Hinweis:

Das Aussehen der Punkt- und Pfeilnavigation kann nur von einem Theme beeinflusst werden. Du hast noch kein zu dir passendes Theme gefunden? Melde dich gerne bei uns, wir freuen uns dein Projekt kennenzulernen!

Lass uns das ganze mal live im Shop ansehen. Dazu klicken wir auf die drei verketteten Punkte am rechten Rand, in der Spalte, wo wir vorher auch den Block hinzugefügt haben.

Dieser Abschnitt ist die Layout-Zuweisung. Zum jetzigen Zeitpunkt haben wir noch keine Kategorie bzw. Landingpage ausgewählt, der wir das Layout zuweisen möchten. Mit Klick auf „Layout zuweisen“ kannst du deine Kategorie/Landingpage auswählen, der du die Erlebniswelt zuweisen möchtest.

Solltest du noch keine Kategorie/Landingpage erstellt haben, sieh dir einfach folgendes Video von Shopware an:

Nachdem du das Layout zugwiesen hast empfehlen wir dir die Erlebniswelt noch am rechten oberen Bildschirmrand zu speichern. Nun kannst du dir den Slider live ansehen.

Hinweis:

Solltest du den Slider bei dir nicht im Shop sehen, empfehlen wir dir einmal den Cache zu leeren. Wie das genau funktioniert, erfährst du in unserem Cache Beitrag.

4. Sektionen: Empfehlenswerte Arbeitsweise

Je mehr Blöcke du erstellst, desto schneller kann es passieren, dass du die Übersicht im Layout Editor verlierst. Aus diesem Grund empfiehlt es sich mit Sektionen zu arbeiten und diese entsprechend zu benennen.

So können mehrere Blöcke in eine Sektion gepackt und zusammengefasst werden.

Shopware 6 Erlebniswelten - Sektion Einstellungen

Mit Klick auf das Kachel-Symbol links neben dem Slider Block öffnen sich am rechten Rand die Sektionseinstellungen. Auch hier kannst du wie bei den Blöcken einen Namen hinterlegen. Ebenfalls lassen sich CSS-Klassen speichern.

Mit dem Größenmodus kannst du entscheiden, ob eine Sektion auf die volle Bildschirmbreite gestreckt oder zentriert werden soll.

Hintergrundfarbe, -bild und Bildmodus verhalten sich hierbei identisch wie bei den Blöcken.

Doch wann sollte ich nun eine Sektion verwenden?

Das bleibt eigentlich ganz dir überlassen. Dich hält niemand davon ab alle Blöcke in eine Sektion zu packen. Wir empfehlen dir jedoch das ganze thematisch zu gestalten.

Bspw. bekommt unser Slider Block eine eigene Sektion. Möchten wir mobil jedoch keinen Slider, sondern ein Bild anzeigen, würden wir den zweiten Bilder Block mit in die Sektion des Sliders packen. Da dieser mobil anstelle des Sliders angezeigt werden soll. Wie genau du responsive Blöcke erstellst, erfährst du im Abschnitt Responsive Erlebniswelten bauen bauen

Zunächst klicken wir auf den blauen „Plus-Button“, um direkt unter dem Slider Block ein Bild Block hinzuzufügen.

Shopware 6 Erlebniswelten - Sektionen

Hinweis:

Weitere Sektionen kann man mit dem grauen „Plus-Button“ hinzufügen.

Wir wählen in der rechten Menüleiste den Block „Bild, gestreckt“ aus und ziehen ihn unter den Slider Block.

Das ganze würde dann in etwas so aussehen:

Shopware 6 Erlebniswelten - Mehrere Blöcke

Nun hätten wir eine Einleitungssektion, die wir entsprechend nennen könnten.

An dieser Stelle möchten wir dir den Navigator näherbringen. Mit Klick auf die drei Ebenen öffnet sich in der Seitenleiste folgendes Menü:

Shopware 6 Erlebniswelten - Navigator

Der Navigator ist eine Übersicht deiner bisher erstellten Blöcke und Sektionen. Blöcke lassen sich hierbei ganz einfach per Drag & Drop vertauschen und Sektionen mit den drei Punkten verschieben. Löschen und duplizieren ist ebenfalls möglich.

5. Responsive Erlebniswelten bauen

Zugegeben, in den Shopware 5 Einkaufswelten fanden wir die Responsiveness etwas besser gelöst. Shopware 6 vertraut mit den Blöcken auf ein repsonives Design, so sehen alle verwendbaren Blöcke auch mobil super aus. Möchte man jedoch mobil andere Blöcke als auf der Desktop Version verwenden, muss man notgedrungen auf CSS-Klassen zurückgreifen.

Wir zeigen dir wie man Blöcke ab bestimmten Bildschirmgrößen ein- bzw. ausblenden kann.

Hierzu greifen wir auf unser Beispiel aus dem Abschnitt Sektionen: Übersichtliche Arbeitsweise zurück.

Wir haben nun einen Slider Block und einen sich darunter befindenden Bild Block. Für beide Blöcke müssen wir nun CSS-Klassen hinterlegen. Wir greifen hierbei auf die Bootstrap Klassen zurück, da diese standardmäßig mit jeder Shopware 6 Installation kommen.

Es gibt insgesamt vier Typen:

Small (sm) für Smartphones,
Medium (md) für kleine Tablets,
Large (lg) für mittelgroße Tablets,
Extra Large (xl) für Desktop

Dazu gibt es zwei, wir nennen sie mal, „Helper-Typen”:

Block (Einblenden)
None (Ausblenden)

Daraus lassen sich mit dem Keyword „d-“ (für display) unterschiedliche Kombinationen erstellen:

Nur am Desktop anzeigen:
d-none d-xl-block

Nur an mittelgroßen Tablets anzeigen:
d-none d-lg-block d-xl-none

Nur an kleinen Tablets anzeigen:
d-none d-md-block d-lg-none

Nur an Smartphones anzeigen:
d-md-none

Es gibt noch viele weitere Kombinations-Möglichkeiten. Da wir den Slider für alle Endgeräte, die größer als ein Smartphone sind, anzeigen möchten, verwenden wir für den Slider Block folgende Klasse:

d-none d-md-block

Da wir den Bild Block nur Smartphone Usern zeigen möchten, verwenden wir hier:

d-md-none

Hinweis:

Achte auch darauf den Blöcken, falls nötig, jeweils eigene Bilder zuzuweisen, ansonsten können deine Bilder sehr schnell unpassend und zugeschnitten aussehen. Solltest du Probleme haben oder suchst jemanden der moderne Erlebniswelten für dich erstellt, freuen wir uns jederzeit auf deine Anfrage.

6. Verwendung von Erlebniswelten

Verwendung von Erlebniswelten? Kann man sie auch falsch verwenden? Nun ja, sagen wir mal es gibt zwei verschiedene Wege eine Erlebniswelt zu verwenden.

Einerseits hast du die Möglichkeit für jede Kategorie eine eigene Erlebniswelt zu erstellen und zuzuweisen. Bei 100 Kategorien würden das dementsprechend auch 100 Erlebniswelten bedeuten. Du kannst jedoch auch eine Erlebniswelt als Vorlage für jede der 100 Kategorien nehmen. So sparst du dir eine Menge Arbeit bei der Erstellung der Layouts.

This just makes sense - Meme

Der Content deines Layouts lässt sich ebenfalls dynamisch über die Kategorien steuern. So handelt es sich um ein einheitliches Kategorie Layout, bei dem lediglich der Inhalt angepasst wird. Daher ist es sehr empfehlenswert eine einzige Erlebniswelt für seine Kategorien zu verwenden. Dies unterstützt ebenfalls den einheitlichen Look deines Shops.

Wie gehen wir also vor? Nach der Erstellung deiner Erlebniswelt begeben wir uns zu:

Kataloge > Kategorien

und wählen die Kategorie aus, der wir die Erlebniswelt zuweisen möchten. Du hast den direkten Weg der Zuweisung über die Erlebniswelt schon kennengelernt. In der Kategorie selbst ist es jedoch ebenfalls möglich ein Layout zuzuweisen.

Tipp:

Bei mehreren Kategorien empfehlen wir dir jedoch die Zuweisung direkt über die Erlebniswelt vorzunehmen. Das geht deutlich schneller. Sei dir jedoch im Klaren, dass nun derselbe Inhalt (Text und Bilder) auf jeder deiner Kategorien zu sehen ist, den du in der Erlebniswelt hinterlegt hast.

Haben wir die gewünscht Kategorie ausgewählt navigieren wir zum Tab Layout.

Shopware 6 Kategorie - Tab Layout

Hier weisen wir mit dem Button Layout zuweisen unsere Erlebniswelt zu. Ist dies getan solltest du nun im selben Tab eine Kurzform deiner Erlebniswelt sehen. Wir haben hierfür eine Kategorieseiten-Erlebniswelt mit einem einfachen Produkt-Listing, einem Text und einem Bild Block erstellt.

Mit dieser Zuweisung bist du nun in der Lage das Layout der Erlebniswelt zu verwenden und den Inhalt, sowie die einzelnen Einstellungen der Blöcke und Elemente flexibel auf diese Kategorie anzupassen. Keine Sorge, der ursprüngliche Inhalt der Erlebniswelt wird hierbei nicht verändert. Wir passen lediglich Text, Bild und Einstellungen in dieser Kategorie an.

Mit dieser Technik kannst du bspw. SEO-Texte und Kategoriebilder dynamisch auf jeder Kategorie anpassen, ohne jedes Mal eine eigene Erlebniswelt erstellen zu müssen.

Hinweis:

Übrigens, hast du schon unseren Shopware 6 SEO-Ratgeber gelesen? Dort findest du 12 hilfreiche Tipps, wie du die SEO deines Shopware Shops direkt verbessern kannst.

Shopware 6 Kategorie - Layout Anpassung

Durch das Speichern der Kategorie wird schließlich der neu hinterlegte Inhalt des Layouts automatisch für die jeweilige Kategorie übernommen.

7. Unsere Kritik an den Erlebniswelten

Zusammenfassend sind die Erlebniswelten in Shopware 6 wirklich eine feine Sache. Shopseiten, Landingpages, Kategorieseiten und Produktseiten lassen sich mit dem neuen Layout Editor wunderbar und in Windeseile ohne große Programmierkenntnisse erstellen.

Die Möglichkeit responsive Bilder einzubauen war in den Shopware 5 Einkaufswelten jedoch ein wenig nutzerfreundlicher gelöst. So mussten damals keine separaten CSS Klassen eingebunden werden. In Shopware 6 können die Erlebniswelten durch die vielen Blöcke in den jeweiligen Sektionen schnell unübersichtlich werden. Aus diesem Grund empfehlen wir Euch eine einheitliche Namensgebung der einzelnen Blöcke und Sektionen zu verwenden, um den Überblick nicht zu verlieren.

In diesem Sinne wünschen wir dir viel Erfolg beim Gestalten deiner neuen Erlebniswelten!

Luca Hollenbach
Entwickler und Content-Autor bei Atloss. Süchtig nach Shopware, Musik, Sushi und Tacos.
© 2022 Atloss. All rights reserved.
© 2022 Atloss. All rights reserved.