Einkaufswelten

Einkaufswelten bieten Dir die Möglichkeit, beeindruckende Landingpages, Produktpräsentationen, oder Marketingaktionen ganz einfach selbst zu erstellen. Einkaufswelten helfen Dir, Deine Kunden einzufangen und ihnen eine emotionale Geschichte zu erzählen, und zwar komplett geräteunabhängig!

In diesem Artikel zeigen wir Dir, wie das Modul funktioniert und wie Du geräteunabhängige Einkaufswelten bauen kannst. Du erreichst das Modul im Backend unter Marketing > Einkaufswelten

Übersicht

• Kategorie-Filter (1): Hier kannst Du nach Kategorien filtern. Es werden Dir dann alle Einkaufswelten innerhalb der gewählten Kategorie angezeigt. Ebenso werden alle Einkaufswelten in Unterkategorien gesondert aufgeführt.
• Geräte-Filter (2): Hier kannst Du nach Endgeräten filtern. Es werden Dir dann nur Einkaufswelten angezeigt, die auch für das ausgewählte Endgerät erstellt wurden.
• Template-Verwaltung (3): In der Templateverwaltung kannst Du, als technisch versierter Nutzer oder Entwickler, eigene Templates für Deine Einkaufswelten erstellen und diese dann als Basis für Deine Einkaufswelten nutzen.
• Einkaufswelt anlegen (4): Hier kannst Du eine neue Einkaufswelten anlegen. Bei Klick öffnet sich ein neues Fenster, in dem Du die neue Einkaufswelt bearbeiten kannst.
• Aus Vorlage erstellen (5): Hiermit kannst Du eine Einkaufswelt aus einer Vorlage erstellen. Diese Vorlagen werden u.a. von Shopware, durch Drittanbieter (Plugins) oder durch Dich selbst bereitgestellt. Wie das im Detail funktioniert, erklären wir Dir weiter unten.
• Importieren (6): Über diesen Button kannst Du zuvor exportierte Einkaufswelten wieder importieren.
• Einkaufswelt löschen (7): Hiermit kannst du die selektierte(n) Einkaufswelt(en) löschen. Beachte: Die in der Einkaufswelt enthaltenen Medien werden nicht vom System gelöscht, sie verbleiben im Media-Manager und müssen bei Bedarf händisch gelöscht werden!
• Listing (8): Hier werden abhängig von der gewählten Kategorie die Einkaufswelten und Landingpages aufgelistet.
• Aktionsbuttons (9): Über die Aktionsbuttons kannst Du die Einkaufswelt löschen, bearbeiten, duplizieren oder die Vorschau öffnen. Beim Duplizieren kannst Du wählen, ob Du die Einkaufswelt für alle Geräte duplizieren willst, indem Du direkt auf den Button klickst, oder sie nur selektiv für eine bestimmte Gruppe duplizieren willst, indem Du das Dropdown des Buttons nutzt.

Die Einkaufswelten sind in der Übersicht nach Kategoriezuordnung sortiert dargestellt, dies ermöglicht, dass Du pro Kategorie immer die perfekte Übersicht hast, welche Einkaufswelten für welche Endgeräte erstellt / aktiv sind.

Über einen Doppelklick auf eine Einkaufswelt kannst Du die wichtigsten Dinge inline, also direkt in der Tabelle, bearbeiten, die Einkaufswelt damit aktivieren/deaktivieren und ihre Position ändern.

Screencast

Der hierunter verlinkte Screencast (YouTube-Tutorial) wurde nicht mit der aktuellen Version von Shopware angefertigt, sodass Elemente der aktuellen Versionen im Tutorial fehlen können! Die grundlegende Handhabung ist aber nach wie vor gleich und lässt sich mithilfe des Screencasts sehr leicht nachverfolgen.

Eine Einkaufswelt erstellen

Mithilfe des Designers ist es möglich, Einkaufswelten mit unterschiedlichem Layout bzw. unterschiedlichen Elementen für verschiedene Endgeräte, auch innerhalb einer einzigen Einkaufswelt, darzustellen.
 

• Tabs (1): Um die Übersicht zu gewährleisten, wurde der Designer in Tabs unterteilt. Du kannst nahtlos zwischen "Einstellungen", "Layout" und "Elemente" hin und her wechseln, ohne dass die Vorschau auf der rechten Seite verschwindet. Lediglich die "Freitextfelder" werden beim Anklicken mit voller Fensterbreite angezeigt.
• Basis-Einstellungen (2): Hier kannst Du den Namen der Einkaufswelt vergeben, die Position, die Einkaufswelt aktivieren und einstellen, ob es sich um eine Landingpage handelt, oder um eine normale Einkaufswelt. Was eine Landingpage ist, erklären wir Dir weiter unten
• Anzeige-Einstellungen (3): Hier werden Kategorie(n) definiert und die Einstellung, ob unter der Einkaufswelt noch das Produkt-Listing angezeigt werden soll, getätigt. Bei der Kategorieauswahl ist es möglich, die Einkaufswelt mehreren Kategorien zuzuweisen. Somit kann also ein und dieselbe Einkaufswelt innerhalb des Shops gleichzeitig in Kategorie A und Kategorie B auftauchen. Das geht auch, wenn sich Kategorie B in einem Subshop befindet. Die Einkaufswelt wird dann gleichermaßen in Shop A und Shop B auftauchen. Darüber hinaus lässt sich über die Sichtbarkeit in Kategorien einstellen, ob die Einkaufswelt auf der Startseite der Kategorie, ihren Folgeseiten oder beidem angezeigt werden soll.
• Device-Einstellungen (4): Mit den Device-Einstellungen kannst Du festlegen, auf welchen Endgeräten die Einkaufswelt dargestellt werden soll. Wenn Du hier eine Gerätegruppe deaktivierst, wird im oberen Viewport-Selektor ein Ausrufezeichen (9) angezeigt.
• Customer Streams (5): Hier kannst Du die Customer Streams auswählen, für die die Einkaufswelt gelten soll. Wie diese genau funktionieren, erklären wir weiter unten im Artikel.
• Zeit-Einstellungen (6): Definiere hier eine Start- und Endzeit für die Einkaufswelt, falls Du diese nur zeitlich begrenzt anzeigen willst. Hinweis: Die zeitliche Begrenzung ist im Standard nicht mit dem HTTP-Cache kompatibel!
• Vorschau (7): Hier kannst Du die Vorschau der Einkaufswelt aktivieren oder deaktivieren. Die Einkaufswelt wird hier datentechnisch genauso angezeigt, wie sie auch im Frontend aussehen würde.
• Alle Verbindungen aufheben (8): Falls Du mehrere Einkaufswelten verkettet hast, kannst Du diese Verkettung hier wieder auflösen. Damit kannst Du die Bearbeitung ausschließlich auf den selektierten Viewport anwenden und nicht auch auf verkettete Viewports.
• Warnung (9): Die Warnung in der Viewport-Oberfläche, falls vorhanden, zeigt Dir an, dass dieser Viewport der Einkaufswelt im Frontend nicht angezeigt wird. Weitergehende Optionen hierfür findest Du in den Device-Einstellungen (4).
• Viewports (10): Hier kannst Du auf die einzelnen Viewports klicken und die Einkaufswelt für den jeweiligen Viewport über den Designer (14) anpassen.
• Ausgeblendete Elemente (11): Hier siehst du, ob und wie viele Elemente im aktuellen Viewport ausgeblendet sind. Erklärung: Wenn Du z.B. ein Banner, für das Quer- und das Hochformat unterschiedlich erstellen musst, kannst Du erstmal beide Elemente zur Einkaufswelt hinzufügen. Das Element für das Querformat blendest Du dann in den Hochformat-Viewports aus und nur in den Querformat Viewports wieder ein. So kannst Du innerhalb einer Einkaufswelt alle Arten von Displays optimal bedienen, ohne unnützen Inhalt mitausliefern zu müssen.
• Verketten (12): Mit dieser Funktion kannst Du Viewports verketten, sodass Deine Einstellungen automatisch für alle verketteten Viewports gelten. Um die Verkettung zu nutzen, aktiviere zuerst den Viewport, der als "Master" dienen soll, danach klickst Du in den anderen Viewports, die Du verketten willst, auf das Verketten-Icon. Die Verkettung ist erfolgreich aktiviert, wenn sich die Kettenglieder im Logoicon schließen. Kommt es zu Komplikationen, weil in den Viewports unterschiedliche Inhalte hinterlegt sind, wirst Du gefragt, ob Du die Einstellungen Deines zu verkettenden Viewports überschreiben willst. Bestätige dies mit "Ja", um die Verkettung zu übernehmen, das Layout und die Elemente des Master-Viewports werden dann auf die des verketteten Viewports übertragen.
• Viewport-Reichweite (13): Dieser Balken dient als Indikator für Dein Layout. Die Einkaufswelt wird immer in kleinstmöglicher Größe dargestellt. Der farbige Bereich gibt dabei an, wie groß die Einkaufswelt in dem jeweiligen Viewport maximal werden kann.
• Designer (14): Im Designer kannst Du Elemente frei platzieren, verschieben und die Elemente bearbeiten, die in der Einkaufswelt in dem jeweiligen Viewport platziert wurden.

Hast Du Änderungen vorgenommen, vergiss nicht, Deine Änderungen mit einem Klick auf "Speichern" zu speichern!

Customer Streams

Mithilfe der Customer-Streams Einstellungen kannst Du Deine Einkaufswelten auch nur für bestimmte Kundengruppen anzeigen lassen. Durch die Nutzung des Shopware Login Tokens kannst Du, sofern sie wiedererkannt werden, Kunden eines bestimmten Customer Streams direkt auf der Startseite und ohne vorherigen Login individuell mit den Inhalten Deiner Einkaufswelten bespielen.

Mit der Auswahl Nur für folgende Customer Streams (1) legst Du die Customer Streams fest, deren Kunden die aktuelle Einkaufswelt angezeigt bekommen sollen. Die Einkaufswelt wird dann erst einmal zusätzlich zu bisherigen Einkaufswelten angezeigt, die z.B. keiner Einschränkung unterliegen. Mit Folgende Einkaufswelten ersetzen (2) kannst Du optional eine oder mehrere Einkaufswelten auswählen, die dafür nicht mehr angezeigt werden sollen.

So kannst Du unterschiedliche Ansichten Deines Shops realisieren. So kannst Du Deinen Shop so konfigurieren, dass Kunden eines Customer Streams komplett andere Einkaufswelten zu sehen bekommen, als Besucher (keinem Customer Stream zugewiesen) oder Kunden von anderen Customer Streams.

In der Praxis ist das interessant, wenn Du z.B. für die Händler in Deinem Shop Produkte anders bewerben möchtest, als Du das für Endkunden tust. Möglich ist z.B. auch eine gezielte Ansprache von Kunden, die bisher noch nichts bei Dir gekauft haben, indem Du diesen Kunden einen Rabatt gewährst.

Arbeiten mit dem Designer

Die Arbeit im Designer ist übersichtlich und relativ angenehm. Wechsel einfach den Viewport über die obere Auflistung und das Grid darunter passt sich automatisch auf die entsprechenden Maße an, sodass Du schon beim Erstellen einen sehr guten Eindruck davon bekommst, wie Deine Einkaufswelt später auf dem Endgerät aussehen wird.

Layout

Im Tab "Layout" kannst Du diverse Einstellungen der Einkaufswelt vornehmen, um das Layout anzupassen:

Modus

Nicht für jede Einkaufswelt ist jeder Modus geeignet, wir erklären Dir hier, wie die Modi funktionieren und welcher Modus wofür genutzt werden kann.

Fluider Modus

Der fluide Modus ähnelt dem alten Masonry Modus - mit der Ausnahme, dass sich die Anordnung der Elemente nicht dynamisch ändert, sondern lediglich die Breite der Elemente. Somit bleibt die Anordnung der Elemente immer gewahrt und die Einkaufswelt ist immer noch auf allen Endgeräten anzeigbar.

Resize Modus

Die Elemente werden auf dem Endgerät genauso dargestellt, wie sie angelegt wurden. Die Anordnung bleibt immer gleich, jedoch werden Elemente je nach Endgerät evtl. recht schnell kleiner, da alle Elemente ihre Position und auch ihr Seitenverhältnis beibehalten.

Zeilen-Modus

Der Zeilen-Modus ist vorrangig für Content-Seiten vorgesehen und arbeitet ohne feste Zeilenhöhen. Der Inhalt einer Zeile bestimmt in diesem Modus auch deren Höhe.

Im Zeilenmodus bestimmt das höchste Element einer Zeile die dazugehörige Zeilenhöhe. Andere Elemente in der Zeile werden nur dann hochskaliert, wenn es die Größe der Zelle zulässt, da in diesem Modus das Seitenverhältnis immer bestehen bleibt!

Wie Du hier sehen kannst, passen sich die Elemente untereinander an. Dadurch, dass das Bild-Element schmaler wird, wird das Text-Element länger / höher. Da das Bild aber sein Seitenverhältnis beibehält, wird es an dieser Stelle nicht verändert. Daher muss für die Mobile-Einkaufswelt ein anderes Layout her, im Beispiel wird das Bild einfach ins Hochformat gebracht:

Da das Bild nun deutlich höher ist, kann es auch mit der Textlänge mithalten und die Einkaufswelt sieht auf dem mobilen Endgerät auch wieder besser aus.

Abmessungen von Elementen im Zeilen Modus

Grid-Einstellungen

Der Designer unterstützt die direkte Änderung von Grid-Einstellungen, sodass Du die Einstellungen für Spalten, Zeilen-Abstand und Zeilen-Höhe direkt in der Einkaufswelt anpassen kannst. Der Designer passt sich direkt Deinen Anpassungen an und stellt das Grid entsprechend um.

Platzieren von Elementen

In diesem Abschnitt erklären wir das Handling mit Elementen innerhalb der Einkaufswelten. Klicke in Deiner geöffneten / erstellten Einkaufswelt auf den Tab "Elemente":
 

Um ein Element nun in der Einkaufswelt zu platzieren, ziehe es aus der linken Auswahl in den Designer. Neue Elemente sind im Standard immer ein Kästchen groß. Beim Platzieren im Designer zeigt Dir der Designer ein blaues oder rotes Kästchen an. Das blaue Kästchen bedeutet, dass Du das Element platzieren kannst. Das rote weist darauf hin, dass das Element an dieser Stelle nicht passt. Mögliche Ursachen dafür können sein: Element zu breit für die Einkaufswelt, Element überlappt mit anderen Elementen, Element ist mehr als 1 Spalte breit, soll aber ganz rechts positioniert werden.

Bereits in der Einkaufswelt platzierte Elemente kannst Du mit der Maus bearbeiten: Fahre mit der Maus über das Element, es werden dann die folgenden Steuerelemente sichtbar:

Über das Stift-Icon kannst Du das Element bearbeiten. Das blaue X blendet ein Element auf dem aktuellen Viewport aus, sodass es in eventuell anderen Viewports noch zur Verfügung steht. Das rote X hingegen löscht das Element aus der Einkaufswelt und somit auch aus allen anderen Viewports!

Nutze die Ausblenden-Funktion, um ohne separate Einkaufswelt ein alternatives Layout mit anderen Elementen für spezielle Viewports zu erstellen. Ausblenden ist nur dann nötig, wenn Du ein Element im aktuellen Viewport nicht verwenden möchtest, aber es in anderen Viewports zur Verfügung stehen soll.

Ausgeblendete Elemente

Befinden sich ausgeblendete Elemente in Deiner Einkaufswelt, wird Dir das anhand des rund gestrichelten Icons angezeigt, die Zahl im Icon gibt die Anzahl des ausgeblendeten Elemente an:

Bei Klick auf das Icon öffnet sich eine kleine Leiste mit den ausgeblendeten Elementen:

Diese Elemente kannst Du dann per Drag'n'Drop wieder auf der Einkaufswelt platzieren oder mit einem Klick auf das rote X löschen. Beachte, dass die Elemente beim Löschen komplett aus der Einkaufswelt entfernt werden, also auch in anderen Viewports nicht mehr zur Verfügung stehen!

 "Ausgeblendete Elemente" können nur für den aktiven Viewport geöffnet werden. Wenn Du Dich zur Bearbeitung im Viewport "Desktop" befindest, kannst Du nicht direkt die ausgeblendeten Elemente des "Mobile Portrait" Viewports öffnen, sondern nur die des aktiven Viewports "Desktop".

Verfügbare Elemente

Text Element

• Text: Im Text Element kannst Du eigene HTML Inhalte in die Einkaufswelt einbinden, hierzu kannst Du den Editor verwenden. In diesem kannst Du direkt bearbeiten oder auch per "HTML Quellcode bearbeiten" fertigen Quellcode einfügen.
• Titel: Der Titel wird im Frontend über dem Element selbst angezeigt.
• Kein Styling hinzufügen: Hiermit definierst Du, ob das Styling des Templates auch auf das HTML Element wirken soll oder nicht. Dies ist für unerfahrene Anwender empfehlenswert, da hierbei die einheitliche Optik im Shop gewahrt wird.
• CSS Klasse: Hiermit kannst Du eine CSS-Klasse auf das Element setzen, wenn Du das Styling im Frontend individueller anpassen möchtest, als es im Standard möglich ist.

Banner

Im Banner Element kannst Du ein Banner einbinden und entsprechend verlinken, das Link-Ziel definieren, einen Titel vergeben und eine CSS-Klasse auf das Element setzen. Wenn hier ein Banner hochgeladen wird, erscheint dies als Vorschau im unteren Bereich des Elements. Die Vorschau enthält ein 3x3 Raster, dies erfährt Bedeutung, wenn Deine Einkaufswelt den fluiden Effekt nutzt. Der Effekt sieht vor, Elemente immer zu füllen, dazu wird an einigen Stellen auch Bildmaterial abgeschnitten. Über das Setzen des Rasters kann hierzu ein Ausgangpunkt für den Zoom verwendet werden. So wird sichergestellt, dass der wichtigste Inhalt des Bildes stets zu sehen bleibt. Setze diese Einstellung durch Klicken in das entspeechende Feld im Raster.

Weiter kann im Banner Element noch die Mapping-Funktion genutzt werden. Dadurch ist es möglich, einzelne Bereiche des Banners zu verlinken und z.B. auf verschiedene Artikeldetailseiten zu verweisen. Per Klick auf Bild-Mapping anlegen: öffnet sich die folgende Ansicht:

Hier wird das Banner in Originalgröße angezeigt und Du kannst nun neue Mappings erstellen. Diese kannst Du frei auf dem Banner platzieren und über die dazugehörige Zeile im Mapping verlinken. Hierbei kann der Link-Typ (intern, extern), Titel, sowie "Titel als Tooltipp" konfiguriert werden. Das Mapping verhält sich analog zum Zoom. Es zoomt also dynamisch mit, sodass die Positionen im Bild weiterhin bestehen bleiben.

Artikel

Das Artikel-Element kann Artikel in der Einkaufswelt darstellen. Hierbei wird zwischen den Artikeltypen Ausgewählte Artikel, Ausgewählte Variante, Newcomer, Topseller & zufälliger Artikel unterschieden. Ausgewählte Artikel können frei aus dem Sortiment ausgewählt werden. Alle anderen Typen werden automatisch vom System ermittelt. Kategorie steht Dir als Kategorieauswahl zur Verfügung, wenn der Artikel vom System ermittelt werden soll, damit keine willkürlichen Artikel angezeigt werden. Nur Produktbild sorgt dafür, dass der Kunde im Frontend nur das Bild des Artikels sieht. Kein Rahmen sorgt dafür, dass im Frontend kein Rahmen um das Element gesetzt wird und über die CSS Klasse kannst Du eine individuelle CSS-Klasse auf das Element setzen.

Kategorie Teaser

Der Kategorie Teaser stellt in der Einkaufswelt eine Kategorieverlinkung bereit. Hierzu kannst Du einen beliebigen Artikel aus einer ausgewählten Kategorie oder ein ausgewähltes Bild verwenden. Ebenso kannst Du angeben, ob die Zielkategorie eine Artikelkategorie oder eine Blog-Kategorie ist und eine zusätzliche CSS-Klasse, falls erforderlich.

Blog-Artikel

Das Blog-Artikel-Element zeigt Artikel aus der ausgewählten Blog-Kategorie in der Einkaufswelt an. Hierbei kannst Du die Blog-Kategorie auswählen, sowie die Anzahl der angezeigten Artikel festlegen.

Banner-Slider

Im Banner Slider kannst Du mehrere Banner in einer Slideshow ablaufen lassen. Die folgenden Optionen stehen zur Verfügung:

• Titel: Titel des Elementes, dieser wird im Frontend als Overlay angezeigt.
• Pfeile anzeigen: Zeigt Pfeile im Frontend an, die den Kunden im Frontend manuell durch die Banner navigieren lassen.
• Navigation anzeigen: Zeigt die Navigation der Banner durch Punkte am unteren Rand des Sliders an. Durch Klicken auf einen Punkt wird das entsprechende Banner angezeigt.
• Scroll-Geschwindigkeit: Hier stellst Du die Dauer des Überganges von einem zum anderen Banner in Millisekunden (ms) ein.
• Automatisch rotieren: Definiert, ob Shopware die Banner automatisch rotiert oder nicht.
• Rotationsgeschwindigkeit: Hier stellst Du die Anzeigedauer in Millisekunden (ms) ein. Die Anzeigedauer ist dann für jedes im Slider enthaltene Banner gleich.

Im Bereich "Banner-Verwaltung" kannst Du die Bilder hochladen und für jedes Bild per Doppelklick einen Link, Alternativ-Text und einen Titel definieren.

Youtube-Video

Hiermit kannst Du ein YouTube-Video einbinden. Einstellen kannst Du dabei die folgenden Dinge:

• Youtube-Video-ID: Füge hier die ID des Videos oder die gesamte Video-URL ein.
• HD-Videos verwenden: Weist das Widget an, das Video in HD abzuspielen
• Video automatisch starten: startet das Video automatisch nach dem Laden der Seite.
• Empfehlungen ausblenden: Unterdrückt Video-Empfehlungen am Ende des Videos.
• Steuerung ausblenden: Blendet die Steuerung aus, die normalerweise beim Hovern unten im Video angezeigt wird. Die Funktionen Start und Stop können nun noch über einen direkten Klick auf das Widget ausgeführt werden.
• Starten nach x Sekunden: Startet das Video beim Zeitindex von "x" Sekunden. D.h. zum Beispiel für 30 Sekunden, dass das Video 30 Sekunden nach dem eigentlichen Anfang gestartet wird.
• Stoppen nach x Sekunden: Stoppt das Video bei "x" Sekunden (nicht nach "x" Sekunden!!) Bei einem Wert von z.B. 60 würde das Video bei Sekunde 60 stoppen. In Kombination mit "Starten nach 30 Sekunden" würde somit eine Nettowiedergabe von 30 Sekunden erfolgen.
• Info ausblenden: Blendet den Videonamen im Element aus.
• Branding ausblenden: Blendet das YouTube-Logo aus.
• Loop aktivieren: Wiederholt das Video mit den o.g. Einstellungen automatisch und in Endlosschleife
• CSS Klasse: Vergib hier eine separate CSS-Klasse, wenn Du Anpassungen vornehmen willst, die das Element selbst nicht bereitstellt.

Die YouTube-Video-ID findest Du übrigens hier:

iFrame-Element

Im iFrame-Element kannst Du bestehende URLs einbetten.

Hersteller-Slider

Der Hersteller-Slider bietet die Möglichkeit, Hersteller Logos als Slider in die Einkaufswelt einzubinden. Du kannst hier die folgenden Einstellungen anpassen:

• Herstellertyp: Hersteller einer Kategorie holt sich nur Hersteller einer ausgewählten Kategorie. Ausgewählte Hersteller lässt dich die gewünschten Hersteller komplett individuell definieren.
• Überschrift: Hier kannst Du die Überschrift definieren, die als Overlay auf dem Element dargestellt wird.
• Pfeile anzeigen: Zeigt die Pfeile zur manuellen Navigation im Slider an.
• Scroll-Geschwindigkeit: Definiert die Zeit, die der Slider benötigt, um die Seite zu wechseln.
• Automatisch rotieren: Lässt den Slider automatisch rotieren.
• Rotations-Geschwindigkeit: Definiert die Zeit, die eine Seite sichtbar bleibt, bevor der Slider die Seite wechselt.

Artikel-Slider

Der Artikel Slider kann Artikel in einer Vorschau in die Einkaufswelt einbinden. Hier finden sich folgende Einstellungen:

• Listentyp:
  • Ausgewählte Artikel: Hier kannst Du die Artikel komplett selbst definieren. Wenn Du diese Option auswählst, erscheint im unteren Bereich eine Artikel-Auswahl, in der Du die anzuzeigenden Artikel suchen und auswählen kannst.
  • Ausgewählte Varianten: Diese Option funktioniert im Grunde genauso, wie die ausgewählte Artikel-Auswahl, nur stehen Dir hier die separaten Varianten der Artikel zur Verfügung statt nur der Hauptartikel.
  • Newcomer Artikel: Hier werden alle neuen Artikel im Shop ausgegeben.
  • Topseller-Artikel: Hier werden alle Topseller ausgewählt.
  • Preis (aufsteigend): Die Artikel werden in aufsteigender Reihenfolge ausgewählt.
  • Preis (absteigend): Die Artikel werden in absteigender Reihenfolge ausgewählt.
  • Product-Stream: Hiermit kannst Du einen Product-Stream zur Auswahl der Produkte heranziehen. Falls Du diese Variante wählst, wird die darunter liegende Kategorie-Auswahl gegen die Product-Stream-Auswahl getauscht.
• Kategorie-Auswahl: Hier wird die Kategorie ausgewählt, aus der die Artikel geholt werden. Möchtest Du alle vorhandenen Kategorien ausgeben, wähle einfach die Hauptkategorie des Shops aus.
• Max Anzahl: Definiert, wie viele Artikel maximal im Slider angezeigt werden. Diese Option wird Dir nur angezeigt, wenn Shopware die Artikel selbständig holt (Topseller, Newcomer & Preis).
• Überschrift: Hier kann eine Überschrift definiert werden, die dann als Overlay auf dem Element dargestellt wird.
• Pfeile anzeigen: Zeigt im Slider Pfeile zur manuellen Navigation an.
• Slide-Geschwindigkeit: Diese Einstellung legt fest, wie lange der Slider zum Wechseln der Seiten braucht.
• Automatisch rotieren: Hiermit kannst Du die Bilder im Slider automatisch rotieren lassen.
• Slide-Interval: Definiert die Anzeigedauer der einzelnen Sliderseiten/Bilder.

HTML5 Video-Element

Das HTML-Video-Element kann genutzt werden, um ein selbst gehostetes Video in die Einkaufswelt einzubinden. Dieses Element sieht folgende Einstellungen vor:

• Video Modus:
  • Skalieren Ist diese Einstellung aktiv, wird das Video so im Element platziert, dass es stets zu 100% sichtbar bleibt und das Seitenverhältnis erhalten bleibt. Hier kann es, abhängig vom Videoformat zu schwarzen Balken im Element kommen.
  • Füllen Ist diese Einstellung aktiv, wird das Element unter Berücksichtigung des Seitenverhältnisses so vergrößert, dass keine schwarzen Balken im Element erscheinen. Jedoch kann hierbei, abhängig vom zugrunde liegenden Format, ein Teil des Videos abgeschnitten werden.
  • Strecken Ist diese Einstellung aktiv, wird das Video, ohne Rücksicht auf das Seitenverhältnis auf die Größe des Elementes, gestreckt. Hier kann es abhängig vom Videoformat zu Streckungen oder Stauchungen im Bild kommen. Beachte, dass die Elemente je nach genutztem Endgerät zusätzlich unterschiedlich groß dargestellt werden können, dadurch kann es vorkommen, dass ein Video auf dem Desktop anders dargestellt wird, als auf einem Smartphone. Dieses Verhalten ist technisch bedingt.
• .webm-Video: Gibt die Dateiquelle für WebM-Videos an. Hier kann sowohl ein Element aus dem Media-Manager als auch eine externe Quelle angegeben werden.
• .ogv-Video: Gibt die Dateiquelle für OGG-Videos an. Hier kann sowohl ein Element aus dem Media-Manager als auch eine externe Quelle angegeben werden.
• .mp4-Video: Gibt die Dateiquelle für MP4-Videos an. Hier kann sowohl ein Element aus dem Media-Manager als auch eine externe Quelle angegeben werden.
• Vorschau-Bild: Hier kann ein Bild angegeben werden, dass angezeigt wird, wenn das Video noch nicht gestartet wurde.
• Video automatisch abspielen: Spielt das Video automatisch ab, sobald die Seite angezeigt wird.
• Video automatisch vorladen: Lädt das Video automatisch vor, sodass es im Regelfall flüssiger und ohne zwischenzeitiges Laden abgespielt werden kann.
• Video-Steuerung anzeigen: Ist diese Funktion aktiv, wird eine Steuerungsleiste am unteren Rand des Videos dargestellt, mit der sich die Wiedergabe des Videos steuern lässt. Wenn deaktiviert, wird zur Navigation nur ein Play/Pause-Button oben rechts im Element angezeigt. Beachte, dass die Video-Steuerung nur im Modus skalieren zur Verfügung steht.
• Video schleifen: Stellt das Video in Dauerschleife dar.
• Video stumm schalten: Schaltet das Video so lange stumm, bis der Kunde den Ton wieder aktiviert. Beachte, dass der Ton nur mit aktiver Video-Steuerung wieder aktivierbar ist!
• Zoom-Faktor: Wenn der Video-Modus Füllen aktiv ist, kann hier der Zoom-Faktor des Videos gewählt werden.
• Linker Ausgangspunkt: Legt den linken Ausgangspunkt des Videos für die Skalierung in Prozent fest.
• Oberer Ausgangspunkt: Legt den oberen Ausgangspunkt des Videos für die Skalierung in Prozent fest.
• Overlay Text: Legt einen Text für ein Overlay über dem Video fest.
• Overlay-Farbe: Legt die Farbe des Overlay(textes) in RGBA fest.
• CSS-Klasse: Falls Du weitere CSS-Anpassungen vornehmen möchtest, kannst Du hier eigene CSS-Klassen einfügen

Code Element

Das Code Element ist für HTML und JavaScript gedacht und führt hier eingegebenen Code ohne jegliche Anpassung im Frontend aus. Zuerst wird der HTML-Code ausgeführt, danach der JavaScript Code.

JavaScript ist ohne <script>-Tags einzugeben.

Zeilen hinzufügen und löschen

Zeilen hinzufügen und entfernen kannst Du direkt im Designer, auf der linken Seite im Designer findest Du zwischen jeder Zeile ein kleines "+"-Icon. Durch Klicken wird an dieser Stelle eine neue Zeile eingefügt.

Auf der rechten Seite des Designers kannst Du mit Hilfe des "x"-Icons die jeweilige Zeile löschen. Befinden sich noch Elemente in der Zeile, werden diese ausgeblendet. Du kannst Sie aber jederzeit über die Liste der ausgeblendeten Elemente wieder abrufen und neu platzieren.

Storytelling

Hast Du das Shopware Storytelling Plugin installiert, kannst Du die Einkaufswelten noch weiter optimieren. Durch die Kombination dieser beiden Shopware Funktionalitäten schickst Du Deine Kunden auf eine emotionale Entdeckungsreise und wirst ihn für Deine Produkte begeistern. Mit Einsatz des Storytelling-Plugins schaffst Du folgende Möglichkeiten:

• Einkaufswelt in Abschnitte einteilen, durch die der Kunde geleitet wird.
• SideView Elemente ermöglichen Dir in der Einkaufswelt aktiv Produkte zu bewerben.
• QuickView ermöglicht es die Artikel anzuschauen und ggf. gleich merken können, ohne die Einkaufswelt verlassen zu müssen.

Einkaufswelten werden, in Kombination mit dem Plugin Storytelling immer bildschirmfüllend angezeigt! Ebenso haben Storytelling Einkaufswelten immer Priorität. Das heißt, dass - sofern schon eine Storytelling Einkaufswelt in der Kategorie angezeigt wird - keine weitere Einkaufswelt angezeigt werden kann, egal ob aktiviert oder nicht.

Ein ausführliches How-To zum Plugin Storytelling findest Du hier oder hier.

Zusätzliche Optionen

Einkaufswelten Einstellungen

Über die allgemeinen Einstellungen kannst Du nun zusätzlich in allen Einkaufswelten die Quick-View aktivieren. Diese öffnet innerhalb der Einkaufswelt eine Art Vorschau des Produktes, nutzt dabei aber "echte" Informationen von der zugehörigen Detailseite. Damit können auch innerhalb der Quick-View z.B. Varianten gewechselt werden etc.

In den Layout-Einstellungen kannst Du den Typ der Einkaufswelt wählen. Hier wird definiert, ob es sich um eine "normale" Einkaufswelt, oder eine Storytelling-Einkaufswelt handelt. Beachte bitte, beim Wechsel des Einkaufswelttyps kann es vorkommen, dass Elemente ausgeblendet werden, wenn sie sich über einem der eingefügten Übergänge der Sektionen befinden. Das passiert, weil Elemente nicht sektionsübergreifend platziert werden können.

Hast Du Deine Einkaufswelt in den Storytelling-Modus gebracht, kannst Du in den Storytelling-Einstellungen die Anzahl der Zeilen pro Abschnitt einstellen. Beachte aber, dass beim Verringern der Zeilen die darin vorhandenen Elemente ausgeblendet werden.

Designer

Erstellst Du eine Storytelling-Einkaufswelt, verändert sich das Layout des Designers. Dadurch wird die Erstellung der einzelnen Abschnitte komfortabler gemacht.

Der Designer kann nun jedoch keine Zeilen mehr hinzufügen oder entfernen. Dafür kannst Du Abschnitte hinzufügen oder entfernen, in denen Du Deine gewünschten Elemente platzieren kannst. Ansonsten kannst Du die Einkaufswelt wie gewohnt gestalten.

Im "Storytelling"-Layout haben die Zeilen keine feste Höhe mehr! die Zeilenhöhe wird hier aus der Höhe des Viewports, der Zeilenanzahl und des Zellen-Abstandes errechnet, da jeder Abschnitt stets so hoch ist, wie der Viewport selbst, da diese stets bildschirmfüllend angezeigt werden.

Quick View

Mit "Storytelling" hast du eine zusätzliche Auswahlmöglichkeit in der Gestaltung Deiner Einkaufswelten. Unter Einstellungen > Basis-Einstellungen kannst du nun unter Quick-View ein Häkchen setzen bei "Schnellansicht für Produktlinks". Dies ermöglicht die Darstellung von Artikeln innerhalb eines Sliders, der wiederum als Overlay über die aktive Einkaufswelt gelegt wird.

SideView-Element

Das SideView-Element kann ein Banner mit einem ausklappbaren Artikel-Slider bereitstellen, um spezielle Artikel direkt im Banner platzieren zu können.

• SideView-Position: Hier kannst Du definieren, ob der Artikel-Slider rechts oder unten im Banner erscheint.
• SideView- Größe: Hier definierst Du, ob der Artikel-Slider das Banner komplett überlagern soll, oder nur zum Teil.
• Kategorie auswählen: Definiert eine Kategorie, aus der die Artikel angezeigt werden sollen. Diese Einstellung wird nur bei den folgenden Listentypen verwendet: Newcomer Artikel, Topseller Artikel, Preis (aufsteigend) sowie Preis (absteigend)
• Listentyp: Hier kannst Du auswählen, ob das Element die Artikel selbstständig holen soll (Newcomer, Topseller, Preis (aufsteigend) und Preis (absteigend)) oder ob Du die Artikel (und -varianten) selbst definieren möchtest. In diesem Fall erscheint unten die bekannte Artikeleingabe, in der die Artikel und -varianten definiert werden können:
• Maximale Produktanzahl: Dies reguliert die maximale Artikelanzahl, die im SideView-Element angezeigt werden soll. Beachte, dass diese Option nur zur Verfügung steht, wenn das Element die Artikel selbständig holt, der Listentyp also nicht auf ausgewählte Artikel oder ausgewählte Varianten steht.
• Pfeile anzeigen: Dies zeigt Navigationspfeile an, um den Slider manuell durchzublättern. Beachte hierbei, dass ohne die Navigationspfeile der Slider zwar durch Mouseover angehalten werden, dann jedoch nicht wieder gestartet werden kann.
• Automatisch starten: Lässt den Slider nach Seitenaufruf automatisch durchlaufen.
• Banner auswählen: Hier wählst Du ein Banner aus, dass im Element angezeigt werden soll. Nach der Auswahl eines Banners wird Dir unten eine Vorschau des Banners angezeigt. Hier kann auch der Ausgangpunktes des Zooms ausgewählt werden. Beachte hierzu die Beschreibung des Banner-Elements, dort wird dessen Funktion ebenfalls genau erklärt.

Banner Mapping via Icon

Sobald das Storytelling-Plugin installiert ist, kannst Du im regulären Banner-Element die Mappings über ein Icon anzeigen lassen. Das Mapping an sich funktioniert wie zuvor beschrieben, Du kannst nun aber zusätzlich die Option "Als Icon anzeigen" aktivieren:

Im Frontend würde das Mapping dann wie folgt angezeigt:

Landingpages

Einleitung

Landingpages bieten vielfältige Gestaltungs- und Marketingmöglichkeiten im Shop. Angefangen von Themenseiten, in denen sich Marketing betreiben lässt, bis hin zur individuellen Fehlerseite. Damit Landingpages technisch noch flexibler werden, kannst Du Master- und Slave-Landingpages erstellen.

Master und Slave

In früheren Shopwareversionen war das Konzept der Master- und Slave-Landingpages dem unterschiedlichen Layout der möglichen Endgeräte geschuldet. Aber auch heute, da Landingpages innerhalb einer separaten Einkaufswelt unterschiedliche Elemente beinhalten können, ist das Master/Slave-Prinzip noch sinnvoll einsetzbar.

Hauptgrund hierfür ist seine technische Flexibilität: Eine Slave-Landingpage wird nur im entsprechenden Viewport geladen. Sind Deine Landingpages also aufwendig gestaltet, kannst Du Ladezeit einsparen, da bei geräteübergreifenden Landingpages zwar nur die Elemente des jeweiligen Viewports angezeigt werden, aber dennoch im Hintergrund sämtliche Elemente geladen werden. Beim Master wird je Viewport nur die entsprechende Landingpage geladen, was ebenfalls weniger Traffic erzeugt.

Zusätzlich kannst Du mittels getrennter Landingpages verschiedene Layoutoptionen realisieren. Zum Beispiel kannst Du eine andere Spaltenanzahl oder unterschiedliche Zeilenhöhen pro Viewport einrichten. Das ist möglich, da die Landingpages eigenständige Einkaufswelten sind.

Im Master werden alle übergreifenden Einstellungen wie URL, Teaser-Bild, sowie Kategoriezuweisung, Position und SEO-Angaben definiert. Der Slave dagegen erbt diese Einstellungen vom Master, sodass alle Landingpages für die jeweiligen Geräte unter einer einzigen URL erreichbar sind, gleiche SEO-Angaben verwenden, aber dennoch ein anderes Layout angezeigt werden kann.

Der Master ist kein Fallback, wenn also für einen Viewport (Mobile Portrait, Mobile Landscape, ...) keine Landingpage verfügbar ist, wird im Frontend auch nichts angezeigt werden. Stelle daher sicher, dass für jeden Viewport eine Landingpage existiert. Hierfür ist die Sektion Device-Einstellungen verantwortlich. Innerhalb eines Master-/Slave-Verbundes werden alle Landingpages angezeigt, die den jeweiligen Viewport aktiviert haben.

Einkaufswelten-Vorlagen

Ab Shopware 5.3 stehen Dir die neuen Einkaufswelten-Vorlagen zur Verfügung. Sie sollen es Dir noch einfacher machen, ein emotionales Einkaufserlebnis in Deinen Shop zu integrieren und dieses auch zu teilen. Es ist zudem möglich eigene Vorlagen zu erstellen, zu exportieren und Vorlagen von anderen Autoren in deinen Shop zu importieren. Schon im Standard sind in Shopware Vorlagen für verschiedene Einsatzbereiche enthalten. Mit dem Vorlagenmanager kannst Du diese Einkaufswelten auf einfache Weise managen und so perfekt abgestimmte Einkaufswelten schnell und unkompliziert mit Deinen Inhalten füllen. Im Folgenden werden wir Dir zeigen, wie Du das konkret umsetzen kannst.

Verwaltung der Einkaufswelten-Vorlagen

Die Einkaufswelten-Vorlagen lassen sich einfach verwenden: Wenn Du deine Einkaufswelt fertiggestellt hast und diese als Vorlage verwenden möchtest, kannst du sie direkt als Vorlage abspeichern. Hierzu musst du nur auf den Button "Als Vorlage speichern" (1) klicken.

Nach einem Klick auf den Button öffnet sich ein kleines Fenster, in dem Du Deiner Vorlage einen Namen, eine Beschreibung und ein Vorschaubild zuweisen kannst. Mit einem Klick auf "Vorlage speichern" wird deine Vorlage angelegt.

Wenn Du Deine so erstellte Vorlage verwenden willst, kannst Du sie über Aus Vorlage erstellen (1) wieder aufrufen.

Hier kannst du die mit Shopware mitgelieferten Vorlagen, Vorlagen aus anderen Plugins (1) und natürlich deine selbst erstellten Vorlagen (2) verwalten. Um eine Vorlage für eine neue Einkaufswelt zu laden, wähle die betreffende Vorlage aus und klicke auf den Button "Vorlage verwenden" (3). Solltest du mit einer Vorlage nicht mehr zufrieden sein, kannst du sie über "Ausgewählte Vorlage entfernen" (4) löschen.

So wird auf Basis der Vorlage eine neue Einkaufswelt erstellt, die Du komplett nach deinen Wünschen weiterentwickeln kannst.

Einkaufswelten Vorlagen Set

Shopware bietet Dir Vorlagen aus dem eigenen Hause an, die du auf einfache Weise herunterladen, verwenden und weiterentwickeln kannst. Hierzu gibt es ein eigenes, kostenloses Plugin, welches Du im Store bzw. über den Plugin-Manager herunterladen kannst.

Beachte bitte, das einige Vorlagen die Plugins "Digital Publishing" und "Storytelling" benötigen, um korrekt verwendet werden zu können. Sind diese Plugins nicht oder in falscher Version installiert, kannst Du die entsprechende Vorlage nicht herunterladen.

Import und Export von Vorlagen

Du kannst Deine fertige Einkaufswelt exportieren, um diese zum Beispiel auch in anderen Shops verwenden zu können. Genauso ist es ebenfalls möglich, weitere Einkaufswelten von Dritten direkt in Deinen Shop zu importieren und sie dann wie eine eigene Einkaufswelt zu nutzen.

Mit einem Klick auf das Icon zum Export (1) wird deine Einkaufswelt als zip-Archiv exportiert. Mit einem Klick auf "Importieren" (2) kannst Du Deinen Shop eine bereits bestehende Einkaufswelten hinzufügen.

Sind in einer exportierten Einkaufswelt Elemente enthalten, die ein weiteres Plugin voraussetzen, wird Dir das beim Importversuch mitgeteilt. Shopware nennt Dir dann das benötigte Plugin und die benötigte Version des Plugins, erst wenn diese Voraussetzungen erfüllt sind, kannst Du die Einkaufswelt importieren.

Sind Medien in der Einkaufswelt mehrfach vorhanden, werden sie von Shopware trotzdem nur einmal importiert.

Falls beim Import Medien mit dem angegebenen Namen bereits existieren, wird das neue Bild im Media-Manager wie ein Duplikat behandelt und es wird ein Hash an den Dateinamen angehängt. Der Zuordnung des Bildes zur Einkaufswelt tut dies aber keinen Abbruch.

Tipps & Tricks für optimale Einkaufswelten

Vorwort

Da das Shopware Theme responsive ist, solltest Du immer sicherstellen, dass die Elemente Deiner EKW auf allen Geräten möglichst gut zu sehen sind. Wir geben Dir jetzt noch ein paar Tipps an die Hand, mit denen Du optimale Einkaufswelten für Deinen Shop gestalten kannst. Alle responsive Themes haben eins gemeinsam: Es gibt keine festen Auflösungen für eingefügte Medien, an denen Du Dich orientieren kannst, da diese ja je nach Endgerät variieren. Wichtiger ist beim Responsive Theme ist das Seitenverhältnis der Inhalte. Zuerst solltest Du Dir klar darüber werden, ob Du eine Einkaufswelt für alle Endgeräte im gleichen Layout erstellen willst, oder für jedes Endgerät bzw. eine bestimmte Auswahl an Endgeräten separate Layouts definieren möchtest. Die Anordnung der Elemente kannst Du innerhalb einer Einkaufswelt anpassen. Möchtest Du hingegen ein anderes Template oder eine abweichende Spaltenzahl auf gewissen Viewports realisieren, so kannst Du eine separate Einkaufswelt erstellen und diese jedoch nur für die ausgewählten Viewports aktivieren. Das hat sogar den Vorteil, dass im jeweiligen Viewport nur die dazugehörige Einkaufswelt mit ihren speziellen Elementen geladen werden muss und keine viewportübergreifende Einkaufswelt mit Elementen, die auf dem jeweiligen Viewport vielleicht gar nicht angezeigt werden. Hier musst Du überlegen, welches Konzept sich für Dich besser eignet.

Zustandekommen der Anzeigegrößen

Im Standard geben die Einstellungen einer neuen Einkaufswelt folgende Parameter vor:

• Zellenhöhe 185 px
• Abstand: 10 px
• Spalten: 4

Nicht vollflächige Einkaufswelten sind im Standard immer 1160px breit. Entsprechend Deiner Einstellungen musst Du nun die Gesamtbreite um die Abstände zwischen den Zellen (10px x 4) reduzieren und durch die Anzahl der Spalten teilen, die Formel dazu lautet also (1160-40)/4 = 280px

Ähnlich funktioniert die der Berechnung der Höhe: Zeilenhöhe plus Abstand mal Anzahl der Zeilen: (185+10)*4 für ein 4 Zeilen hohes Element.

Wenn Dein Bild größer als das Element ist, wird es unter Beachtung des Seitenverhältnis in das Element eingepasst, dabei wird jeweils die Seite des Bildes als Maßstab genommen, die die geringere Abweichung vom vorgegebenen Bildmaß zu den Maßen des Elements hat. So stellt Shopware sicher, dass das Element stets vollflächig gefüllt ist. Es wird außerdem der Ausgangpunkt des Bildzoomes berücksichtigt, den Du im Banner-Element einstellen kannst. Im Fullscreen Modus verhält sich das Element genauso, nur dass es dann auf der vollen Bildschirmbreite angezeigt wird.

HTML in Modalbox anzeigen

Wenn man Links mittels TinyMCE in der Einkaufswelt anzeigt, kann man diese in einem Modalfenster öffnen, anbei ein Beispiel für einen Versandkosten-Link:

<p class="product--tax" data-content="" data-modalbox="true" data-targetselector="a" data-mode="ajax">
inkl. MwSt. <a title="Versandkosten" href="/versand-und-zahlung" style="text-decoration:underline">zzgl. Versandkosten</a>
</p>