Elemente
Gestaltung verschiedener Komponenten, welche an unterschiedlichen Stellen in der Storefront ausgespielt werden.
Sidebar
Für die Sidebar kann eine Sticky (1) Funktion aktiviert werden. Beim Scrollen läuft diese dann fixiert mit uns verschwindet nicht. Die Sticky-Funktion wird nur dann angewendet, wenn die Inhalte der Sidebar nicht höher sind als die Höhe des Browser-Viewports.
Sticky erzweingen (2): Die Sticky-Funktion funktioniert nur, wenn alle Eltern-Elemente nicht die CSS Eigenschaft "overflow:hidden" verwenden. Es gibt Erweiterungen, welche diese Eigenschaft setzen. Wenn aktiv, wird die Sticky-Funktion erzwungen und alle Eltern-Elemente mit "overflow: hidden", werden auf "overflow: visible" umgeschrieben.
Sidebar Navigation
Farben
Zusätzlich zu den üblichen Farben, kann auch der aktive Pfad (2) eingefärbt werden. Die :hover (3) Farben werden zusätzlich für das aktive Element verwendet.
Background (1) ist die allgemeine Hintergrundfarbe eines Menü-Elementes. Background:aktiver Pfad (4) legt die Farbe für die aktive Ebene fest. Dadurch kann der Kunde leichter unterscheiden in welchen Bereich welcher Ebene er tiefer navigieren kann. Background:hover (2) markiert das aktive obere Element und weitere Mouse-Over Aktionen über den Menü-Elementen.
Der Unterstrich am aktiven Element kann in den Grundeinstellungen im nächsten Schritt aktiviert werden.
Grundeinstellungen
Neben den Einstellungen für die Darstellung der Schrift kann auch ein vertikaler Innenabstand (1) gesetzt werden. Der Vertikale Innenabstand (1) bestimmt, wie hoch die einzelnen Menü-Einträge werden. Bei vielen Kategorien sollte ein möglichst kleiner Wert gewählt werden.
Durch die Option Abstand unten (2) können die einzelnen Elemente nochmal voneinander getrennt werden.
Der Anzeigemodus (3) bestimmt den Modus der Sidebar-Navigation. Im Modus Aufklappbar können die Unterkategorien auf- und zugeklappt werden, ohne die Seite zu wechseln.
Für das Auf- / Einklappen Icon (4) stehen Dir verschiedene Optionen bereit. Die Symbole werden angezeigt, sobald der Anzeigemodus auf Aufklappbar steht.
Mit Hilfe der Hover Animation (5) kann eine animierte Unterlinie bei Mouse-Over und Aktiv-Status ab der zweiten Navigations-Ebene dargestellt werden.
Beispiele:
Formulare
Farben
Formular-Elemente sind Input-Felder, Textfelder oder Select-Felder. Diese können einen Hintergrund, eine Textfarbe und eine Kontur haben.
Grundeinstellungen
Mit der Aussehen (1) Einstellung kannst Du das globale Erscheinungsbild von Formularfeldern beeinflussen. Wähle zwischen dem Aussehen mit einer Unterlinie oder dem Standard-Aussehen.
Mit Hilfe der Konfiguration Floating Labels (2) kannst Du die Labels der Formularfelder für einen minimaleren und weniger redundanten Look umgestalten.
Beispiele:
Bild & Galerie Slider
In Shopware 6 gibt es verschiedenen Slider-Navigations-Elemente. Grundsätzlich wird zwischen der Dot-Navigation und den Pfeilen unterschieden.
Es gibt drei wichtige Slider-Typen
Image Slider = Erlebniswelten-Element zur Darstellung von Bild-Slidern
Galerie Slider = Element zur Darstellung der Produktbilder auf der Produktdetailseite
Produkt Slider = Element zur Darstellung von Produktkacheln als Slider-Element
Zusätzlich kann man in den meisten Slidern bestimmen, ob die Navigationselemente innen (auf dem Bild) oder außen, außerhalb des Bildes dargestellt werden sollen.
Galerie Slider (Navigation Modus: Außen)
Beispiel:
Galerie Slider (Navigation Modus: Innen)
Beispiel:
Image Slider (Navigation Modus: Außen)
Beispiel:
Image Slider (Navigation Modus: Innen)
Beispiel:
Grundeinstellungen
Die Platzierung (1) der Pfeile (2) und Dots (1) kann Alternativ auf die rechte Seite des Sliders gesetzt werden. Im Standard befinden sich die Dots im unteren mittigen Bereich. Die Pfeile liegen links und rechts vertikal zentriert.
Das Aussehen der Punkte Navigation (2) kann von Punkten zu Balken oder Expandieren geändert werden.
(3, 4) Die Pfeile der jeweiligen Slider können so eingestellt werden, dass diese erst sichtbar werden, wenn man mit der Maus über dem Slider fährt.
Beispiele:
Produkt Slider
Beispiel:
Das Aussehen (1) der Produktslider kann so eingestellt werden, dass auch außerhalb des aktiven Bereichs liegende Elemente mit einer Sichtbarkeit von 50% dargestellt werden. Oftmals kann dies die Wirkung des Produkt-Sliders und die Interaktion mit diesem Element erhöhen.
Optional können die Slider Pfeile ausgeblendet (2) und erst bei MouseOver eingeblendet werden.
Beispiele:
Paginierung
Farben
Die Paginierung des Listings hat neben den üblichen Farben auch Farben für die verschiedenen Status: :hover, :active und :disabled.
Tipp: Die Werte der Felder können SCSS-Funktionen sein:
hsl(hue($sw-border-color), saturation($sw-border-color), 89%)
Hier wird die Farbe per hsl-Format definiert. Der Farbwinkel und Sättigung der Rahmenfarbe werden mit einer Helligkeit von 89% kombiniert.
Grundeinstellungen
Das Aussehen (1) der Paginierung ist als Pills und Standard darstellbar. Elemente, die als Pills definiert sind, haben einen Abstand zueinander.
Die Option Disabled-Buttons ausblenden (3) blendet die überflüssigen Button aus, da diese ohnehin nicht klickbar sind. Befindet man sich beispielsweise auf Seite 1, sind die Buttons für "erste Seite" und "Seite vor" überflüssig.
Beispiele:
Die Abrundungen der Pills ergeben sich aus dem eingestellten Button-Radius aus dem Tab der Allgemein-Einstellungen. Für runde Pill müssen Buttons rund eingestellt sein.
Breadcrumbs
Breadcrumbs sind eine sekundäre Navigation, bei welcher der zurückgelegte Pfad von der Startseite bis zur aktuellen Seite dargestellt wird. Es zeigt die Ebenentiefe an, in welcher man sich befindet.
Farben
Grundeinstellungen
Neben der Ausrichtung (4) der Breadcrumbs können diese auch optisch auf die volle Breite (5) gesetzt werden. Die Breadcrumbs dehnen sich dann je nach gewähltem Grundlayout des Shops bis zum Browserrand aus. (In den Layout-Modi Full-Width-Boxed und Boxed, sowie Full-Width-Header dehnt sich die Hintergrundfarbe bis an den Browserrand aus - nicht aber der Inhalt.)
Die Option Startseite anzeigen (6) stellt einen Startseiten-Link als erstes Element den Breadcrumbs voran. Zusätzlich kann ein einleitender Text 'Du bist hier' (7) angezeigt werden. Der text wurde als Textbaustein implementiert und kann in den Textbausteinen der Administration geändert werden.
Die Felder Oberer Abstand (8) und Unterer Abstand (9) definieren den Abstand der Breadcrumbs zum Header sowie zum weiteren Content der Seite.
Beispiel:
Wie Du Breadcrumbs in das Kategorie-Bild setzen kannst, erfährst Du im Bereich Kategoriebild Headerbereich.
Cookie Banner
Der Cookie-Banner kann als Widget, als kleine Leiste im unteren Bereich, als Popup mittig oder als Leiste (Standard) im unteren Bereich der Seite dargestellt werden.
Offcanvas
Ein Offcanvas-Element ist ein Widget im Shop bei dem zusätzliche Inhalte oder Menüs außerhalb des sichtbaren Bildschirms platziert und bei Bedarf sichtbar gemacht werden. In Shopware ist das mobile Menü und der Offcanvas-Warenkorb ein solches Element.
Für einen besondern Look lässt sich ein Außenabstand (1) um Offcanvas-Elemente definieren, welches auf größeren Endgeräten das Offcanvas-Element von den Browser-Rändern abhebt. Zusätzlich kann eine Weite (2) definiert werden. Die maximale Breite des Elementes wird durch die Breite des Endgerätes limitiert.
Beispiel:
Backdrop - Überlagernder Hintergrund
Ein Backdrop ist ein halbtransparentes Layer, welches sich bei Verwendung eines oder Offcanvas zwischen diesem und der restlichen Seite legt. Es dient dazu das Modal bzw. Offcanvas Elementen zu fokussieren und verhindert, dass Benutzer gleichzeitig mit dem Hintergrund der Seite interagieren.
Achte bei der Auswahl der Farbe für den Hintergrund (1) darauf, eine teiltransparente Farbe über den Colorpicker auszuwählen. Der Shop im Hintergrund des Elementes sollte nur verblassen - nicht komplett verschwinden.
Zusätzlich kannst Du eine optionale Akzentfarbe (2) wählen, welche zu der Farbe für den Hintergrund (1) über einen Farbverlauf hinzugemischt wird.
Über den Wert im Feld Hintergrund weichzeichnen (3) kann der Shop im Hintergrund des Popups oder Offcanvas unscharf gemacht werden. Das verstärkt den Fokus auf das Vordergrundelement nochmals.
Beispiel:
Scroll-Up Button
Farben
-
Grundeinstellungen
Der Scroll-Up Button ist nützlich, kann aber manchmal mit einem Chat-Button oder Trusted-Shops überlagert werden. Daher kannst Du die Position dieses Buttons bestimmen.
Wähle über Position (1) die grundlegende Position des Buttons am unteren Bildschirmrand. Mit Vertikaler Abstand (2) und Horizontaler Abstand (3) bestimmst Du jeweils den Abstand zum Bildschirmrand.
Last updated
