Einkaufswelten

Gültig ab Version:
5.3.0

Vorwort

Die Einkaufswelten bieten die Möglichkeit, die Einkaufswelten und Landingpages voll Responsive zu erstellen.

Ü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ät filtern, falls Du nach Einkaufswelten suchst, die für bestimmte Geräte erstellt wurden.
  • Template-Verwaltung (3): Die Template-Verwaltung hat nun ihren eigenen Platz direkt im Einkaufswelten-Modul. Funktional ändert sich hier aber nichts.
  • Einkaufswelt anlegen / Löschen (4): Hier kannst Du nach wie vor Einkaufswelten anlegen / löschen.
  • Listing (5): Hier werden Dir abhängig der gewählten Kategorie die Einkaufswelten und Landingpages aufgelistet.

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 die Aktionsbuttons können Einkaufswelten wie gewohnt gelöscht, bearbeitet und dupliziert werden sowie eine Vorschau geöffnet werden. Der "Aktiv"-Haken ist hier nicht klickbar, de- / aktivieren kannst Du die Einkaufswelt über den "Editieren"-Button. Duplizieren der Einkaufswelten kann auf 2 Arten geschehen, entweder direkt per Klick, dann wird die Einkaufswelt 1:1 kopiert - oder per Dropdown, dann kann direkt das Endgerät ausgewählt werden, für das die duplizierte Einkaufswelt aktiv sein wird. Dies kann jedoch auch im Nachhinein noch angepasst werden.

Screencast

Eine Einkaufswelt erstellen

Mit Hilfe des Designers ist es möglich, Einkaufswelten mit unterschiedlichem Layout bzw. unterschiedlichen Elementen für die einzelnen Endgeräte auch innerhalb einer Einkaufswelt zu vereinen.

  • 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 "Freitextfelder" wird beim Anklicken mit voller Fensterbreite angezeigt.
  • Anzeige-Einstellungen (2): Hier werden Kategorie(n) definiert und die Einstellung, ob unter der Einkaufswelt noch das Produkt-Listing angezeigt werden soll.
  • Vorschau (3): Hier kannst Du die Vorschau der Einkaufswelt aktivieren und deaktivieren.
  • Alle Verbindungen aufheben (4): Falls Du Einkaufswelten verkettet hast, kannst Du diese Verkettung hiermit auflösen.
  • Warnung (5): Diese Warnung zeigt Dir an, dass dieser Breakpoint der Einkaufswelt nicht im Frontend angezeigt wird. Die Einstellungen hierfür findest Du in den "Device-Einstellungen".
  • Breakpoints (6): Hier kannst Du auf die jeweiligen Breakpoints klicken und die Einkaufswelt für den jeweiligen Breakpoint optimieren.
  • Ausgeblendete Elemente (7): Hier siehst du, ob und wie viele Elemente im jeweiligen Breakpoint ausgeblendet sind.
  • Verketten (8): Mit dieser Funktion kannst Du Breakpoints verketten, sodass Deine Einstellungen automatisch für alle verketteten Breakpoints gelten. Um die Verkettung zu nutzen, aktiviere zuerst den Breakpoint, der als "Master" dienen soll, danach klickst Du in den anderen Breakpoints, die Du verketten willst, auf das Verketten-Icon. Sofern keine abweichenden Einstellungen definiert sind, aktiviert sich die Verkettung. Anderenfalls wirst Du gefragt, ob Du die Einstellungen Deines zu verkettenden Breakpoints überschreiben willst. Bestätige dies mit "Ja", um die Verkettung zu übernehmen.
  • Breakpoint-Reichweite (9): Dieser Balken dient als Indikator für Dein Layout. Die Einkaufswelt wird immer in minimal möglicher Größe dargestellt und der farbige Bereich gibt an, wie groß die Einkaufswelt in dem jeweiligen Brekpoint maximal werden kann.

Customer Streams

Einkaufswelten können ab der Shopware 5.3 für bestimmte Customer-Streams ein- und ausgeblendet werden. Dadurch ermöglichst du Deinem Kunden ein personalisiertes Einkaufserlebnis. Du kannst hier definieren, welcher Customer Stream diese Einkaufswelt sehen und welche Einkaufswelt ggf. ersetzt werden soll. Weitere Informationen hierzu findest du im Artikel Customer Streams.

Arbeiten mit dem Designer

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

Grid-Einstellungen

Der neue Designer unterstützt nun 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. Falls Du Zeilen oder Spalten mit Inhalt löschen möchtest, wirst Du gefragt, ob Du das wirklich bestätigen möchtest, da die Elemente darin ausgeblendet werden!

Platzieren von Elementen

Damit Du ohne separate Einkaufswelt ein alternatives Layout mit anderen Elementen für spezielle Breakpoints erstellen kannst, können Elemente nun ausgeblendet werden. Ausblenden ist nur dann nötig, wenn Du ein Element im aktuellen Breakpoint nicht wiederverwenden möchtest, aber es in anderen Breakpoints zur Verfügung stehen soll.

Das blaue X blendet ein Element auf dem aktuellen Breakpoint aus, sodass es in anderen Breakpoints noch zur Verfügung steht, während das rote X das Element aus der kompletten Einkaufswelt löscht und somit auch aus allen anderen Breakpoints gelöscht wird!

Ausgeblendete Elemente

Befinden sich ausgeblendete Elemente in Deiner Einkaufswelt, wird Dir das anhand des Icons (1) dargestellt:

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

Diese Elemente kannst Du dann wieder auf der Einkaufswelt platzieren oder löschen. Beachte, dass die Elemente beim Löschen komplett aus der Einkaufswelt entfernt werden, also auch in anderen Breakpoints nicht mehr zur Verfügung stehen!

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

Verschiedene Modi

Zunächst gilt es den richtigen Modus zu finden, wir erklären dir hier die Unterschiede.

Fluider Modus

Der Fluide Modus ist ein Modus ähnlich dem Masonry Modus, mit der Ausnahme, dass sich die Anordnung der Elemente nicht dynamisch ändert, sondern leiglich die Breite der Elemente. Somit bleibt die Anordnung der Elemente immer gewahrt, ist aber dennoch auf allen Endgeräten anzeigbar.

Resize Modus

Die Elemente werden, so wie sie angelegt werden, auf dem Endgerät dargestellt. Die Anordnung bleibt immer gleich, jedoch werden Elemente je nach Endgerät schnell kleiner, da alle Elemente ihre Position behalten.

Zeilen-Modus

Der Zeilen-Modus ist vorrangig für Content-Seiten vorgesehen und ist ein Modus, der ohne feste Zeilenhöhe arbeitet. Der Inhalt einer Zeile bestimmt in dem Fall dessen Höhe.

Achtung: Im Zeilenmodus bestimmt das höchste Element einer Zeile die 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 an. Dadurch, dass die Elemente schmaler werden, 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 in's Hochformat gebracht:

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

Abmaße von Elementen im Zeilen Modus
Element Beschreibung
Text Element Höhe richtet sich nach Inhalt des Textes.
Banner Element Zoomt das Banner auf die maximal mögliche Größe (innerhalb des Elements), ohne die Proportionen zu ändern.
Banner-Slider Verhält sich analog zum Banner Element, wobei hier die Höhe des höchsten Banners die Höhe des Elements bestimmt.
Artikel Feste Höhe von 360px.
Artikel-Slider Feste Höhe von 360px.
Kategorie-Teaser Feste Höhe von 360px.
Hersteller-Slider Feste Höhe von 260px.
iFrame-Element Feste Höhe von 360px.
YouTube-Video Feste Höhe von 360px, alternativ das Code Widget mit Embed-Code verwenden.
HTML5 Video-Element Erbt die Proportionen des Videos (Skalierungsmodus hier ohne Funktion).
Blog-Artikel Vorschaubilder haben eine Höhe von 160px, der Text streckt das Element dann weiter (siehe Text-Element).
Code Element Bekommt keine Maße, hier kann mit eigenen Anpassungen gearbeitet werden.
Side-View-Element Bekommt die Maße des Bildes, analog zum Banner-Element.
Digital Publishing Banner Falls ein Bild als Hintergrund gewählt ist, werden die Bildproportionen genutzt, falls eine Farbe als Hintergrund genutzt wird, wird eine feste Höhe von 360px gesetzt.
Digital Publishing Slider Analog zum Banner Element, das größte Digital Publishing Banner definiert die Größe des Elements.

Verfügbare Elemente

Text Element

  • Text: Im Text Element können eigene HTML Inhalte in die Einkaufswelt eingebunden werden, hierzu kann der Editor verwendet werden. In diesem kann direkt bearbeitet werden, oder per "HTML Quellcode bearbeiten" auch fertiger Quellcode eingefügt werden.
  • Titel: Der Titel wird im Frontend über dem Element selbst angezeigt
  • Kein Styling hinzufügen: Hier wird definiert, ob das Styling des Templates auch auf das HTML Element wirken soll oder nicht. Dies ist für unerfahrene Anwender empfehlenswert, da hier die einheitliche Optik im Shop gewahrt wird.

Banner

Im Banner Element kann ein Banner eingebunden und entsprechend verlinkt werden. Wenn hier ein Banner hochgeladen wird, erscheint dies als Vorschau im unteren Bereich des Elements. Die Vorschau enthält ein 3x3 Raster, dies findet Bedeutung, wenn Deine Einkaufswelt den Masonry Effekt nutzt. Der Effekt sieht vor, Elemente immer zu füllen, dazu wird an einigen Stellen auch Bildmaterial abgeschnitten. Über setzen des Rasters kann hierzu der Ausgangpunkt für den Zoom verwendet werden.

Hinweis: Wenn der Masonry Effekt genutzt wird, wird das Element im Frontend immer ausgefüllt. Daher kann es passieren, dass in manchen Endgeräten das hinterlegte Bild nicht vollständig angezeigt werden. Hierzu wurde ein 3x3 Raster implementiert, über welches der Ausgangspunkt des Zooms gesteuert werden kann. So wird sichergestellt, dass die wichtigsten Inhalte immer zu sehen bleiben. Im Raster wird der gewünschte Ausgangspunkt einfach per Klick ausgewählt.

Weiter kann im Banner Element noch das Mapping genutzt werden, so wird es möglich, dass einzelne Bereiche des Banners verlinkt sind und z.B. auf eine Artikeldetailseite verweisen. Per Klick auf Bild-Mapping anlegen: öffnet sich die folgende Ansicht:

Hier kann ein neues Mapping erstellt werden, dies kann individuell auf dem Banner platziert und über die dazugehörige Zeile im Mapping verlinkt werden. 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 immer weiterhin bestehen bleiben.

Artikel

Im Artikel-Element können Artikel definiert werden. Hierbei wird zwischen den Artikeltypen Ausgewählte Artikel, Newcomer, Topseller & zufälliger Artikel unterschieden. Ausgewählte Artikel können frei aus dem Sortiment definiert werden, alle anderen Typen werden automatisch vom System ermittelt. Nur Produktbild sorgt dafür, dass der Kunde im Frontend nur das Bild des Artikels sieht.

Kategorie Teaser

Der Kategorie Teaser stellt in der Einkaufswelt eine Kategorieverlinkung bereit. Hierzu kann ein beliebiger Artikel oder ein ausgewähltes Bild verwendet werden. Ebenso kann bestimmt werden, ob die Zielkategorie eine Artikelkategorie oder eine Blog-Kategorie ist.

Blog-Artikel

Der Blog Artikel verlinkt Blog Artikel eine Blog Kategorie in der Einkaufswelt. Hierbei kann die Blog Kategorie ausgewählt werden sowie die Anzahl der angezeigten Artikel und dessen Tumbnailgröße.

Banner-Slider

Im Banner Slider kannst Du mehrere Banner in einer Slideshow laufen lassen. Hier kannst Du die folgenden Optionen einstellen:

  • Titel: Titel des Elementes, dieser wird im Frontend als Overlay angezeigt.
  • Pfeile anzeigen: Zeigt die Pfeile im Frontend an, damit der Kunde im Frontend manuell durch die Banner navigieren kann.
  • Nummern anzeigen: Zeigt die Nummerierung der Banner im Frontend an. Beachte, dass diese Funktion nur im Emotion-Theme Verwendung findet.
  • Scroll-Geschwindigkeit: Hier stellst Du die Scrollgeschwindigkeit in "ms" ein, diese Zeit wird Shopware warten, um von einem Banner zum nächsten zu wechseln.
  • Automatisch rotieren: Definiert, ob Shopware die Banner automatisch rotiert oder nicht.
  • Rotationsgeschwindigkeit: Dies stellt die Zeit ein, die ein Banner sichtbar bleibt, bevor Shopware zum nächsten Banner rotiert.

In der Banner Verwaltung können dann die Bilder hochgeladen werden und für jedes Bild per Doppelklick ein Link, Alt-Text und ein Titel definiert werden.

Youtube-Video

Hier kann ein YouTube Video eingebunden werden. Die Einstellungen beschränken sich hier auf die Video-ID und die Einstellung, das Video in HD zu zeigen. Die YouTube Video-ID findest Du hier:

iFrame-Element

Im iFrame-Element können bereits bestehende URLs eingebettet werden.

Hersteller-Slider

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

  • Herstellertyp: Hersteller einer Kategorie holt sich nur Hersteller einer ausgewählten Kategorie. Ausgewählte Hersteller lässt dich die gewünschten Hersteller komplett selbst definieren.
  • Überschrift: Hier kann die Überschrift definiert werden, die dann als Overlay auf dem Element dargestellt wird.
  • Pfeile anzeigen: Zeigt die Pfeile zur manuellen Navigation im Slider an.
  • Nummern anzeigen: Zeigt die Seitennummern im Slider an. Beachte, dass diese Einstellung von Shopware 5 Themes nicht mehr unterstützt wird.
  • 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.
    • 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.
  • Kategorie-Auswahl: Hier wird die betreffende Kategorie ausgewählt, aus der die Artikel geholt werden. Möchtest Du alle Kategorien ausgeben, wähle einfach die Hauptkategorie des Shops.
  • Max Anzahl: Definiert, wie viele Artikel maximal im Slider angezeigt werden.
  • Überschrift: Hier kann die Überschrift definiert werden, die dann als Overlay auf dem Element dargestellt wird.
  • Pfeile anzeigen: Zeigt die Pfeile zur manuellen Navigation im Slider an.
  • Nummern anzeigen: Zeigt die Seitennummern im Slider an. Beachte, dass diese Einstellung von Shopware 5 Themes nicht mehr unterstützt wird.
  • Scroll-Geschwindigkeit: Definiert die Zeit, die der Slider benötigt, um die Seite zu wechseln.

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 wird das Video so im Element platzieren, dass das Video stets zu 100% sichtbar bleibt und das Seitenverhältnis erhalten bleibt. Hier kann es aber Formatbedingt zu schwarzen Balken im Element kommen.
    • Füllen wird das Element unter Berücksichtigung des Seitenverhältnisses so vergrößert, dass keine schwarzen Balken im Element erscheinen, jedoch kann Formatbedingt ein Teil des Videos abgeschnitten werden.
    • Strecken wird das Video ohne Rücksicht auf das Seitenverhältnis auf die Größe des Elementes strecken. Hier kann es formatbedingt zu Streckungen oder Stauchungen im Bild kommen. Beachte, dass die Elemente je nach genutztem Endgerät unterschiedlich groß dargestellt werden können, dadurch kann es vorkommen, dass ein Video auf dem Desktop unter Umständen anders aussieht, als auf einem Smartphone. Technisch bedingt ist dies aber nicht anders möglich.
  • .webm-Video: Gibt die Dateiquelle für das WebM Video an. Hier kann sowohl ein Element aus dem Media-Manager als auch eine externe Quelle genutzt werden.
  • .ogv-Video: Gibt die Dateiquelle für das OGG Video an. Hier kann sowohl ein Element aus dem Media-Manager als auch eine externe Quelle genutzt werden.
  • .mp4-Video: Gibt die Dateiquelle für das MP4 Video an. Hier kann sowohl ein Element aus dem Media-Manager als auch eine externe Quelle genutzt werden.
  • Vorschau-Bild: Hier kann das Bild definiert werden, dass angezeigt wird, wenn das Video noch nicht gestartet wurde.
  • Video automatisch abspielen: Spielt das Video automatisch ab, wenn die Seite angezeigt wird.
  • Video automatisch vorladen: Lädt das Video automatisch vor, sodass es im Regelfall flüssiger und ohne zwischenladen abgespielt werden kann.
  • Video-Steuerung anzeigen: Ist diese Funktion aktiv, wird eine Steuerungsleiste am unteren Rand des Videos dargestellt, mit dem sich das Video steuern lässt. Falls deaktiviert, wird 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 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 den Text für das Overlay über dem Video fest.
  • Overlay-Farbe: Legt die Farbe des Overlay in RGBA fest.

Code Element

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

Hinweis: JavaScript ist ohne <script>-Tags einzugeben.

Storytelling

Hast Du das Plugin Shopware Storytelling, bzw. Einkaufswelten Advanced, installiert, kannst Du die Einkaufswelten noch weiter optimieren, in dem Du den Kunden auf Entdeckungsreise schickst und ihn emotional für Deine Produkte begeisterst. Mit dem Storytelling Plugin schaffst Du folgende Möglichkeiten:

  • Einkaufswelt in Abschnitte einteilen, durch die der Kunde geleitet wird.
  • SideView Elemente, sodass Du in der Einkaufswelt aktiv Produkte bewerben kannst
  • QuickView, dass Kunden sich die Artikel anschauen und ggf. gleich merken können, ohne die Einkaufswelt zu verlassen.

Hinweis: Storytelling Einkaufswelten werden immer bildschirmfüllend angezeigt! Ebenso haben Storytelling Einkaufswelten immer Priorität, das bedeutet, dass, sofern eine Storytelling Einkaufswelt in der Kategorie angezeigt wird, keine weitere Einkaufswelt angezeigt werden kann, egal ob diese aktiv ist oder nicht.

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

Zusätzliche Optionen

Einkaufswelten Einstellungen

Zum einen kann der Einkaufswelten Typ gewählt werden, hier wird definiert, ob es sich um eine normale Einkaufswelt, oder eine Storytelling Einkaufswelt handelt. Beachte bitte, dass beim Wechsel der Typen die Einstellungen und Elemente verloren gehen, daher raten wir Dir dringend davon ab, bestehende Einkaufswelten in Storytelling Einkaufswelten oder umgekehrt umzuwandeln! In Zeilen pro Abschnitt kann definiert werden, wie viele Zeilen jeder Abschnitt der Storytelling Einkaufswelt haben soll. Grundsätzlich kannst Du diese Einstellung auch im Betrieb ändern, beachte aber, dass das verringern von Zeilen die darin befindlichen Elemente löscht! Ebenso kann nun konfiguriert werden, ob angeklickte Artikel in der QuickView geöffnet werden sollen, oder Shopware weiterhin auf die Detailseite springen soll. Die QuickView sieht im Frontend dann wie folgt aus:

Designer

Erstellst Du eine Storytelling Einkaufswelt, verändert sich der Designer, um die Erstellung der einzelnen Abschnitte komfortabler gestalten zu können.

Der Designer kann nun 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.

SideView Element

Das SideView Element kann ein Banner mit einem ausklappbaren ArtikelSlider bereitstellen, um direkt im Banner die gewünschten Artikel platzieren zu können.

  • Side-View Position: Hier kann definiert werden, ob die Artikel von rechts oder von unten in das Banner sliden sollen.
  • Side-View Größe: Hier wird definiert, ob die Artikel das Banner komplett überlagern, oder nur zum Teil.
  • Kategorie auswählen: Definiert die Kategorie, aus denen 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 kann gewählt werden, ob das Element die Artikel selbständig holen soll (Newcomer, Topseller, Preis (aufsteigend) und Preis (absteigend)) oder ob Du die Artikel selbst definieren möchtest. In diesem Fall erscheint unten die bekannte Artikeleingabe, in der die Artikel definiert werden können:

  • Maximale Produktanzahl: Dies reguliert die maximale Artikelanzahl. 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 steht.
  • Pfeile anzeigen: Dies zeigt die Pfeile an, um den Slider manuell durchzublättern. Beachte hierbei, dass wenn die Pfeile nicht angezeigt werden und der Slider im Frontend angehalten wird (durch Mouseover), dieser nicht wieder gestartet wird!
  • Automatisch starten: Lässt den Slider automatisch durchlaufen.
  • Banner auswählen: Hier wählst Du das Banner aus, welches im Element angezeigt werden soll. Bitte beachte hier die Gegebenheiten und Funktionsweise der Banner, welche hier zu finden sind sowie die Tipps zur optimalen Gestaltung der Einkaufswelt.

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. Da Landingpages auch responsive sein müssen, gibt es diese als Master- und Slave Landingpages, wie das genau funktioniert, wird nachfolgend erklärt.

Master und Slave

Um für jedes Endgerät eine optimierte Landingpage erstellen zu können, gibt es Master und Slaves.

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 jeweligen Geräte unter einer URL erreichbar sind und gleiche SEO-Angaben vorweisen, aber dennoch ein anderes Layout angezeigt werden kann.

Hinweis: 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. Stelle daher sicher, dass für jeden Viewport eine Landingpage existiert.

Tipps & Tricks für optimale Einkaufswelten

Vorwort

Da das Shopware 5 Theme responsive ist, muss immer sichergestellt sein, dass Deine Elemente auf allen Geräten möglichst zu 100% sichtbar sind. Dazu geben wir Dir hier noch ein paar Tipps an die Hand, damit Du optimale Einkaufswelten gestalten kannst. Anders als im Emotion Template gibt es im Responsive Theme keine festen Größen mehr, da diese je nach Endgerät variieren. Viel eher ist das Seitenverhältnis der Inhalte wichtig. Zum ersten solltest Du Dir klar darüber werden, ob Du eine Einkaufswelt für alle Endgeräte erstellen willst, oder je Endgerät separate Einkaufswelten definieren möchtest. Separate Einkaufswelten können wesentlich einfacher erstellt werden, da Du hier keine Rücksicht auf andere Geräte nehmen musst.

Im Standard werden 2 Raster für Einkaufswelten mitgeliefert. Diese lassen sich beliebig anpassen. Beachte bitte, dass wir keinen Support für eigene Templates oder Einkaufswelten auf Basis von eigenen Templates / Rastern geben können.

Da die folgenden Anpassungen fast ausschließlich im Resize-Modus nötig werden, gehen wir hier auch nur auf diesen ein.

Die Standard Raster

Die Standard Raster geben folgende Werte vor:

  • Zellenhöhe 185 px
  • Abstand: 10 px

Wenn wir nun ein übergroßes Bild in ein Banner Element einfügen, finden wir im Frontend folgende Elementgrößen vor: Desktop: 1160 px x 185 px

Das Element wird seine Zeilenhöhe stets behalten, die Breite aber je nach Endgerät verkleinert. Wenn das hinterlegte Bild größer ist, als das Element, wird das Bild je nach gesetztem Ausgangspunkt für den Zoom außen abgeschnitten, es gehen dann also Informationen vom Bild verloren. Wird das Fenster nun kleiner, wird das Element das Bild so lange verkleinern, bis das Banner das Element in der Höhe komplett füllt. Ist das geschehen, wird das Bild nur noch in der Breite beschnitten. Im Fullscreen Modus verhält sich das Element genauso, nur dass es halt über die volle Bildschirmbreite angezeigt wird.

Einkaufswelten-Vorlagen

Ab Shopware 5.3 stehen Dir die neuen Einkaufswelten-Vorlagen zur Verfügung. Sie werden es Dir noch einfacher machen, ein emotionales Einkaufserlebnis in Deinen Shop zu integrieren und dieses auch zu teilen: Es ist möglich eigene Vorlagen zu erstellen, zu exportieren und Vorlagen von anderen in deinen Shop zu importieren. Schon im Standard von Shopware sind 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 beschreiben, wie Du dies 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 diese direkt als Vorlage abspeichern. Hierzu musst du nur den entsprechenden Button "Als Vorlage speichern" (1) verwenden.

Nach einem Klick darauf öffnet sich ein kleines Fenster, in welchem Du Deiner Vorlage einen Namen, eine Beschreibung und ein Vorschaubild deiner Wahl geben kannst. Mit einem Klick auf "Vorlage speichern" wird deine Vorlage dann angelegt.

Wenn Du deine so erstellte Vorlage verwenden willst, kannst du sie über Aus Vorlage erstellen (1) erreichen.

Hier kannst du die Vorlagen von Shopware selbst oder aus anderen Plugins (1) und natürlich deine selbst erstellten Vorlagen (2) verwalten. Um Deine Vorlage letztendlich für eine neue Einkaufswelt als Basis zu nehmen, klickst du einfach deine Vorlage an und dann den Button "Vorlage verwenden" (3). Solltest du mit einer Vorlage nicht mehr zufrieden sein, kannst du sie über "Ausgewählte Vorlage entfernen" (4) wieder löschen.

So wird auf Basis der Vorlage eine komplett 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 herunterladen kannst.

Hinweis: Beachte bitte, das einige Vorlagen die Plugins Digital Publishing und Storytelling benötigen, um verwendet werden zu können.

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 dir ebenfalls möglich, weitere Einkaufswelten direkt in deinen Shop zu importieren und sie dann wie eine eigene Einkaufswelt zu nutzen. Beginnen wir hier einmal mit dem Export; Mit einem Klick auf das Icon zum Export (1) wird deine Einkaufswelt exportiert. Genauso einfach ist das Importieren, hier kannst du den Import mit einem Klick auf "Importieren" (2) einfach vornehmen.

Es ist möglich, dass in den Einkaufswelten Komponenten aus anderen Plugins vorkommen: Sollte dir zur Verwendung der importierten Einkaufswelt noch ein Plugin fehlen, wird dir das Über eine Nachricht mitgeteilt. Die Einkaufswelt kann in diesem Fall nicht importiert werden, solange das benötigte Plugin in der passenden Version installiert ist. Falls in der Einkaufswelt Medien doppelt vorhanden sind, werden diese nur einmal importiert.

Eine Einkaufswelt für mehrere Kategorien und Subshops (ab SW5.3.4)

Ab Shopware 5.3.4 ist es möglich eine Einkaufswelt mehreren Kategorien zuzuweisen. Somit kann also eine Einkaufswelt innerhalb des Shops gleichzeitig in Kategorie A und Kategorie B auftauchen.

Dies geht auch dann, wenn die Katgeorie B sich in einem Subshop befindet. Die Einkaufswelt wird dann gleichermaßen in Shop A und Shop B auftauchen.

€ 5,00

Preise inkl. gesetzlicher
MwSt. + Versandkosten*