Plugin: Einkaufswelten Advanced / Storytelling

Installation

Diese Erweiterung findest Du in unserem Shopware Store, der einfachste Weg, ein bestimmtes Plugin zu finden, ist die Suchleiste.
Nachdem Du den Bestellvorgang abgeschlossen hast, logge Dich in das Backend Deines Shops ein. Jetzt gehst du zu Konfiguration > Plugin-Manager > Meine Einkäufe. Du musst dich einloggen und auf die Schaltfläche Aktualisieren klicken. Die neue Erweiterung ist nun aufgelistet und kann installiert werden. Nach der Installation der Erweiterung gehst Du auf den Menüpunkt Installiert und aktualisierst die Übersicht. Jetzt kannst Du die Erweiterung aktivieren. Abschließend löscht Du unter Einstellungen > Cache/Performance > Shop-Cache löschen den Cache und aktualisierst das Backend.

Grundgedanke

Das Wichtigste direkt vorweg: Storytelling - also eine Geschichte erzählen - funktioniert hauptsächlich über Bilder. Also Fotos, Videos oder auch Illustrationen. Natürlich kann man, wie jeder Roman zeigt, große Emotionen und detailreiche Bilder im Kopf mit reinem Text erzeugen. Nur funktioniert dies nicht im Internet. Und schon gar nicht wenn man damit verkaufen möchte. Für einen Roman nimmt man sich stundenlang Zeit, um nach und nach in der Geschichte mit ihren Charakteren zu versinken. Die durchschnittliche Verweildauer eines Besuchers auf einer Website beträgt hingegen keine 20 Sekunden. Und wenn der erste Eindruck schon nicht zusagt, sind es sogar noch weniger!

Wir werden uns deshalb im Folgenden also primär mit Einkaufswelten-Bausteinen beschäftigen, die von Bildmaterial leben - Banner und Banner-Slider, Sideview-Element und Videos. Bilder werden von unserem Gehirn in Sekundenbruchteilen in Emotionen übersetzt. Genau an diesem Punkt können wir ansetzen und den Besucher in kürzester Zeit an unseren Shop fesseln. Dabei steht nicht das Sortiment selbst im Vordergrund, sondern vielmehr die Funktion der Produkte, wofür man diese einsetzt oder der Mehrwert den diese bieten. Und mit den weiterführenden Informationen und Inhalten, die wir mithilfe des Storytellings vermitteln, schaffen wir uns eine starke Markenidentität und animieren zur Wiederkehr in den Shop.

Überblick - Was ist zu tun?

Eine Story entwicklen:

• Was möchstest Du welcher Zielgruppe mit der Story vermitteln?
• Welche Geschichte möchtest Du erzählen?

Content zusammenstellen:

• Fotos / Videos beschaffen
• Texte / Informationen / Produkte zusammenstellen

Aufbau skizzieren:

• Was sollen die einzelnen Abschnitte beinhalten?
• Wie soll das Raster aussehen, auf dem Du Deine Story aufbaust?
• Wo sollen welche Elemente eingesetzt werden?
• Wie sollen sich die Elemente im Einzelnen verhalten?
• Wie soll Deine Einkaufswelt auf den unterschiedlichen Devices aussehen?

Umsetzung in Shopware:

• Einkaufswelt als „Typ: Storytelling“ anlegen
• Raster definieren, Kategorie zuordnen und Viewports festlegen
• Abschnitte anlegen und mit Content füllen
• Falls nötig für weitere Viewports duplizieren und anpassen

Eine Story entwicklen:

Erst einmal musst Du Dir kurz Gedanken über den grundsätzlichen Aufbau machen. Möchtest Du die Einkaufswelt in einzelne Fullscreen-Abschnitte aufteilen („Typ: Storytelling“) oder möchtest Du die Storytelling-eigenen Funktionen, wie Sideview und Quickview, in einer klassischen Einkaufswelt („Typ: Einkaufswelt“) mit Resize- / Fluid-/ Zeilen-Modus nutzen?

Eine generelle Faustregel, in welchem Fall man mit welchem Typ arbeiten sollte gibt es dabei nicht. Mit dem abschnittsweisen „Servieren“ der Inhalte beim Storytelling-Typ sind jedoch vor allem zwei Vorteile verbunden: Zum Einen prägen sich dem User Geschichten deutlich besser ein, wenn diese Häppchen für Häppchen serviert werden. Zum Anderen kann ich den Content so besonders gut in sinnvolle Abschnitte zusammenfassen. Als Beispiel ließe sich hier die kulinarische Einkaufswelt „Rezepte“ nennen, in der pro Abschnitt ein Rezept vorgestellt wird, jeweils mit den dazu passenden Produkten aus dem Store. Szenarien für solch abschnittsweises Erzählen gibt es viele, je nach Sortiment, welches angeboten wird. Um den Story-Charakter noch zu stärken macht es auch Sinn, sich über die Reihenfolge der Abschnitte Gedanken zu machen, so dass sich die einzelnen Abschnitte am Ende zu einer großen Story zusammenfügen. Wieder am Beispiel der „Rezepte“-Einkaufswelt: Hier wird durch ein komplettes Menü geführt. Zuerst kommen die Vorspeisen (Suppe und Salat), dann die Hauptspeise gefolgt vom Nachtisch und am Ende der Digestiv. Dem Ganzen geht nur ein kleiner Teaser voraus und im Mittelteil ist der Abwechslung halber ein Gewürz-Special eingeschoben.

Du solltest Dir also als allererstes überlegen, was ich überhaupt vermitteln möchte, und wem Du etwas vermitteln möchtest. Soll explizit ein Produkt oder Sortiment beworben werden? Möchtest Du einfach Dein Unternehmen bewerben, Deine Marken-Identität stärken? Sind Deine Kunden Endkunden oder bist Du B2B unterwegs? Welcher Altersklasse und Gesellschaftsschicht gehören Deinen Kunden an?

Eine logisch aufgebaute Story lässt sich für viele Produkte entwickeln, nicht nur in den eh schon emotional aufgeladenen Sortimenten wie Fashion, Kulinarik, Spielzeug, etc.. Selbst vermeintlich „trockene“ Produkte wie technische Geräte, Maschinen oder ähnliches heben sich mithilfe von Storytelling von der Konkurrenz ab. Du produzierst und verkaufst seit vielen Jahren hochwertiges Werkzeug „Made in Germany“? Warum nicht genau darauf eingehen? Führe Abschnitt für Abschnitt durch die Firmengeschichte und sorge dafür, dass die Kunden Dich nicht nur mit hoher Qualität verbinden, sondern auch mit Tradition, Beständigkeit, Ehrlichkeit und Vertrauen. Du produzierst Stahlteile für die Autoindustrie? Selbst im B2B-Bereich lässt sich die eigene Marke mit Storytelling hervorheben, zum Beispiel, indem Du Deine Kunden durch die Produktion führst, von der sorgfältigen Auswahl des Rohmaterials bis zum Präzisions-Finish.

Im Nachfolgenden werden wir uns aufgrund eben dieser Vorteile vor allem mit dem Einkaufswelten-Typ „Storytelling“ beschäftigen.

Das ist zu tun:

• Was möchtest Du vermitteln?
• Was soll der Zwecke der Story sein?
• Wer ist Deine Zielgruppe?
• Mit was für einer Story kannst Du Deine Zielgruppe erreichen?

Bildmaterial und Content zusammenstellen

Storytelling nützt natürlich nur wenig wenn man gar nicht das dafür nötige Bildmaterial hat. Zuerst musst Du also zu Deinen Produkten bzw. Deiner Story passende Bilder besorgen. Optimal wäre natürlich, wenn man Stimmungsbilder hat, in denen die Produkte selbst auch auftauchen. Die Wenigsten allerdings werden das nötige Kleingeld haben, um einen Fotografen zu beauftragen, der die eigenen Produkte so inszeniert. Da ist man schnell bei einigen tausend Euro. Wenn Du keine selbst produzierten Produkte verkaufst, ist es immer einen Versuch wert, den Hersteller zu kontaktieren und nachzufragen, ob dieser entsprechendes Bild- oder gar Video-Material hat und es zur Verfügung stellt.

Eine Alternative dazu sind Stockfotos/-videos. Hier gibt es eine Menge Anbieter, die zig Millionen Fotos im Angebot haben. Zu den größten und bekanntesten zählen zum Beispiel:

• istockphoto.com
• shutterstock.com
• fotolia.com

Die Preise variieren dabei je nach Qualität und Größe des Materials und Art der Bezahlung (Credits oder Abo) erheblich, von weniger als einem Euro bis hin zu mehreren hundert Euro pro Bild.

Eine weitere sehr gute Möglichkeit sind komplett kostenlose, kommerziell nutzbare Bilder. Es gibt mittlerweile dutzende Websites die diese Bilder sammeln und zur Verfügung stellen und die Qualität steht den kommerziellen Anbietern in nichts nach. Aus ästhetischer Sicht sind die dort verfügbaren Bilder häufig sogar deutlich moderner und spannender. Der Nachteil ist, dass diese Seiten meist schwerer zu durchsuchen sind, ein deutlich geringeres Angebot haben, und man selten ganze Serien von Bildern findet, die aus einem Shooting stammen und dementsprechend aufeinander abgestimmt sind. Zu den bekannteren zählen dabei:

• unsplash.com
• pexels.com
• gratisography.com

Zudem gibt es mittlerweile auch eine Menge Übersichtsseiten, die eben solche FreeStock-Seiten sammeln (z.b. thestocks.im). Die meisten Bilder auf diesen Seiten unterliegen der Creative Commons Zero (CC0) -Lizenz, sind also komplett frei kommerziell nutzbar. Einige hingegen benötigen eine „Attribution“, der Urheber muss also genannt werden. Infos dazu gibt es auf den jeweiligen Seiten.

Übrigens: In unserem Demostore (shopwaredemo.de) findet sich eine Mischung aus allen Möglichkeiten; dort findet man Bildmaterial, welches uns Hersteller zur Verfügung gestellt haben neben kommerziellen Stockbildern und FreeStock-Photos.

Aber welche Motive benötigst Du überhaupt? Mit welchen Bildern schaffst Du es, den Kunden emotional zu packen? Das hängt natürlich stark von den Produkten und der Zielgruppe ab: Mit welchen Emotionen, mit welchen Werten werden die Produkte assoziiert? Wie alt ist Deine Zielgruppe? Welchen Lebensstil hat diese?

Es geht dabei wohlgemerkt nicht um (freigestellte) Produktbilder. Diese sind für Listings und Detailseiten wichtig, aber nicht unbedingt für das Storytelling. Beispielhaft können wir das einmal an den beiden Produkt-Kategorien „Höhenluft & Abenteuer“ und „Kochlust & Provence“ aus unserem Demostore durchspielen. Mit der „Höhenluft“ sollen Skier, Snowboards und die dazu passende Ausrüstung beworben werden, mit der „Kochlust“ Fisch, Gewürze und weitere kulinarische Spezialitäten.

„Höhenluft & Abenteuer“: Ski & Snowboard verbindet man mit Action, Adrenalin, Spaß, gemeinsames Erleben mit Freunden, aber auch Mut, Freiheit, Energie. Die Zielgruppe ist eher jünger und liebt den Adrenalinrausch. Entsprechend haben wir auch das Bildmaterial ausgewählt - Actionbilder mit hoher Dynamik, Menschen, die sich freudestrahlend im Arm liegen, Bergpanoramen mit Weitblick, satte kontrastreiche Farben.

„Kochlust & Provence“: Im Gegensatz dazu verbindet man kulinarische Spezialitäten eher mit Ruhe & Genuss, Entspannung, Sinnlichkeit, sich mit dem Partner oder guten Freunden einen schönen Abend machen, oder sich auf eine kulinarische Reise begeben, fremde Länder mit dem Gaumen erkunden. Aber auch Gesundheit, Natürlichkeit, Qualität und Tradition. Und diese Assoziationen versuchen wir hier entsprechend mit sehr ruhigen Bildern von Zutaten oder hübsch angerichteten Gerichten herzustellen, die schon fast an Stillleben erinnern. Aber ebenso Menschen, die gemeinsam Freude am Kochen haben, frische Waren auf einem Marktstand oder sogar einfach Bilder einer Region, die ein Urlaubsfeeling erzeugen, welches zu den Gerichten / Zutaten passt. Bei den Farben dominieren natürliche, häufig eher gedämpfte Farbtöne, dazu natürliche Materialien wie Holz & Stein.

Dieses Bildmaterial lässt sich dann noch hervorragend mit zusätzlichem Content anreichern, zum Beispiel Informationen über Skipisten und Urlaubsgebiete, oder Rezeptideen. Und ich muss natürlich überlegen, welche Produkte / Sortimente ich evtl. einbinden möchte (z.B. mit dem Sideview-Element). Das sind die Grundzutaten, die wir für unsere „Story“ benötigen. So kannst Du nicht nur Deine Produkte mit Emotionen verknüpfen, sondern bietest den Kunden auch einen echten Mehrwert und schaffen eine Markenidentität, wie es bei Amazon & Co. nicht möglich wäre.

Das ist zu tun:

• Bilder / Videos / Texte / Content / Produkte zusammenstellen, die Du für Deine Story benutzen kannst.

Aufbau skizzieren - Was musst Du beachten?

Wenn Du nun überlegt hast, welche Story Du erzählen möchtest und das dafür benötigte Bildmaterial / Content zusammen hast, geht es an die Umsetzung. Hier macht es Sinn, sich den Aufbau der Story erstmal grob mit Stift und Papier zu skizzieren. Wer mit Photoshop oder anderen Grafikprogrammen bewandert ist, kann natürlich auch diese dafür nutzen. An welcher Stelle, in welchem Abschnitt, setzt Du welche Bilder / Banner / Videos ein? Wo möchtest Du Produkte verknüpfen / das Sideview-Element einsetzen? Und natürlich: Wie soll sich Deine Einkaufswelt auf Smartphones und Tablets verhalten?

Dafür musst Du bedenken, dass Einkaufswelten in Shopware grundsätzlich mit Rastern aufgebaut werden. Du kannst Deine Seite also in eine beliebige Anzahl von Spalten und Zeilen einteilen. Beim Storytelling wird dann jeder Fullscreen-Abschnitt prozentual eingeteilt. Wenn Du zum Beispiel 4 Zeilen pro Abschnitt und 3 Spalten wählst, hat jede Zeile 25% der Gesamthöhe und jede Spalte 33,3% der gesamten Breite:

Die Zeilen und die Spalten lassen sich direkt in den Einstellungen jeder Einkaufswelt festlegen.

Dieses Raster lässt sich nun mit den verschiedenen Elementen wie Banner, Sideview etc. befüllen. Dabei lassen sich die Elemente auch über mehrere Zellen hinweg anlegen. Bei den Überlegungen, wo welches Element eingesetzt wird, sollte man von Anfang an die Responsivität im Auge behalten. In den meisten Fällen macht es Sinn, die Einkaufswelt zumindest für Mobile Devices anders zu gestalten. Wenn Du z.B. 4 Elemente in einem Abschnitt hast, die auf einem größeren oder zumindest eher horizontal ausgerichteten Bildschirm gut wirken, werden diese auf einem vertikal ausgerichteten Smartphone-Screen zu klein sein / zu stark beschnitten werden. Zur Verdeutlichung schauen wir uns das mit dem 4 Zeilen und 3 Spalten-Raster aus obigem Beispiel an. Zuerst, wie sich das Raster selbst verhält:

Befüllt mit 4 Elementen (DigitalPublishing-Banner, Sideview, Banner und DigitalPublishing-Slider), würde sich ein Storytelling-Abschnitt ohne weitere Anpassungen in etwa wie folgt verhalten:

Du siehst, dass der Content ohne Anpassung für Mobile Portrait Devices nicht mehr vernünftig dargestellt wird. Bei einem einfachen Banner mit zentriertem Motiv (wie den Äpfeln) funktioniert das noch gut, bei den DigitalPublishing-Bannern oder auch bei dem Sideview-Element mit der Suppe werden wichtige Bildelemente abgeschnitten bzw. Content aus dem sichtbaren Bereich geschoben. Dass Bilder / Banner automatisch in der Höhe oder Breite beschnitten werden passiert, da wir hier mit der Cover-Methode arbeiten, so dass sich Bilder innerhalb ihres Rahmens verhalten, wie bei der CSS-Eigenschaft background-size: cover.

Dabei behält das Bild sein ursprüngliches Seitenverhältnis bei, wird aber so skaliert, dass immer die volle Höhe und Breite des Elementes abgedeckt ist.

Richtig: Cover-Effekt bei verschiedenen Element-Größen:

Dies ist die einzige Möglichkeit, eine vollflächige, nahtlose Einkaufswelt zu schaffen, in der weder die Bilder auf den unterschiedlichsten Devices hässlich verzerrt werden, noch das Storytelling durch unschöne Leerräume seine Wirkung verliert:

Die Cover-Methode wird automatisch bei allen einfachen Bild-Elementen verwendet, also bei Banner, Sideview und Banner-Slider. Bei den Digital Publishing-Elementen kann dies in der Konfiguration der Banner selbst eingestellt werden. Beim HTML5-Video-Element kannst Du wählen, ob Du die Cover-Methode verwenden möchtest („Video-Modus: Füllen“), oder eine der in den obigen Bildern gezeigten Varianten. Vom linken Verzerren („Video-Modus: Strecken“) raten wir ab, die rechte Methode mit den Balken („Video-Modus: Skalieren“) kann bei Videos durchaus Sinn machen. Dort wird dann der Leerraum mit schwarz gefüllt. Letzteres Verhalten ist auch der Standard beim Youtube-Element.

Beim Banner-Slider werden alle Slides automatisch zum Mittelpunkt hin skaliert. Beim einfachen Banner & Sideview-Element hast Du aber die Möglichkeit zu definieren, in Richtung welchen Bildbereiches skaliert werden soll, damit wichtige Bildinhalte immer sichtbar bleiben.

Dabei stehen 9 Schwerpunkte zur Auswahl. Diese entsprechen den CSS-Eigenschaften background-position: top / bottom / left / right / center. Ohne Vorgabe wird auch hier automatisch zum Mittelpunkt hin skaliert. In den folgenden zwei Beispielen mit unterschiedlichen Vorgaben:

Das fluide Verhalten des Rasters und damit einhergehend der Einkaufswelten-Elemente sind die wichtigsten Faktoren, die es bei dem Entwurf einer responsiven Einkaufswelt zu beachten gilt. Es gibt tausende unterschiedliche Geräte, mit denen der Shop aufgerufen werden kann, die sich alle in Höhe und Breite ihrer Displays unterscheiden. Dementsprechend sind fixe Pixelwerte für die Abmessungen von Bildern oder Bannern völlig irrelevant! Wichtig hingegen ist es, sich Gedanken über Bildschwerpunkte und Banner-Kompositionen zu machen.

Ausführliche Infos zu den vielfältigen Möglichkeiten der DigitalPublishing-Banner findest Du hier

Eine weitere wichtige Methode zum Anpassen der Einkaufswelt an unterschiedliche Display-Größen ist natürlich die Umgestaltung für die unterschiedlichen Viewports. Dabei gibt es zwar die Möglichkeit für jeden Viewport wieder ein anderes Raster oder sogar anderen Content zu benutzen, oftmals reicht es aber schon, die Elemente anders anzuordnen. Zur Veranschaulichung noch einmal unser Storytelling-Abschnitt mit den 4 Elementen. Hier könnte man nun die 4 Elemente auf zwei Fullscreen-Abschnitte verteilen, um auf Mobile Portrait Devices genug Platz zu haben. In Kombination mit der Auswahl des Bildschwerpunktes bei der Cover-Methode könnte das Ganze dann wie folgt aussehen:

Mithilfe dieser Überlegungen können wir nun den Aufbau unserer Einkaufswelten für die verschiedenen Viewports skizzieren.

Dazu noch einige Tips:

• Den meisten fällt es einfacher mit einem Konzept für größere Devices (Desktop / Tablet Landscape) zu starten und dieses dann für kleinere anzupassen; wenn man aber mit den kleineren Mobile Geräten startet, ist es einfacher, sich auf das Wesentliche zu reduzieren und die Story knackig und prägnant zu gestalten.
• Es kann auch sinnvoll sein für Mobile Devices weniger Inhalt auszugeben. Das verringert die Ladezeit und schont das Datenvolumen der Kunden.
• Für Desktop entworfene Einkaufswelten funktionieren meist ohne Anpassungen genauso gut für den Tablet Landscape Viewport.
• Geräte, die im Bereich des Mobile Landscape Viewports liegen, sind häufig horizontal gedrehte Smartphones, haben also eine geringe Höhe; aber teilweise auch Tablets im Porträtmodus!
• Wer nicht so viel Erfahrung im gestalterischen Bereich hat, sollte seinem Storytelling ein eher einfaches Raster zugrunde legen, also nicht mehr als 2-3 Zeilen und 3-4 Spalten. Das macht es einfacher, eine stringente Gestaltung durch die komplette Story einzuhalten.
• Weniger ist oftmals mehr! Statt jede Zelle eines Rasters mit einem einzelnen Element zu füllen, lieber wenige Elemente großflächig über mehrere Zellen ziehen und auch mal Fullscreen-Abschnitte einfügen, die vollflächig mit nur einem einzigen Element gefüllt sind.

Das ist zu tun:

• Was sollen die einzelnen Abschnitte beinhalten?
• Wie soll das Raster aussehen, auf dem Du Deine Story aufbaust?
• Wo sollen welche Elemente eingesetzt werden?
• Wie sollen sich die Elemente im Einzelnen verhalten?
• Wie soll Deine Einkaufswelt auf den unterschiedlichen Devices aussehen?

Die Umsetzung

Wenn nun die Entwürfe stehen, geht es an die Umsetzung mithilfe des Einkaufswelten-Moduls im Backend.

Du gehst auf Einkaufswelt hinzufügen, vergibst dann einen Namen, wählen Modus: Storytelling, geben an, wie viele Zeilen jeder Fullscreen-Abschnitt enthalten soll und wählen bei den Grid-Einstellungen unsere gewünschte Spaltenanzahl. Bei den Device-Einstellungen können wir definieren, bei welchen Viewports diese Einkaufswelt angezeigt werden soll. Am Ende müssen wir das Ganze noch der Kategorie zuordnen, in der die Einkaufswelt erscheinen soll und das Häkchen bei „Aktiv“ setzen, damit sie im Frontend ausgegeben wird. Wir empfehlen immer die Quick-View zu aktivieren. So werden Produktdetails von Produkten, die in der Story verlinkt sind, z.B. auf einem DigitalPublishing-Banner oder in einem Sideview-Element, immer als Overlay innerhalb der Einkaufswelt angezeigt. Zudem kann der Kunde sich diese Produkte direkt auf den Merkzettel setzen, ohne aus der Story herausgerissen zu werden. Die weiteren Einstellungen können erstmal außen vor gelassen werden.

Nach dem Speichern gelangst Du wieder in die Übersicht. Dort kannst Du mit einem Klick auf das Bearbeiten-Symbol bei Deiner soeben angelegten Einkaufswelt den Designer öffnen:

Dort siehst Du nun Deine ersten Fullscreen-Abschnitt mit dem von Dir vorgegebenen Raster, in das ich meine Elemente von der rechten Sidebar per Drag-and-drop positionieren kann. Nach dem Positionieren kannst Du diese über die gewünschte Anzahl Zellen entsprechend meinem Entwurf vergrößern und mit Klick auf das Bearbeiten-Symbol mit Inhalten befüllen. Mit Klick auf „Neue Sektion einfügen“ kannst Du jederzeit weitere Fullscreen-Abschnitte unterhalb des Buttons hinzufügen, mit Klick auf „Vorherige Sektion löschen“ wird der darüber stehende gelöscht. ACHTUNG: Hierbei gehen alle Elemente, die Du in diesem Abschnitt eingefügt hast verloren!

Wenn man ein oder mehrere fertig konfigurierte Elemente dieses Abschnittes behalten möchte, sollte man zuerst einen neuen Abschnitt erstellen, die entsprechenden Elemente per Drag-and-drop in diesen verschieben und dann erst den Abschnitt löschen.

Das Wichtigste beim Erstellen einer Einkaufswelt ist es, immer wieder zu testen, wie diese sich im Frontend auf verschiedenen Devices verhält, da Du ja nicht wissen kannst, welche/s Bildschirmgröße/-verhältnis das Gerät des Kunden hat. Zwar werden die Wenigsten ein Open-Device-Lab zur Verfügung haben, in dem sie ihren Shop auf den unterschiedlichsten Geräten testen können, aber man kann zumindest unterschiedliche Display-Größen simulieren, indem man den Browser entsprechend skaliert oder direkt die Developer-Tools (z.B. in Chrome) benutzt.

Wenn man seine Einkaufswelt bei den Viewports getestet hat, für die diese angelegt wurde und zufrieden ist, kann man nun, falls gewünscht, seine Einkaufswelt für die weiteren Viewports duplizieren. Dabei werden alle Inhalte und Einstellungen kopiert. Dazu benutzt man einfach den Kopieren-Button und wählt den gewünschten Viewport aus.

Nach dem Duplizieren kann Du bei dieser Einkaufswelt wieder den Designer aufrufen und dem Viewport entsprechend umgestalten. Ebenso findest Du dort im Reiter „Einstellungen“ Deine Grundeinstellungen, in denen Du nicht nur weitere Viewports hinzufügen kann, sondern auch, falls nötig, das Raster verändern kann.

Das ist zu tun:

• Einkaufswelt als „Modus: Storytelling“ anlegen
• Raster definieren, Kategorie zuordnen und Viewports festlegen
• Abschnitte anlegen und mit Content füllen
• Falls nötig, für weitere Viewports duplizieren und anpassen

Fazit

Storytelling bietet eine Vielzahl an Möglichkeiten, den Shop nicht nur optisch von der breiten Masse abzuheben und sich von Plattformen wie Amazon und ebay zu differenzieren, sondern auch die Markenidentität zu stärken und Produkte / Sortimente entweder im Detail oder in Anwendung vorzustellen.

Abschließend haben wir noch einige Beispiele zusammengestellt, wie man auf Grundlage einfacher Raster stimmig und abwechslungsreich gestaltete Storytelling-Einkaufswelten aufbauen könnte.

Anhang 1

Anhang 2

Quickview Ansicht im Frontend

Seit Shopware 5.3 ist die direkte Anzeige der Artikeldetails aus dem Listing in einer "Quickview-Ansicht" möglich. Dies war vorher nur in Einkaufswelten möglich und kann nun für jede Kategorie individuell konfiguriert werden.

Wie aktiviere ich die Einstellung?

Die Einstellung erfolgt über die Einstellungen im "Storytelling-Plugin". Dafür gehst Du in den Plugin Manager und klickst auf das Bleistift-Icon, um die Einstellung zu editieren.

• Nein: Deaktiviert die Anzeige der Artikeldetails über eine Quickview im Listing.
• Listings und Slider: Anzeige in der gesamten Listenansicht samt aller Slider, ebenfalls bei Klick auf Artikelname/Artikelbild.
• Nur "Details" Button: Nur bei Klick auf "Details" erfolgt die Anzeige, welcher nur bei Variantenartikeln zu finden ist. Empfiehlt sich in Kombination mit Kaufen im Listing.

Ansicht im Frontend

Normaler Artikel

Beim normalen Artikel (ohne Varianten) werden dies Basisinformationen samt Button "in den Warenkorb" angezeigt. Ebenfalls kann der Kunde die Detailseite über "Details ansehen" öffnen.

Varianten-Artikel

Bei einem Variantenartikel wird zusätzlich der Konfigurator angezeigt, mit dem der Kunde die passende Variante wählen kann.