2. Kapitel: Erlebniswelten erzeugen

Die neuen Designtools von Shopware 6 zur Gestaltung der Inhalte des Onlineshops sind übersichtlich in der Rubrik Inhalte gelistet, wo sie in Erlebniswelten, Medien und Themes unterteilt sind. Hier dreht sich alles darum, Ideen oder Gestaltungsrichtlinien zur Einbindung von Designelementen wie Logos, Farben, Schriften, Bildern und weiteren Attributen in ein Konzept zu bringen. Für die Verwaltung des Contents ist es empfehlenswert, mit den Voreinstellungen in den sogenannten Themes zu beginnen.

Für Shopware 6 stehen zudem viele Plugins für das Entwerfen suchmaschinenoptimierter Gestaltungselemente und erweiterter Erlebniswelten-Features für komplexes Storytelling zur Verfügung. Dieses Handbuch bezieht sich auf diejenigen Funktionen, die bereits in der Community Edition verfügbar sind.

Erläuterung: Storytelling ist eine Erzählmethode, mit der explizites, aber vor allem implizites Wissen in Form von Leitmotiven, Symbolen, Metaphern oder anderen Mitteln der Rhetorik weitergegeben wird. Es wird hauptsächlich in digitalen Medien angewandt, hat aber eine lange Tradition.

2.1 Themes

Ein Theme legt für den jeweils ausgewählten Verkaufskanal grundsätzliche Angaben zum Erscheinungsbild des Shops fest. Themes können unter Inhalt > Themes geöffnet werden. Im Demoshop von Shopware 6 ist zuerst nur ein Default-Theme angelegt. Das Schloss-Symbol zeigt an, dass es sich hierbei um ein nicht löschbares Standardtheme handelt. Der Punkt unten links in der Kachelansicht gibt darüber Aufschluss, ob das Theme schon einem Verkaufskanal zugewiesen wurde. Im Demoshop von Shopware 6 ist dies bereits der Fall, was an dem grün eingefärbten Punkt unterhalb der Themevorschau erkennbar ist. Die Sortierung der Themes lässt sich über das Drop-down-Menu oben rechts festlegen.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.1.1 Themes anlegen

Dem Theme in der Kachelansicht lässt sich durch Mouseover und einen Klick auf den darüber erscheinenden Drei-Punkte-Button ein neues Vorschaubild aus den Medien zuweisen. So kann mehreren Themes ganz einfach ein eigenes Motiv in den Kachelansichten zugewiesen werden. Auf demselben Weg lässt sich die Vorschau wieder zurück ändern.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Durch einen Klick auf den gestrichelten Button rechts lassen sich Themes alternativ in tabellarischer Darstellung anzeigen. Ebenfalls über den Button lässt sich die Kachelansicht wiederherstellen. Auch in der Tabelle lässt sich das Theme über den Drei-Punkte-Button weiter bearbeiten.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Der Menüpunkt Duplikat erstellen ermöglicht eine Vervielfältigung von Themes die, je nach Verwendungszweck, entsprechend konfiguriert werden können. Nach dem Eingeben des Namens in diesem Fenster lässt sich eine neue Bezeichnung des Themes einfügen. Ein Klick auf den Button Duplikat anlegen öffnet ein neues Theme.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.1.2 Theme-Farben

In der Maske des neuen Themes besteht zunächst die Möglichkeit, den Grundelementen bestimmte Farben zuzuweisen. Zuerst sollten unter Theme colours die sogenannten Primärfar- und Sekundärfarben festgelegt werden, die sich im responsiven Theme in allen Überschriften bzw. Links wiederfinden werden. Die Farbe kann entweder im Hexadezimal-Code angegeben werden, oder aber über eine Pipettenfunktion durch Auswahl der Wunschfarbe im geöffneten Farbfenster direkt ausgewählt werden.

Erläuterung: Mit dem Hexadezimal-Code werden Farbwerte im RGB-Farbraum angegeben. Er wird vorrangig in Websites verwendet. Pro Farbwert werden zwei Ziffern der drei Grundfarben Rot, Grün und Blau angegeben. Um den Farbanteil der Grundfarbe zu bestimmen, werden die Ziffern von 0 – 9 verwendet. Anschließend werden die Buchstaben A – F verwendet. A steht in diesem Fall für 10, B für 11 usw. F steht für 16. Daraus ergeben sich 265 Zustände pro Farbwert (16 x 16 = 256), also 8 Bit pro Farbe. Insgesamt lassen sich 16.777.216 Farben definieren (256 x 256 x 256 = 16.777.216).

Über die Eingabefelder Border und Background lassen sich Rahmen und Hintergründe einfärben. Diese beziehen sich auf die Hintergründe der Storefront sowie die Rahmen des Produktlistings.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.1.3 Farben für Statusmeldungen

Genau wie in den Theme colours werden unter Status messages die Farben für Statusmeldungen angelegt. Die Hervorhebung dieser Felder ist wichtig für eine eindeutige Kommunikation mit dem Kunden und kann hier sehr gut mit der allgemeinen Farbauswahl abgestimmt werden.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.1.4 Typografie

Die gewählte Schriftenfamilie sowie die Zuweisung der Schriftschnitte und deren Farben unter Typography zählt ebenfalls zu den wichtigen Voreinstellungen für das Design des Shops.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.1.5 Farben für Preise und Kaufbuttons

Der Bereich E-Commerce bezieht sich auf den Preis und den Kaufen-Button, für die hier wieder entsprechende Farben zugewiesen werden können.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.1.6 Logos und Icons

Unter Media werden die verschiedenen Logos und Icons des Webshops für unterschiedliche Auflösungen hochgeladen. Ist diese größer als 991 px, wird das Desktop-Logo angezeigt. Zwischen 991 px und 767 px wird das Tablet-Logo angezeigt. Ist die Auflösung kleiner als 767 px Breite, wird das Mobile-Logo angezeigt. Das Favicon wird im Browser vor der URL angezeigt und das App & Share icon wird beispielsweise als Vorschau angezeigt, wenn die Seite in Social Media geteilt wird. Logos und Icons werden unter Inhalte > Medien in einer gewöhnlichen Ordnerstruktur verwaltet (s. Kapitel 3, „Medien verwalten”).

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.1.7 Theme speichern

Wenn alle Einstellungen vorgenommen worden sind, muss das Theme gespeichert werden. Durch einen Klick auf das Icon oben links ist mit der Rückkehr zur Übersicht nun das zusätzliche Theme zu sehen.

Wichtiger Hinweis: Die Zuweisung eines Verkaufskanals erfolgt über die Konfiguration der Storefront auf die in Kapitel 9, „Verkaufskanäle nutzen”, eingegangen wird.

Erläuterung: Als Storefront wird das virtuelle Schaufenster in einem Onlineshop bezeichnet. Dies sind die Benutzeroberflächen, die die Waren und Dienstleistungen abbilden. Darunter fallen die Übersichten innerhalb von Produktkategorien und Suchen sowie Produktdetailseiten.

2.2 Erlebniswelten

Die Erlebniswelten in Shopware sind ein sehr leistungsfähiges Instrument, das Onlinehändlern erlaubt, direkt im Shopware Backend herausragende Einkaufserlebnisse zu gestalten. Dabei lassen sich Marketing-Strategien wie Storytelling und Suchmaschinenoptimierung (SEO) auch ganz ohne Programmierkenntnisse responsiv für alle Endgeräte umsetzen.

Alle Gestaltungselemente lassen sich jeweils als individuelles Layout unabhängig voneinander anlegen und einzeln zuweisen. Gleichwohl ist es möglich, ein Layout für verschiedene Bereiche mehrfach zu verwenden und hier die wechselnden Inhalte mittels Data Mapping zu steuern. Die Vorgehensweise wird in den einzelnen Kapiteln genauer erläutert.

Erläuterung: Data Mapping wird der Prozess genannt, der Datenelemente zwischen unterschiedlichen Datenmodellen abbildet. Data Mapping wird als ein erster Schritt für verschiedene Aufgaben der Informationsintegration benötigt: Datentransformation oder Daten Mediation zwischen einer Datenquelle und einem Datenziel.

2.2.1 Typen von Erlebniswelten

In Shopware 6 werden drei Typen von Erlebniswelten unterschieden. So gibt es die Möglichkeit, Erlebniswelten für den Einsatz auf den Standardseiten (Shopseiten), auf Kategorieseiten und in Form von Landingpages (spezielle Shopseiten) verwenden. Die Gestaltung von Erlebniswelten funktioniert für alle drei Verwendungsweisen analog.

2.2.2 Erlebniswelten für Shop- und Kategorieseiten

Typischerweise werden Erlebniswelten für die Ausgestaltung aller Seiten eingesetzt. Auf diese Weise können Kategorie- und Shopseiten mit Hilfe von Bildern, Slidern, Filmen, Textelementen, Product-Streams und weiteren Elementen als emotional ansprechende „Schaufenster” gestaltet werden. Produkte in Kategorien und Unterkategorien lassen sich so hervorragend pflegen und präsentieren. Zusätzlich besteht auch die Möglichkeit, eigene, shop- oder markenspezifische Seiten anzulegen, um sich vom Standard abzusetzen. Shopseiten dienen in erster Linie der Ausgestaltung von Serviceseiten wie z. B. AGB, Impressum oder Datenschutzerklärung.

Erläuterung: Ein Slider ist eine Funktion, mit deren Hilfe eine Reihe von Bildern und / oder Texte in einem bestimmten Bereich nacheinander angezeigt werden können. Die Inhalte können meist automatisch, per Klick- oder Wischfunktion überblenden oder nacheinander eingeschoben werden.
Product-Streams sind technisch gesehen Suchfilter, die der Shopbetreiber vordefinieren kann, um Kunden eine bestimmte Auswahl von Artikeln anzeigen zu lassen. Product-Streams können unter anderem auf Kategorieseiten, Produktdetailseiten und in Einkaufswelten angezeigt werden.

Die Shopware 6 Konfigurationsoberfläche für Erlebniswelten bietet mit dem Designer die Möglichkeit, in einem sehr flexiblen, in modulare Bausteine gegliederten Raster eine Erlebniswelt zu erstellen. Mithilfe der im Kategoriebaum zugeordneten Kategorie kann sie als Template zugewiesen werden. Im Frontend wird dann die Standard-Kategorieseite durch die neue Erlebniswelt ersetzt. Diese Vorgehensweise ermöglicht eine strukturierte Arbeitsweise, die Änderungen seitenübergreifend übernehmen lässt. Zudem lassen sich auch individuelle Anpassungen einzelner Seiten einfach und schnell vornehmen.

Erläuterung: Ein Template dient in der Datenverarbeitung zur Erstellung von Dokumenten oder Dokumentteilen. Sie stellt eine Art „Gerüst“ dar, das einen Teil des Inhaltes oder der Gestaltung des Dokumentes vorgibt. Durch Einsetzen der fehlenden Bestandteile wird die Vorlage zu einem vollständigen Dokument ergänzt.

2.2.3 Erlebniswelten als Landingpages

Eine weitere Einsatzmöglichkeit für Erlebniswelten bieten sogenannte Landingpages. Dabei handelt es sich um Seiten, die neben den Kategorieseiten und Standardseiten individuell hinzugefügt werden können. Der Besucher kann durch Web-Suche, Werbeanzeigen oder andere Marketing-Maßnahmen auf eine Landingpage des Shops stoßen. So können auch komplexe Content-Marketing-Strategien über Landingpages mithilfe der Erlebniswelten umgesetzt werden.

Eine Landingpage kann als neues Layout angelegt werden. Als solche erhält sie eine eigene URL, anhand derer sie innerhalb des Shops verlinkt werden kann und sich als Zielseite für den Besucher einsetzen lässt.

2.3 Mit Erlebniswelten arbeiten

In der Navigation auf der linken Seite unter Inhalt > Erlebniswelten oder mithilfe der Tastenkombination G + E lässt sich die Übersicht der unterschiedlichen Typen von Layouts als Blockansicht aufrufen. Unter den Rubriken Shopseiten, Landingpages oder Kategorieseiten werden neue Layouts definiert und zentral verwaltet. So wie bei der Bearbeitung der Themes kann auch hier über den gestrichelten Button in die Tabellenübersicht gewechselt werden. Im Dropdown Menü oben rechts kann die Liste nach Erstellungsdatum oder Bearbeitungsdatum sortiert werden. Es besteht die Möglichkeit, über den Reiter links alle Typen einen Überblick über alle vorhandenen Layouts zu bekommen. Ebenso kann auch über die Suchfunktion nach einem Layoutnamen gesucht werden.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.3.1 Erlebniswelten im Frontend aufrufen

Im Demoshop von Shopware 6 sind bereits einige nicht veränderbare Standard-Layouts vorbereitet, die entweder übernommen oder durch andere, neu angelegte, auf individuelle Bedürfnisse angepasste Templates ersetzt werden können. Für den Shopbetreiber interessant sind die vorbereiteten Seiten insofern, als sie durch das Vergleichen der Anzeige im Frontend und den Aufbau im Backend Aufschluss darüber geben, wie bestimmte Inhaltselemente beispielsweise angeordnet werden können. Im Folgenden ist in den Kategorien der Menüpunkt „Sports, Baby & Beauty” in der Seitennavigation des Frontends ausgewählt, die den übersichtlich aufbereiteten, dreispaltigen Aufbau einer Kategorieseite demonstriert.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.3.2 Layout im Backend auswählen

An dieser Stelle wird am Beispiel der Kategorie „Sports, Baby & Beauty” zunächst oberflächlich auf die Zuweisung eines Layouts eingegangen, um das Verständnis für die Navigation zwischen Frontend und Backend zu erleichtern.

Um eine geänderte Einstellung im Backend gleich im Frontend nachvollziehen zu können, wird das zugewiesene Standardlayout durch ein anderes ersetzt. Die Zuweisung erfolgt in der Navigation links unter Kataloge > Kategorien. Im Demoshop von Shopware 6 ist bereits ein Kategoriebaum vorbereitet, der im Backend unter dem Aufklappmenü Catalogue#1 unter anderem den Kategoriezweig „Sports, Baby & Beauty” einschließlich weiterer Unterkategorien enthält. Hier wurde bereits einer der beiden voreingestellten Standards aus den Kategorieseiten der Erlebniswelten mit dem Namen „Default category layout with sidebar” zugewiesen. (Das Anlegen und Verwalten der Kategorien wird in Kapitel 4, „Kategorien definieren” behandelt.)

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.3.3 Neues Layout zuweisen

Mit einem Klick auf den Button Layout ändern öffnet sich ein Auswahlfenster mit Templates in einer Kachelansicht. Hier werden alle Layouttypen gelistet und können durch Scrollen oder über die Suchfunktion oben links gefunden werden. Hier ist auch das zweite Standard-Layout für eine Kategorieseite mit dem Namen „Default category layout” zu finden. Ein Häkchen kennzeichnet nach der Auswahl, dass dieses Template übernommen und gespeichert werden kann.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Nach dem Speichern kann die Kategorie im Frontend aufgerufen und aktualisiert werden.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Nach dem Aktualisieren der Seite im Browserfenster des Frontends über den Diese-Seite-neu-laden-Pfeil oben links neben der URL Zeile — oder alternativ durch betätigen der Taste F5 — erscheint das neu gewählte Layout.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Wichtiger Hinweis: Soll ein bestehendes Layout geändert werden, kann auch ein Weg direkt aus der Template-Zuweisung in den Kategorien über Layout-Zuweisung > Im Designer bearbeiten gewählt werden.

2.3.4 Neues Layout erstellen

Zurück in der Übersicht der Erlebniswelten über Inhalt > Erlebniswelten kann über den Drei-Punkte-Button eine Vorschau ausgewählt werden. Über die Option Duplizieren wird direkt ein gleiches Layout hinzugefügt, dieses hat zur besseren Übersicht bereits Vorschaubilder aus den Medien des Demoshops in der Kachelansicht verknüpft und ist hierdurch gut von den Standard-Thumbnails zu unterscheiden.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Alternativ kann ein neues Layout durch einen Klick auf den Button Neues Layout anlegen erzeugt werden. Über diesen Weg öffnet sich ein Dialogfenster mit einer Auswahl der unterschiedlichen Seitentypen.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Nach einem Klick auf die Kategorieseite erscheint die Möglichkeit, zwischen zwei Sektionen zu entscheiden.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Besteht bereits eine Skizze (s. Kapitel 1, „Vorbereitungen treffen”), kann der planmäßige Aufbau der Seite beginnen. Die Sidebar bietet sich z. B. an, um dort eine Kategorienavigation oder Filter zu platzieren. Bei der späteren Bearbeitung können weitere Sektionen hinzugefügt werden, die nicht vom gleichen Layouttyp wie die initiale Auswahl sein müssen. Die unter Punkt 2.3.1 Erlebniswelten im Frontend aufrufen ausgewählte Kategorie dient als Beispiel für eine Sektion mit einer Navigation in der Sidebar. Nach der Auswahl kann das Template unter einem neuen Namen gespeichert und in den Erlebniswelten beliebig konfiguriert werden.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.3.5 Layout konfigurieren

Durch eine Mouseover-Bewegung zeigt das Duplikat der Kategorieseite eine blaue Markierung und kann durch einen Klick auf die Fläche direkt in den Erlebniswelten geöffnet werden. Die Arbeitsumgebung vergrößert sich auf die maximale Fläche zur Anordnung von Gestaltungselementen, indem sich die Leiste der Administration auf die Anzeige der Icons beschränkt. Diese Platzerweiterung zeigt sich auch auf der rechten Seite, auf der sich erst nach dem Anklicken eines der vier Symbole ein Drop-down-Menü aufklappt. Durch erneutes Klicken kann dies wieder verborgen werden.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

In der oberen Leiste zeigen sich nun die Symbole für eines der wichtigsten neuen Features von Shopware 6: die Anzeigemöglichkeiten für das responsive Design. Durch das Auswählen der Icons für Mobil- und Desktopvarianten wird über die jeweilige Anzeige veranschaulicht, auf welche Weise sich das Layout den verschiedenen Viewpoints automatisch anpasst.

In derselben Leiste ganz rechts befindet sich ein Seitensymbol, das nach der Auswahl direkt in den Bearbeitungsmodus wechselt. Hier kann das Layout direkt mit Inhalten wie Texten, Bildern oder Videos befüllt werden. Allerdings gilt auch hier die Empfehlung, sich auf die am Anfang erstellte Skizze von der Struktur des Angebots zu beziehen. Alle Templates, die in der Erlebniswelt erstellt werden, lassen sich inklusive des Produktlistings mehrfach zuweisen. So ist es möglich, unter Kataloge > Kategorien (siehe Kapitel 4, „Kategorien definieren”) beliebig viele unterschiedliche Kategorien anzulegen, denen von dort aus immer ein einziges Template aus den Erlebniswelten zugewiesen wird. Der Inhalt der Kategorieseiten wird dann in der Kategorie selbst mit Inhalten befüllt.

2.3.5.1 Layout Basis-Informationen

Mit dem Wechsel zurück auf das Desktop-Symbol kann nun die Navigation durch die verschiedenen Einstellungsmöglichkeiten beginnen. Die duplizierte Kategorieseite beinhaltet bereits die Platzhalter für ein Kategoriebild mit Kategorietitel und -beschreibung, eine Seitennavigation und ein Produktlisting. Mit einem Klick auf das Einstellungssymbol rechts öffnet sich das Drop-down-Menü Einstellungen und mit einem Klick auf den Pfeil der Abschnitt Basis-Informationen. Hier wird als Erstes der Name des Templates gespeichert.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Darunter befindet sich ein über das Pfeilsymbol ausklappbares Listing Layout-Typ. Hier kann das Layout jederzeit als andere Vorlage definiert werden.

Die Einstellung darunter bietet die Möglichkeit, die in den Kategorieseiten eingepflegten Inhalte in einer Vorschau anzeigen zu lassen. Wird hier erneut der Kategoriezweig „Sports, Baby & Beauty” ausgewählt, werden das geladene Kategoriebild und der passende Text aus dieser Kategorie angezeigt. An dieser Stelle lässt sich in der Arbeit mit vielen Kategorien, die in der gleichen Optik aber mit unterschiedlichen Inhalten im Shop erscheinen sollen, eine Schnellvorschau über die Pflege der Kategoriebilder und -texte erhalten.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.3.5.2 Layout Block-Kategorien

Die Auswahl des Plus-Symbols auf der linken Seite öffnet das Drop-down-Menü Blöcke. Diese sind ebenfalls in Kategorien eingeteilt und bilden den wichtigsten Bestandteil der im Baukastensystem angelegten Funktionen in den Erlebniswelten. Wird aus der aufgeklappten Liste der Block-Kategorien beispielsweise der Menüpunkt Text & Bilder ausgewählt, erscheint auf der rechten Seite eine große Auswahl von Elementen, die auf verschiedene Weise zusammengefasst angeordnet sind. Diese lassen sich ganz einfach per Drag-and-Drop in den Sektionsbereich hineinziehen und dort ablegen. Im Fall des ausgewählten Templates wurde für den obersten Bereich der Website die Option Zwei Spalten, zentriertes Bild & Text verwendet. Um weitere Inhalte der Seite klar abzugrenzen, folgt eine neue Sektion, die sich an dem kleinen Layout-Icon auf der linken Seite ablesen lässt. Eine neue Sektion lässt sich mit dem Plus-Symbol in der Mitte hinzufügen. Durch Aktivierung einer Sektion über das Layout-Icon und Anklicken des Löschen-Symbols auf der rechten Seite lässt sich eine Sektion jederzeit wieder entfernen. Auch hier besteht wieder die Wahl zwischen einem Layout mit oder ohne Sidebar.

Um eine Gestaltungsänderung über einen Block der ersten Sektion vorzunehmen, wird das Element ausgewählt und gelöscht. Über die Block-Kategorie-Auswahl kann nun ein anderer Baustein verwendet werden, beispielsweise Drei Spalten, Bild & Text. Nach dem Verschieben in die Sektion wird der Block aktiviert und die Vorschau aus Kamera und Pflanze durch die entsprechende Auswahl von Medien ersetzt (siehe 2.3.5.3 Layout Element-Einstellungen). Nach dieser Zuweisung von Inhalt muss der Block — am besten unter einem individuellen und eindeutigen Namen — gespeichert werden. Dies erfolgt in dem Drop-down-Menü, das über das Zettel-Symbol aufgerufen werden kann. Unter diesem Reiter stehen auch die allgemeinen Konfigurationswerkzeuge zur Verfügung (siehe 2.3.5.8 Sektion-Einstellungen), mit denen sich die einzelnen Blöcke individuell anpassen lassen.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Welche Art von Blockelementen in die jeweilige Sektion eingefügt werden, hängt von der Auswahl des Layouttyps und der vorher skizzierten Struktur ebenso ab wie von den zur Verfügung stehenden Medien. In der Demoversion sind sieben verschiedene Block-Kategorien gelistet. Für die individuelle Ausgestaltung der Layouts sind zusätzlich zahlreiche Plugins erhältlich, beispielsweise die CMS-Erweiterungen für Shopware 6, die ein Bestandteil der Shopware Professional Edition sind und erweiterte Funktionen für die Erlebniswelten bereitstellen.

2.3.5.3 Element-Einstellungen Text und Bild

Die Auswahl eines Blocks erlaubt jeweils nur die Aktivierung eines der enthaltenen Elemente. Mit Klick auf das Zahnradsymbol im Bereich des Bildes öffnet sich ein Fenster für die Element-Einstellungen. Die in den vorgestalteten Blöcken eingebundenen Bilder dienen als Platzhalter und stehen für die Verknüpfung mit den Kategorien. Der entsprechende Pfad wird im Einstellungsfenster unter Datenzuordnung eingestellt. Wird dieser Pfad entfernt, ändert sich in der Eingabemaske das Feld in einen Vorschau-Platzhalter mit zwei Buttons. Unter dem oberen kann ein Bild von einem externen Verzeichnis geladen werden. Der untere Button öffnet direkt das in einer Ordner-Struktur angelegte Verzeichnis in Shopware 6 für die Verwaltung der Shop-Medien. Über die Administration lässt sich dieses Verzeichnis unter Inhalte > Medien öffnen. Die Pflege der Medien im Backend und wichtige Informationen zur Beschaffenheit der Bilder im Shop wird im Kapitel 3, „Medien verwalten”, behandelt.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Die in den Erlebniswelten in den Block-Kategorien angelegten Vorschaubilder dienen ebenfalls als Platzhalter und stehen für die Verknüpfung zur jeweiligen Kategorie, der das Template zugewiesen werden soll. Mittels Datenzuordnung, wenn ein Layout mehrfach für unterschiedliche Kategorien genutzt werden soll, werden die Kategoriebilder in den Kategorien selbst eingepflegt (siehe Kapitel 4, „Kategorien definieren”). Soll ein Bild jedoch als fester Bestandteil eines Layouts fungieren, wird es direkt in den Erlebniswelten durch die Element-Einstellungen mit dem Template verknüpft.

Die weiteren Einstellungen beziehen sich auf Anzeigeoptionen des Bildes. In der Eingabemaske für den Anzeigemodus können aus dem Aufklappmenü drei Möglichkeiten gewählt werden. Mit der Angabe „Standard” oder „Strecken” kann auch die Ausrichtung bestimmt werden, mit der Option „Füllen” besteht außerdem die Möglichkeit, eine Minimalhöhe zu bestimmen. Eine Größenbegrenzung hat ein Bildelement nicht. Es sollte aber darauf geachtet werden, dass ein Bild aus Performance-Gründen nicht zu groß ist. In den Demodaten wird beispielsweise ein ganzflächiges Bild mit einer Auflösung von 1280 x 528 px verwendet. Unter Link kann eine URL angegeben werden, auf die das Bild verlinken soll. Dies kann wahlweise im gleichen Tab oder in einem neuen Tab geschehen.

Nach Auswahl des Einstellungsrades auf dem Textfeld im Block rechts öffnet sich ebenfalls ein Fenster für Element-Einstellungen, das an den Kontext des Blockelements angepasst ist. Auch hier besteht die Möglichkeit, bei Mehrfachzuweisung in unterschiedlichen Kategorien eine Datenzuordnung herzustellen.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Die weitere Bearbeitung des Textes wird in diesem Fall in der jeweiligen Kategorie vorgenommen.

Wie bei einem Bildelement kann auch im Textelement der Text als fester Bestandteil des Layouts in die Erlebniswelten eingefügt werden. Bei Bedarf lassen diese sich zusätzlich gestalten. Die Textverarbeitungstools stehen dann direkt inline im Textfenster zur Verfügung, oder über das Einstellungsfenster, in dem der Text dann auch durch direkte Eingabe von HTML-Code hinterlegt werden kann.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Neben dem Einstellungsrad befindet sich in jedem Blockelement ein Symbol mit Pfeilen. Hier kann der Inhalt durch ein anderes Blockelement aus den Block-Kategorien ersetzt werden.

2.3.5.4 Element-Einstellungen Video

Die Zusammensetzung der Elementeinstellungen zu einem Video hängt davon ab, ob ein YouTube Video oder ein Vimeo Video hinterlegt werden soll. Wenn ein YouTube Link hinterlegt wird, können hier noch Einstellungen vorgenommen werden, wie genau das Video angezeigt werden soll. Ist der Erweiterte Datenschutzmodus aktiviert, werden laut YouTube keine Informationen von den Besuchern gespeichert, bis sie sich das Video ansehen. Zudem kann per Start und Endzeit noch genau ausgewählt werden, welcher Ausschnitt des Videos angezeigt werden soll.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Für Vimeo Videos kann zudem ausgewählt werden, in welcher Farbe die Navigation angezeigt und welche Informationen zum Video-Ersteller angezeigt werden sollen.

2.3.5.5 Element-Einstellungen Commerce

In den Einstellungen für Produktlisting-Elemente wird entschieden, wie das Produkt präsentiert werden soll. Zur Verfügung steht hier die Standardansicht, oder abweichend eine Ansicht mit großem Bild oder minimalem Text. Auch hier lässt sich wieder der Anzeigemodus des Produktbildes und auch die Ausrichtung in der Box festlegen.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.3.5.6 Element-Einstellungen Sidebar

In den Sidebar Blöcken, für die Navigation und Filter zur Verfügung stehen, sind keine eigenen Einstellungen notwendig. Sie werden automatisch durch den Inhalt des Sortiments befüllt. Wenn weitere Anpassungen gewünscht sind, gibt es hierfür auch entsprechende Plugins im Shopware Store https://store.shopware.com/.

2.3.5.7 Element-Einstellungen Formular

In den Elementeinstellungen ist zunächst das Formular auszuwählen, das angezeigt werden soll. Außerdem kann sowohl ein Titel als auch ein Bestätigungstext hinterlegt werden.
Über das Zahnrad werden dann die Empfänger-Adressen hinterlegt, die das ausgefüllte Formular erhalten.

Das Kontaktformular wird nach dem Ausfüllen durch einen Shopkunden per E-Mail an den Shopbetreiber gesandt. Für diese E-Mail steht in den E-Mail-Vorlagen eine entsprechende Vorlage mit dem Namen Kontaktformular bereit, die angepasst werden kann.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

2.3.5.8 Sektion-Einstellungen

Über das Anklicken des Sektions-Symbols auf der linken Seite öffnet sich automatisch die Einstellungsmaske rechts, die sich hinter dem Zettelsymbol verbirgt.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Um ein unkompliziertes Arbeiten zu ermöglichen, lassen sich ganze Sektionen an dieser Stelle duplizieren oder auch komplett löschen. Der Sektion in dieser Maske einen erklärenden Namen zu geben, hat den Vorteil, dass bei Veränderungen in Anzahl oder Gestaltung die Zuordnung nicht nur optisch, sondern auch über eine aussagekräftige Bezeichnung erfolgen kann.

Unter dem Namen besteht die Möglichkeit, CSS-Klassen hinzuzufügen. Bei der Verwendung mehrerer Klassen müssen deren Bezeichnungen durch ein Leerzeichen getrennt eingetragen werden.

Erläuterung: CSS steht für Cascading Style Sheets, was übersetzt „gestufte Stilvorlagen“ bedeutet. Es handelt sich dabei um eine Gestaltungs- und Formatierungssprache, mit der das Aussehen von HTML-Dokumenten bestimmt wird. Es geht also um Design oder Stil, nicht um den Inhalt einer Webseite.

Darunter lässt sich festlegen, ob ein verwendetes Bild in einer Sektion den gesamten Sektionsbereich ausfüllen soll, oder ob der Inhalt des Bildes, abhängig von seinem Seitenverhältnis, zentriert angezeigt werden soll. Es lohnt sich in jedem Fall, diese Entscheidungen auch immer wieder über die Anzeige des Responsiven Designs zu überprüfen.

Erläuterung: Beim Responsive Design (Responsive Webdesign) wird eine Internetseite je nach Bildschirmgröße und / oder Device anders dargestellt, um die Besucherfreundlichkeit zu gewährleisten. Webdesigner wählen diese Form, damit User eine Website unabhängig vom verwendeten Endgerät problemlos nutzen können. Responsives Webdesign mit der Angabe des Viewports gehört heute zum Standard beim Mobile Optimizing. Häufig wird dabei der Ansatz von „mobile first“ oder „Progressive” Enhancement gewählt.

Neben den Anpassungen von Bildmaterial kann der Hintergrund einer Sektion auch eingefärbt werden. Hierfür steht, ähnlich wie in den Themes, über das Anwählen des durchgestrichenen Kästchens eine Farbpalette zur Verfügung. Hier kann die gewünschte Farbe einfach aus dem Farbkreis entnommen werden. Die Farbe erscheint daraufhin als Vorschau mit entsprechendem Hexadezimalcode. Alternativ kann auch direkt ein Hexadezimalcode eingegeben werden.

Soll die gesamte Sektion außerhalb eines Blockelements ein Hintergrundbild erhalten, lässt sich dieses im nächsten Feld hochladen oder aus den Medien bestimmen. Diese Variante ist für die Ausgestaltung einer Seite durch aussagekräftiges Storytelling besonders interessant. Auch hier lässt sich im nächsten Auswahlfeld mit den Menüpunkten Auto, Beinhalten oder Füllen der Bildinhalt individuell anpassen.

2.3.5.9 Sektionen navigieren

Sind mehrere Sektionen angelegt und benannt, lassen sie sich nun ganz unkompliziert neu anordnen. Unter dem Stapel-Symbol auf der rechten Seite erscheinen jetzt die vorher benannten Sektionen mit den aufgelisteten Elementen, die sie beinhalten. Sie sind optisch durch Linien voneinander getrennt und lassen sich über den Drei-Punkte-Button weiter bearbeiten.

Shopware 6 Handbuch – 2. Kapitel: Erlebniswelten erzeugen

Über das Menü kann eine ganze Sektion verschoben, dupliziert und gelöscht werden. Unter dem Menüpunkt Einstellungen springt die Navigation zurück zur Einstellungsebene der Sektion. Hier können bei Bedarf der Name und der Layout-Typ geändert werden, oder es lässt sich die Vorschau einer anderen Kategorie angezeigt werden falls, wie im Demoshop der Fall, das Layout mehrfach zugewiesen wurde.

Wichtiger Hinweis: Wird in einer Sektion die Vorgabe Kategorieseite durch eine Shopseite oder eine Landingpage ersetzt, wird automatisch das Produktlisting aus der Sektion entfernt und alle anderen Sektionen werden ebenfalls an den neuen Typ angepasst. Wird diese Einstellung rückgängig gemacht, erscheint das Produktlisting wieder an oberster Stelle. Hier muss die Gestaltung der Elemente dann erneut überarbeitet werden.

Die einzelnen Blöcke einer Sektion lassen sich mit gehaltener Maustaste anfassen und an eine andere Position verschieben. Über das Dopplungs-Symbol auf der Anzeigeleiste lassen sich Blöcke durch einen Mausklick duplizieren, über das Löschen-Symbol entfernen. Dies erleichtert die Arbeit mit Sektionen, in die beispielsweise Blog-Inhalte eingepflegt werden sollen, so dass sie aus vielen gleichartigen Textelementen bestehen.

Blöcke lassen sich zudem durch einfaches Ziehen in andere Sektionen verschieben. Diese Möglichkeit lässt in kürzester Zeit die Neuanordnung eines Templates zu, ohne bereits vorgenommene Einstellungen erneut vornehmen zu müssen.

2.3.5.10 Block-Einstellungen

Indem die Vorschau eines Blockelements angeklickt wird, öffnen sich automatisch die Block-Einstellungen unter dem Zettel-Symbol. Um die Blöcke voneinander unterscheiden zu können, bietet es sich — wie bei den Sektionen — an, aussagekräftige Beschreibungen zu verwenden. Auch bei den Blöcken lässt sich eine Hintergrundfarbe verwenden oder ein Bild einpassen.

Über den seitlichen Pfeil lässt sich die Maske für das Layout eines Blocks öffnen. Neben der Möglichkeit, auch hier mit CSS-Klassen zu arbeiten, können hier die Abstände der Elemente zum Rahmen eines Blocks verändert werden.

Wir sind zertifizierte Shopware Experten

Shopware Solution Partner
Shopware Certified Template Designer
Shopware Certified Developer Advanced
Shopware Certified Developer

Als breit aufgestellte, professionelle Shopware Agentur haben wir mehr als 400 Kunden in mehr als 1.000 Projekten begleitet.
Wenn wir Ihnen bei Ihrem Shopware Projekt helfen können, kontaktieren Sie uns gerne bitte unter 0431 39479900 oder [email protected]

Wenn Sie auch mit uns zusammenarbeiten möchten, sprechen Sie uns gerne an.

Jetzt Kontakt aufnehmen!

Shopware 6 Demoshop Backend

Shopware 6 jetzt live testen!

In unserem Live-Demoshop können Sie Shopware 6 sofort und kostenlos testen!

Benutzer: demoshop
Passwort: demoshop2021

Shopware 6 Demo-Backend

Shopware 6 Demo-Frontend

Shopware 6 Buch

Das Shopware 6 Handbuch erscheint in Kürze als E-Book und Paperback

Wer das Shopware 6 Handbuch als Buch oder E-Book haben möchte, kann es demnächst bei Amazon bestellen.

Kontakt

Genug über uns – lassen Sie uns darüber sprechen, wie wir Ihnen helfen können.