Erlebniswelten
Den Menüpunkt Erlebniswelten findest Du unterhalb von Inhalte. In den Erlebniswelten kannst Du Content-Seiten wie Landingpages, Shopseiten und Kategorie-Layouts erstellen und diese zentral verwalten.
Die erstellten Layouts bestehen aus Sektionen, in die einzelne Blöcke hinzugefügt werden, die wiederum aus einem oder mehreren Elementen wie Texten oder Bildern bestehen.
Ein Tutorial zum gestalten Deines Shops findest Du hier.
Weitere Funktionen für die Erlebniswelten stellt die Erweiterung CMS-Erweiterungen bereit, welche Dir ab Shopware Evolve zur Verfügung steht.
Übersicht
In der Übersicht findest Du alle bereits angelegten Layouts in einer Liste (1). Über das Suchfenster (2) kannst Du direkt nach einem erstellten Layout suchen. Im Dropdown Menü Sortieren nach: (3) kannst Du die Liste nach Erstelldatum oder Bearbeitungsdatum sortieren.
Auf der linken Seite im Menü Layouts (4) lassen sich die Layouts thematisch Filtern. Hier kannst Du beispielsweise die Anzeige auf alle Shopseiten oder alle Landingpages begrenzen.
Über das Kontextmenü (5) in jedem Eintrag kannst Du das jeweilige Layout löschen, duplizieren oder eine Vorschau hinterlegen. Diese Vorschau dient dazu, die Layouts in dieser Übersicht schneller unterscheiden zu können.
Mit dem Button Neues Layout anlegen (6) kannst Du ein neues Layout erstellen.
Um ein Layout zu bearbeiten reicht es, auf den entsprechenden Eintrag zu klicken.
Neues Layout anlegen
Beim Anlegen eines neuen Layouts werden zunächst einige Punkte für die Konfiguration über eine Schritt-für-Schritt-Abfrage definiert.
Nachdem Du auf Neues Layoutanlegen geklickt hast, erhältst Du eine Auswahl, für welchen Seitentyp Du ein Layout gestalten möchtest. Dieser dient zum einen dazu, Deine Layouts in der Übersicht besser zu sortieren. Des Weiteren stehen Dir je nach Typ verschiedene Blöcke zur Verfügung. Aktuell kannst Du Shopseiten, Landingpages und Kategorieseiten erstellen.
- Shopseite:
Als Shopseiten sind alle Service Seiten Deines Shops zu verstehen. Dies können beispielsweise die AGB Seite, die Versandbedingungen oder das Kontaktformular sein. - Landingpage:
Landingpages sind Shopseiten, die über eine eigene URL zu erreichen sind. Sie bieten Dir vielfältige Gestaltungs- und Marketingmöglichkeiten in Deinem Shop. Dies können Themenseiten sein, in denen sich Marketing betreiben lässt oder andere Seiten, auf denen Deine Kunden im Rahmen des Shop Besuchs landen können. - Kategorieseite:
Als Kategorieseite werden die Startseiten einer Kategorie bezeichnet. Sie beinhaltet automatisch bereits ein Produktlisting.
Des Weiteren hast Du auf einer Kategorieseite die Möglichkeit, dynamisch Texte aus der entsprechenden Kategorie anzeigen zu lassen. Hierzu steht Dir in den Elementeinstellungen eines Text Elementes rechts über dem Editor die Datenzuordnung zur Verfügung. - Produktseite:
Jedes Produkt hat eine eigene Produktseite, auf der alle Informationen zu diesem Produkt zu finden sind und auf der das Produkt in den Warenkorb gelegt werden kann. Einige Blöcke wie Produktbeschreibung oder die Buybox inklusive Produktbildgallerie sind im Standard schon vorhanden. Die Seite kann aber auch komplett selbst gestaltet werden.
Sektion
Wenn Du Dich für einen Typ entschieden hast, kannst Du auswählen, wie die Sektion des Layouts aufgebaut werden soll. Dir steht hierzu ein Layout mit einer Sidebar oder alternativ die volle Seitenbreite zur Verfügung.
Die Sidebar bietet sich z.B. an, um dort die Kategorie-Navigation oder Filter zu platzieren.
Bei der späteren Bearbeitung kannst Du weitere Sektionen hinzufügen, diese müssen nicht vom gleichen Layouttyp sein wie die initiale Auswahl.
Name
Auf der folgenden Seite vergibst Du den Namen für das zu erstellende Layout. Dieser sollte so gewählt werden, dass Du daran später direkt erkennen kannst, wofür das Layout verwendet werden soll.
Nachdem Du die Schritte für die Grundkonfiguration abgeschlossen hast, öffnet sich der Layout-Editor.
Layout-Editor
Im Layout-Editor erstellst Du neue Layouts, Du kannst aber auch bereits vorhandene Layouts öffnen und diese anpassen.
Der zentrale Bereich dient zur Bearbeitung (1) Deines Layouts.
Auf der rechten Seite befindet sich die Menüleiste, über die Du die einzelnen Funktionen zur Bearbeitung aufrufen kannst. Diese sind unterteilt in die Bereiche Einstellungen (2), Blöcke (3) und Navigator (5). Je nachdem, ob Du einen bestimmten Block angeklickt hast oder die gesamte Sektion (9), gelangst Du über (4) zu den Block-Einstellungen oder den Sektion-Einstellungen.
Über Layout-Zuweisung (6) kannst Du einstellen, welcher Kategorie oder welcher Landingpage das Layout zugewiesen wird. Die Zuweisung findest Du im Anschluss ebenfalls in den Einstellungen der jeweiligen Kategorie.
Detaillierte Informationen erhältst Du im jeweiligen Abschnitt weiter unten.
Über die +-Button (7) und (8) im Editor hast Du die Möglichkeit, eine weitere Sektion hinzuzufügen. Diese Sektion muss nicht den gleichen Aufbau (mit oder ohne Sidebar) verwenden wie die bereits vorhandene Sektion.
Über die Symbole (9) in der Leiste am oberen Bildschirmrand kannst Du zwischen den einzelnen Viewports wechseln und so erkennen, wie das Layout in den unterschiedlichen Ansichten dargestellt wird. Außerdem kannst Du dort in Listendarstellung der vorhandenen Elemente wechseln, um schneller den Inhalt der Elemente füllen zu können, ohne jedes Element einzeln öffnen zu müssen.
Einstellungen
In den Einstellungen kannst Du den bei der Anlage vergebenen Layout-Namen und nachträglich den Layout Typ ändern.
Blöcke
Im Menüpunkt Blöcke stehen dir diverse, vordefinierte Blöcke zur Verfügung, diese sind nach Kategorien gruppiert, welche Du über das Dropdown Menü auswählen kannst. Die Blöcke bestehen aus einem Element oder mehreren Elementen, die einzeln mit Inhalt gefüllt werden können.
Blöcke hinzufügen
Du kannst sie per Drag & Drop in den Editor ziehen und an der gewünschten Stelle platzieren.
Element mit Inhalt füllen
Um den Inhalt eines Elements innerhalb eines Blocks anzupassen, fahre in der Vorschau mit der Maus über das Element. Dadurch werden im Element oben rechts 2 Symbole angezeigt. Das Zahnrad-Symbol (1) öffnet ein neues Fenster, in dem Du den Inhalt des Elements festlegen kannst.
Über das Symbol mit den 2 Pfeilen (2) kannst Du da Element austauschen, z.B. ein Textelement gegen ein Bild.
Je nachdem, welchen Block Du bearbeiten möchtest, gibt es verschiedene Einstellungsmöglichkeiten.
Text
Textblöcke sind Blöcke, die nur Text enthalten. Diese stehen Dir in unterschiedlichen Formaten zur Verfügung.
In den Einstellungen eines Text Elementes steht Dir ein Texteditor zur Verfügung, mit dem Du den Text anpassen kannst. Wenn Du als Layout Typ Kategorieseite gewählt hast, steht dir rechts über dem Editor die Datenzuordnung zur Verfügung. Hier kannst Du dynamische Texte der Kategorie, wie z.B. die Kategorie-Beschreibung auswählen, welche in diesem Element dann ausgespielt werden.
Bei Kategorie- und Produkt-Seiten hast Du zusätzlich die Möglichkeit, Variablen (1) einzubinden. Hierüber kannst Du auf Kategorie bzw. Produktinformationen zugreifen und diese direkt in den Text einbinden.
Du kannst die Variablen über die Funktionen des Editors formatieren (z.B. Fett geschrieben). Beachte hierbei jedoch, dass die Formatierung für die vollständige Variable inkl. der geschweiften Klammeren "{{ variable }}" erfolgt. Sonst wird die Variable nicht mehr korrekt im Quellcode hinterlegt und kann nicht durch den eigentlichen Inhalt ersetzt werden.
Das folgende Feature steht allen Kunden mit einem kommerziellen Plan zur Verfügung
AI Copilot
Falls Du Inspiration suchst, kannst Du Dir Texte mit einer künstlichen Intelligenz vorschlagen lassen. Diese kannst Du dann entweder übernehmen oder ggf. noch an Deine Bedürfnisse anpassen.
Falls kein Text vorhanden ist, kannst Du den AI Copilot (1) mit der Leertaste öffnen. Sollte bereits Text vorhanden sein, kannst Du den gewünschten Text markieren und über die Leiste durch den AI Copilot (1) ersetzen lassen.
Link einfügen
Innerhalb eines Textblocks können Links eingefügt werden. Ab der Version 6.4.10.0 ist es möglich, dass diese Links nicht nur auf eine feste URL, sondern auch auf ein Produkt, eine Kategorie, eine E-Mail-Adresse oder eine Telefonnummer verweist.
Bei der Verlinkung zu einem Produkt oder eine Kategorie muss die Content-Seite dem selben Verkaufskanal zugeordnet sein, wie das verlinke Produkt oder die verlinkte Kategorie. Soll zu einem Produkt oder einer Kategorie verlinkt werde, die sich in einem anderen Verkaufskanal befindet, so muss der Verlinkungstyp "URL" verwendet werden.
Bilder
Bilder Blöcke enthalten ausschließlich Bilder. Auch diese Blöcke stehen in verschiedenen Formaten zur Verfügung.
Bild (1): Hier kannst Du zunächst das Bild ändern, welches angezeigt werden soll. Mit dem Punkt Datenzuordnung kannst Du den Inhalt des Bildes automatisch füllen lassen. Auf einer Produktseite kannst Du hier z.B. das Vorschaubild des Produktes oder des Herstellers anzeigen lassen. Auf einer Kategorieseite könntest Du hier durch die Datenzuordnung das Kategoriebild der zugewiesenen Kategorie anzeigen lassen.
Anzeigemodus (2): Hier entscheidest Du, wie das Bild im Block dargestellt werden soll. Bei Standard passt sich das Bild bis zu seiner nativen Größe an die umgebende Box an. Bei Füllen wird die Box mit dem Bild komplett gefüllt. Bei Strecken wird das Bild auf die Größe der Box gestreckt.
Vertikale Ausrichtung (3): Gib hier an, ob das Bild sich an der oberen oder an der unteren Kante ausrichten soll, oder ob es mittig angezeigt werden soll.
Link Typ (4): Hier kannst du auswählen ob du eine URL, ein Produkt, eine Kategorie, eine E-Mail Adresse oder eine Telefon Nummer dem Link hinterlegen möchtest.
Link zu (5): Hier kannst Du angeben auf was verlinkt werden soll. Entweder durch die Eingabe einer URL, E-Mail Adresse oder Telefonnummer oder durch auswählen einer Kategorie oder eines Produkts in einem Dropdown. Dies kann wahlweise im gleichen Tab oder in einem neuen Tab (6) geschehen.
Eine Größenbegrenzung hat das Bild Element nicht. Du solltest aber generell darauf achten, dass das Bild aus Performance Gründen nicht zu groß ist. In den Demodaten verwenden wir beispielsweise ein ganzflächiges Bild mit einer Auflösung von 1280x528px.
Die Bild-Breite ist im Standard-Template auf maximal 1320 Pixel bei Full-HD-Auflösung (und höher) festgelegt und wird bei kleineren Auflösungen dynamisch herunterskaliert.
Neben den hier erläuterten grundlegenden Einstellungen der meisten Bild-Elemente kannst Du bei Slidern und Galerien tiefergreifende Einstellungen vornehmen. Diese erläutern wir Dir nachfolgend.
Anzeigemodus (1): Hier gibst Du an, auf welche Art die Bilder angezeigt werden sollen.
Standard: Das Bild wird komplett angezeigt. Die Höhe des gesamten Slider-Elements ist daher dynamisch und passt sich automatisch entsprechend an. Daher ist es zu empfehlen, dass alle Bilder im Slider das gleiche Seitenverhältnis aufweisen, da sonst die Elemente unterhalb des Sliders "hoch- und runterspringen".
Füllen: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
Beinhalten: Die Höhe des Elements wird automatisch anhand des höchsten hinterlegten Bildes ermittelt. Im Gegensatz zum Modus Standard wird diese aber nicht beim Wechsel zwischen verschiedenen Bildern angepasst. Die Ausrichtung von niedrigeren Bildern kannst Du über den Punkt Vertikale Ausrichtung definieren.
Minimale Höhe (2): Diese Einstellung ist nur für den Anzeigemodus Füllen verfügbar. Es ist dann erforderlich, eine Eingabe vorzunehmen, da sonst keine Bilder angezeigt werden. Die Angabe wird in Pixeln als Ganzzahl vorgenommen und zusätzlich wird nach der Zahl direkt "px" (als Abkürzung für Pixel) angehängt. Die Eingabe könnte also z.B. so aussehen: 500px
Vertikale Ausrichtung (3): Diese Einstellung wird beim Anzeigemodus Beinhalten verfügbar und legt fest, wie die Bilder innerhalb des Slider-Elements platziert werden soll. Bei kleineren Bildern werden entsprechende freie Flächen angezeigt.
Pfeile-Navigation (4): Fügt Pfeile zum Durchklicken der Bilder hinzu. Du kannst festlegen, ob die Pfeile auf oder neben dem angezeigten Bild dargestellt werden sollen oder diese auch ausblenden.
Punkte-Navigation (5): Alternativ (oder zusätzlich) zu der Pfeilnavigation kannst Du die Punkte-Navigation verwenden. Diese stellt für jedes hinterlegte Bild einen kleinen Punkt dar, über den Du direkt das jeweilige Bild aufrufen kannst.
Die Darstellung ist auf oder unter dem Bild möglich.
Automatischer Wechsel (6): Hier kannst Du einstellen, ob das Bild automatisch sliden soll.
Verzögerung (7): Die dort hinterlegte Zahl bestimmt, nach wie vielen Sekunden der Slider anfängt zu "sliden". Die Angabe erfolgt hier in Millisekunden.
Animationsverzögerung (8): Die dort hinterlegte Zahl bestimmt, wie schnell die Bilder sliden. Die Angabe erfolgt auch hier in Millisekunden.
Verlinkung(9): Für jedes Bild, das Du in den Slider hochgeladen hast, kannst Du einen externen Link angeben, zu der das Bild führen soll, wenn man darauf klickt. Außerdem kannst Du per Checkbox entscheiden, ob der Link in einem neuen Tab geöffnet werden soll.
Galerie
Anzeigemodus (1): Hier gibst Du an, auf welche Art die Bilder angezeigt werden sollen.
Standard: Das Bild wird komplett angezeigt. Die Höhe des gesamten Slider-Elements ist daher dynamisch und passt sich automatisch entsprechend an. Daher ist es zu empfehlen, dass alle Bilder im Slider das gleiche Seitenverhältnis aufweisen, da sonst die Elemente unterhalb des Sliders "hoch- und runterspringen".
Füllen: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
Beinhalten: Die Höhe des Elements wird automatisch anhand des höchsten hinterlegten Bildes ermittelt. Im Gegensatz zum Modus Standard wird diese aber nicht beim Wechsel zwischen verschiedenen Bildern angepasst. Die Ausrichtung von niedrigeren Bildern kannst Du über den Punkt Vertikale Ausrichtung definieren.
Minimale Höhe (2): Diese Einstellung ist nur für den Anzeigemodus Füllen verfügbar. Es ist dann erforderlich, eine Eingabe vorzunehmen, da sonst keine Bilder angezeigt werden. Die Angabe wird in Pixeln als Ganzzahl vorgenommen und zusätzlich wird nach der Zahl direkt "px" (als Abkürzung für Pixel) angehängt. Die Eingabe könnte also z.B. so aussehen: 500px
Vertikale Ausrichtung (3): Diese Einstellung wird beim Anzeigemodus Beinhalten verfügbar und legt fest, wie die Bilder innerhalb des Slider-Elements platziert werden soll. Bei kleineren Bildern werden entsprechende freie Flächen angezeigt.
Pfeile-Navigation (4): Fügt Pfeile zum Durchklicken der Bilder hinzu. Du kannst festlegen, ob die Pfeile auf oder neben dem angezeigten Bild dargestellt werden sollen oder diese auch ausblenden.
Punkte-Navigation (5): Alternativ (oder zusätzlich) zu der Pfeilnavigation kannst Du die Punkte-Navigation verwenden. Diese stellt für jedes hinterlegte Bild einen kleinen Punkt dar, über den Du direkt das jeweilige Bild aufrufen kannst.
Die Darstellung ist auf oder unter dem Bild möglich.
Vorschau Navigation (6): Lege fest, ob die kleinen Bilder für die Galerie-Vorschau links neben dem Bild oder unterhalb angezeigt werden soll.
Zoom (7): Wenn Du diese Option aktivierst, wird eine vergrößerte Darstellung des Bildes angezeigt, wenn der Shopbesucher mit der Maus über das Bild fährt.
Vollbild-Galerie (8): Ermöglicht es mit einem Klick auf das Bild die Galerie vollflächig im Browserfenster anzuzeigen.
Commerce
In den Commerce-Blöcken findest Du verschiedene Produktspezifische Blöcke um Produkte in Deinem Shop anzubieten und zu bewerben.
Produktname & Hersteller-Logo
Der Block Produktname & Hersteller-Logo bestehen aus einem Text Block und aus einem Bild Block. Wenn es sich bei der Erlebniswelt um eine Produktseite handelt, wird die Textbox mit dem jeweiligen Produktnamen gefüllt und der Bild Block wird mit dem hinterlegten Logo des Herstellers hinterlegt und verlinkt.
Drei Spalten, Produkte-Boxen
Produkt (1): Für jedes der drei Produkte in dieser Box kannst Du hier festlegen, welches Produkt hier angezeigt werden soll.
Layout-Typ (2): Dieser gibt an, wie das Produkt präsentiert werden soll. Du kannst das Produkt in der standard Ansicht, mit großem Bild oder mit minimalem Text anzeigen lassen.
Anzeigemodus (3): Hier gibst Du an, auf welche Art die Bilder des Produktes angezeigt werden sollen.
Standard: Das Bild wird komplett angezeigt. Die Höhe des gesamten Slider-Elements ist daher dynamisch und passt sich automatisch entsprechend an. Daher ist es zu empfehlen, dass alle Bilder im Slider das gleiche Seitenverhältnis aufweisen, da sonst die Elemente unterhalb des Sliders "hoch- und runterspringen".
Füllen: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
Beinhalten: Die Höhe des Elements wird automatisch anhand des höchsten hinterlegten Bildes ermittelt. Im Gegensatz zum Modus Standard wird diese aber nicht beim Wechsel zwischen verschiedenen Bildern angepasst. Die Ausrichtung von niedrigeren Bildern kannst Du über den Punkt Vertikale Ausrichtung definieren.
Vertikale Ausrichtung (4): Diese Einstellung wird beim Anzeigemodus Beinhalten verfügbar und legt fest, wie die Bilder innerhalb des Slider-Elements platziert werden soll. Bei kleineren Bildern werden entsprechende freie Flächen angezeigt.
Produkt-Slider
Inhalt (1): Im Inhalt-Tab gibst Du zum einen die Überschrift des Sliders an, welche auch im Frontend angezeigt wird und entscheidest, welche Produkte in dem Slider vorhanden sein sollen.
Anzeigemodus (2): Hier gibst Du an, auf welche Art die Bilder des Produktes angezeigt werden sollen.
Standard: Das Bild wird komplett angezeigt. Die Höhe des gesamten Slider-Elements ist daher dynamisch und passt sich automatisch entsprechend an. Daher ist es zu empfehlen, dass alle Bilder im Slider das gleiche Seitenverhältnis aufweisen, da sonst die Elemente unterhalb des Sliders "hoch- und runterspringen".
Füllen: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
Beinhalten: Die Höhe des Elements wird automatisch anhand des höchsten hinterlegten Bildes ermittelt. Im Gegensatz zum Modus Standard wird diese aber nicht beim Wechsel zwischen verschiedenen Bildern angepasst. Die Ausrichtung von niedrigeren Bildern kannst Du über den Punkt Vertikale Ausrichtung definieren.
Vertikale Ausrichtung (3): Diese Einstellung wird beim Anzeigemodus Beinhalten verfügbar und legt fest, wie die Bilder innerhalb des Slider-Elements platziert werden soll. Bei kleineren Bildern werden entsprechende freie Flächen angezeigt.
Layout-Typ (4): Dieser gibt an, wie das Produkt präsentiert werden soll. Du kannst das Produkt in der standard Ansicht, mit großem Bild oder mit minimalem Text anzeigen lassen.
Navigation (5): Hier kannst Du die Navigations-Pfeile an den Seiten aktivieren oder deaktivieren.
Automatischer Wechsel (6): Aktivierst Du diese Option, wechselt der Slider etwa alle 5 Sekunden zum nächsten Produkt.
Rahmen (7): Mit dieser Option ziehst Du einen Rahmen um den Slider herum, um ihn so von der restlichen Erlebniswelt abzugrenzen.
Minimale Weite (8): Dieser Wert gib an, wie breit die einzelnen Produktboxen minimal sein sollen.
Galerie und Buybox
Der Block Galerie und Buybox bestehen aus einem Galerie Bilder Block und aus der Buybox. In dieser kannst Du angeben, mit welchem Produkt die Buybox verknüpft werden soll und wie die genaue Position zum Galerieblock sie haben soll. Wenn es sich bei der Erlebniswelt um eine Produktseite handelt, wird die Galerie und die Buybox automatisch mit dem jeweils zugeordneten Produkt verknüpft.
Produktbeschreibung und -bewertung
Dieser Block enthält die Produktbeschreibung und die Produktbewertung. In den Elementeinstellungen kannst Du das jeweilige Produkt, für welches dieser Block gelten soll zuordnen. Wenn es sich bei der Erlebniswelt um eine Produktseite handelt, wird der Block automatisch mit dem zugewiesenen Produkt verknüpft.
Cross Selling
Inhalt (1): Im Tab Inhalt kannst Du das Produkt angeben, von welchem die Cross Selling Produkte bezogen werden. Wenn es sich bei der Erlebniswelt um eine Produktseite handelt, beziehen sich die Cross Selling Produkte automatisch auf das durch die Produktseite zugewiesene Produkt.
Layout-Typ (2): Dieser gibt an, wie das Produkt präsentiert werden soll. Du kannst das Produkt in der standard Ansicht, mit großem Bild oder mit minimalem Text anzeigen lassen.
Anzeigemodus (3): Hier gibst Du an, auf welche Art die Bilder des Produktes angezeigt werden sollen.
Standard: Das Bild wird komplett angezeigt. Die Höhe des gesamten Slider-Elements ist daher dynamisch und passt sich automatisch entsprechend an. Daher ist es zu empfehlen, dass alle Bilder im Slider das gleiche Seitenverhältnis aufweisen, da sonst die Elemente unterhalb des Sliders "hoch- und runterspringen".
Füllen: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
Beinhalten: Die Höhe des Elements wird automatisch anhand des höchsten hinterlegten Bildes ermittelt. Im Gegensatz zum Modus Standard wird diese aber nicht beim Wechsel zwischen verschiedenen Bildern angepasst. Die Ausrichtung von niedrigeren Bildern kannst Du über den Punkt Vertikale Ausrichtung definieren.
Mindestbreite (4): Dieser Wert gib an, wie breit die einzelnen Produktboxen minimal sein sollen.
Video
Die Elementeinstellungen zu einem Video hängen davon ab, ob Du ein YouTube Video oder ein Vimeo Video hinterlegt hast.
YouTube
Nachdem Du ein Video Link hinterlegt hast, kannst Du noch einige Einstellungen treffen, wie genau das Video angezeigt werden soll. Aktivierst Du den Erweiterten Datenschutzmodus, werden von YouTube keine Informationen von den Besuchern gespeichert, bis sie sich das Video ansehen. Zudem kannst Du per Start und Endzeit noch genau auswählen, welcher Ausschnitt des Videos angezeigt werden soll.
Vimeo
Für Vimeo Videos kannst Du kannst Du zudem auswählen, in welcher Farbe die Navigation angezeigt werden soll und welche Informationen vom Video Ersteller angezeigt werden sollen.
Sidebar
Für die Sidebar Blöcke sind keine eigenen Einstellungen notwendig. Sie werden automatisch mit Inhalt gefüllt.
Formular
Für den Formular Block kannst Du in den Elementeinstellungen zunächst das Formular auswählen, welches angezeigt werden soll. Außerdem kannst Du ein Titel und einen Bestätigungstext hinterlegen.
Im Reiter Einstellungen hinterlegst Du die Empfänger Adressen, welche das ausgefüllte Formular erhalten.
Das Kontaktformular wird nach dem Ausfüllen durch einen Shopbesucher per E-Mail an den Shopbetreiber gesandt. Für diese E-Mail steht in den E-Mail-Vorlagen eine entsprechende Vorlage mit dem Namen Kontaktformular bereit, welche angepasst werden kann.
3D-Model
Dieses Feature steht dir ab dem kommerziellen Plan Rise zur Verfügung.
Du kannst nun in jedem Layout eigenen 3D-Modelle hinzufügen und anzeigen lassen.
3D-Modelle ermöglichen eine realistischere und detaillierte Produktvisualisierung im Vergleich zu herkömmlichen 2D-Bildern. Kunden können das Produkt aus verschiedenen Winkeln betrachten, zoomen und drehen, was zu einer verbesserten Vorstellung vom Produkt führt.
Außerdem gibt es Dir die Möglichkeit mehr Informationen über ein Produkt zu vermitteln. Benutzer können Details wie Struktur, Oberfläche und Form besser verstehen, was zu einer fundierteren Kaufentscheidung führen kann.
Produktlisting
Wenn Du beim Erstellen eines Layouts den Layout-Typ Kategorieseite auswählst, enthält Dein Layout automatisch einen Produkt Listing Block. Hier werden im Standard die Produkte der jeweiligen Kategorie angezeigt.
In den Einstellungen dieses Blocks kannst Du im Reiter Inhalt zwischen den Darstellungen Standard, große Bilder und minimaler Inhalt auswählen. Welche Unterschiede diese Darstellungen haben erfährst Du hier.
Sortierungen und Filter
Sortierungen
Im Reiter Sortierungen kannst Du einstellen, wie die Produkte aus dem Produktlisting sortiert werden sollen.
Produktsortierung anzeigen (1): Hier kannst Du die Auswahl von Sortierungen für dieses Produktlisting aktivieren oder deaktivieren.
Eigene Sortierungen verwenden (2): Wenn Du keine eigenen Sortierungen verwendest, werden die Standardsortierungen verwendet, die Du im Bereich Einstellungen>Shop>Produkte ausgewählt hast.
Standard Sortierung (3): Wenn eigene Sortierungen (2) aktiviert wurde, kannst Du hier die Sortierung auswählen, nach der das Produktlisting standardmäßig sortiert sein soll. Die Sortierungen kannst Du unter Einstellungen>Shop>Produkte anlegen und bearbeiten.
Produktsortierungen (4): Hier kannst Du alle Sortierungen auswählen, die der Kunde in dem Produktlisting auswählen können soll. Die Sortierungen werden im Frontend dann als Dropdown Menü angezeigt.
Priorität (5): Klicke in der Liste der ausgewählten Sortier-Optionen doppelt auf die Priorität um diese zu ändern. Im Frontend werden die verfügbaren Sortier-Optionen in der Reihenfolge der Priorität beginnend mit der höchsten angezeigt.
Löschen (6): Über das Dropdown Menü auf der rechten Seite kannst Du die ausgewählte Sortier-Option wieder aus der Liste entfernen.
Filter
Im Tab Filter (1) hast die Möglichkeit festzulegen, welche Filter in der Storefront angezeigt werden sollen. Die Einstellung ist auch auf Kategorie-Ebene möglich und wird in der Dokumentation zu den Kategorien näher erläutert.
Hier gibt es zum einen den Bereich mit den allgemeinen Filtern (2) wie Hersteller, Preis usw.
Zum anderen ist es aber auch möglich, die auf den Produkt-Eigenschaften basierende Filter zu konfigurieren.
Im Standard sind zunächst alle Filter aktiv. Um dies zu ändern, aktivere den Schalter Filterbare Produkteigenschaften konfigurieren (3). Anschließend kannst Du für jede einzelne Eigenschaft (4) definieren, ob diese als Filter in der Kategorie angezeigt werden soll. Beachte hierbei bitte, dass ein Filter in der Storefront nur angezeigt wird, wenn mindestens ein Produkt mit dieser Eigenschaft in der Kategorie vorhanden ist.
Block-Einstellungen
Die Blockeinstellungen öffnest Du, indem Du in der Vorschau einen Block anklickst und dann auf das Symbol für die Blockeinstellungen klickst, welches sich direkt unter dem Plus Symbol für neue Blöcke befindet.
Hier hinterlegst Du grundlegende Einstellungen für den aktuell ausgewählten Block.
Name (1): Dieser Name dient dazu, diesen Block besser unterscheiden zu können. er wird beispielsweise im Navigator angezeigt.
Hintergrundfarbe (2): Hier wählst Du die Hintergrundfarbe des Blockes. Um einheitliche Farbgebungen zu realisieren kannst Du die Farbe auch anhand des Hexadezimalwertes angeben.
Hintergrundbild (3): Anstatt einer Hintergrundfarbe kannst Du an dieser Stelle ein eigenes Hintergrundbild verwenden. Dies kann beispielsweise ein Muster sein oder ein Hintergrundbild zu einem Text.
Bildmodus (4): Wenn Du ein Hintergrundbild hinterlegt hast, kannst Du hier auswählen, ob es den Block ausfüllen soll, oder sich das Bild an dem Block ausrichten soll.
Layout - CSS-Klassen (5): In den Layout-Einstellungen bestimmst Du den Abstand der Elemente eines Blocks zu dessen Rändern und kannst zusätzlich eine eigene CSS-Klasse einbinden.
Sektion-Einstellungen
Die Sektionseinstellungen öffnest Du, indem Du in der Vorschau links das Symbol für die jeweilige Sektion anklickst und dann auf das Symbol für die Sektions-Einstellungen klickst, welches sich direkt unter dem Plus Symbol für neue Blöcke befindet.
Hier hinterlegst Du grundlegende Einstellungen für die aktuell ausgewählte Sektion.
Sektionsname (1): Dieser Name dient dazu, diese Sektion besser unterscheiden zu können. er wird beispielsweise im Navigator angezeigt.
CSS-Klassen(2): Du kannst eine oder mehrere, mit Leerzeichen getrennte, CSS Klassen hinzufügen.
Größenmodus(3): Hier entscheidest Du ob der Inhalt auf die volle Breite gezogen werden soll oder zentriert bleiben soll.
Mobiles Sidebar-Verhalten(4): Aktivierst Du hier die Option Nicht angezeigt, wird der Inhalt der Sidebar in der mobilen Ansicht ausgeblendet. Info: Diese Einstellungen steht nur für Layouts mit Sidebar zur Verfügung.
Hintergrundfarbe (5): Hier wählst Du die Hintergrundfarbe der Sektion. Um einheitliche Farbgebungen zu realisieren kannst Du die Farbe auch anhand des Hexadezimalwertes angeben.
Hintergrundbild (6) und Bildmodus (7): Anstatt einer Hintergrundfarbe kannst Du an dieser Stelle ein eigenes Hintergrundbild verwenden. Dies kann beispielsweise ein Muster sein oder ein Hintergrundbild zu einem Text.
Sichtbarkeit für Viewports
Über die Sichtbarkeit (1) kannst Du das Layout einer Erlebniswelt gerätespezifisch anpassen. Über die Anzeigegeräte (2) kann per Klick festgelegt werden, ob das Layout auf dem entsprechenden Viewport bzw. Endgerät ein- oder ausgeblendet werden soll.
Diese Einstellung kannst Du sowohl für einzelne Block-Elemente nutzen, als auch für ganze Sektionen. Die Sichtbarkeit pro Viewport wird Dir auch in der Konfiguration der Kategorie angezeigt, wenn das Layout einer Kategorie zugewiesen wird.
Navigator
Im Navigator siehst Du eine Übersicht aller Blöcke anhand ihres Namens. Durch Drag & Drop kannst Du die Blöcke nach oben und unten verschieben und somit die Reihenfolge der Blöcke verändern.
Mit dem Plus Symbol kannst Du unterhalb des jeweiligen Blockes eine Kopie des Blockes erzeugen. Über das Papierkorb Symbol kannst Du den jeweiligen Block entfernen.
Fehlerbehandlung
Solltest Du Deine Erlebniswelt nicht speichern können, wird Dir direkt im Designer angezeigt, dass ein Fehler aufgetreten ist (1). Im Designer bekommst Du eine genaue Meldung, welches Element Deiner Erlebniswelt fehlerhaft ist (2) und an welcher Stelle der Fehler auftritt (3). Somit kannst Du fehlerhafte Einsrtellungen schnell korrigieren, ohne den Fehler suchen zu müssen.
Erlebniswelten einer Seite in der Storefront zuweisen
Es gibt verschiedene Möglichkeiten, eine Erlebniswelt in der Storefront zu verwenden.
Layout-Editor
Du kannst direkt im Layout-Editor die Kategorien zuweisen. Hierzu steht im Menü auf der rechten Seite der Punkt Layout-Zuweisung (1) zur Verfügung. Klicke dort die Schaltfläche Layout zuweisen (2) an, um das Fenster für die Zuweisung aufzurufen.
Im Fenster für die Zuweisung klicke auf den Bereich Wähle Kategorien aus, es öffnet sich dann die Liste mit der Kategorie-Auswahl. Um die Auswahl zu übernehmen, klicke auf die Schaltfläche Layout zuweisen.
Sollte einer oder mehreren ausgewählten Kategorien bereits ein anderes Layout zugewiesen sein, erscheint ein weiteres Fenster, in dem Du die Änderung erneut bestätigst.
Shopseiten
Erlebniswelten werden dazu verwendet, um Shopseiten wie AGB, Impressum usw. darzustellen. Die Zuweisung erfolgt unter Einstellungen > Shops > Stammdaten im Bereich Shopseiten.
Kategorien
Du kannst Erlebniswelten in den Kategorien verwenden, um das Layout des Kategorielistings anzupassen. Zum anderen ist es aber auch möglich, eine Landingpage zuzuweisen.
Landingpage
Eine Erlebniswelt vom Typ Landingpage enthält keine fest integriertes Listingelement, um Produkte einzubinden.
Soll es nicht möglich sein, die Landingpage aus dem normalen Navigationsmenü aufzurufen, aktivere den Schalter In der Navigation ausblenden im Bereich Menü-Einstellungen.
Die Landingpage ist dann über die URL der Kategorie, der die Erlebniswelt zugewiesen ist, aufrufbar.
Produktseite
Du kannst eine Erlebniswelt für die Produktdetailseite verwenden. Öffne dazu das jeweilige Produkt im Admin und öffne den Reiter Layout. Wähle hier dann eine erstellte Produktseite aus.
Wenn Du in deinem Layout veränderbare Elemente wie z.B. Textboxen verwendet hast, kannst Du im Reiter Layout jedes Element individuell auf das jeweilige Produkt zugeschnitten verändern.
Standardlayouts
Kategorien
Wenn Du eine Kategorie-Seite anlegst hast Du die Möglichkeit, dieses Layout als Standardlayout für alle neuen Kategorie-Seiten zuzuweisen. Dadurch sparst Du Dir eine Menge Arbeit.
Klicke dazu einfach in der Sidebar in der Layout-Zuweisung > Standardlayouts > Als Standardlayout verwenden.