Grundlayout
In den Grundeinstellungen kannst Du das wesentliche Aussehen Deines Shop gestalten. Diese Einstellung verändern das Layout grundlegend.
Grundeinstellungen
Grundlayout (1):
Boxed | Full Width Boxed | Full Width Header | Full Width Header & Footer | Full Width
Die Breite des Layouts wird durch das Grundlayout bestimmt. Full Width streckt die Webseite mit allen Inhalten an den Browserrand, während Boxed das Layout inklusive Hintergründe an die maximale Layout Breite festlegt. Full Width Boxed hingegen lässt alle Hintergründe an den Browserrand laufen, die Inhalte orientieren sich jedoch an der maximalen Layout Breite. Full Width Header setzt ausschließlich den Header und dessen Inhalte bis an den Browserrand. Die restlichen Bereiche des Shops verhalten sich wie in Full Width Boxed.
Layout Breite (2)
Breite des Shop-Containers in Pixeln. In allen Grundlayouts außer Full Width wird dieser Wert als maximale Breite der Inhalte und Elemente verwendet.
Header (mobil) (3):
Einzeiliger Header | Mehrzeiliger Header
Der Header kann auf mobilen Geräten einzeilig dargestellt werden. Je nach Größe und Ausrichtung des Logos eignet sich jedoch eine mehrzeilige Darstellung besser.
Beispiel:
Header (3):
Einzeiliger Header | Zweizeiliger Header | Mehrzeiliger Header
Entscheide zwischen drei grundlegende Header-Erscheinungen. Nicht jede Header-Einstellung passt zu Dir und zu Deinen Produkt-Kategorien. Daher gibt es hier ein paar grundlegende Tipps:
Der einzeilige Header eignet sich besonders gut für minimalistische Onlineshops, welche nur wenige Oberkategorien besitzen. Der Header wirkt aufgeräumt und klar.
Hast Du eine Vielzahl an Oberkategorien (ca. 6-8 Stück), ist wohl eher der zweizeiliger Header die Einstellung Deiner Wahl. Die Kategorien haben hier ausreichen Platz und bieten Deinem Kunden die nötige Übersicht. Im zweizeiligen Header wird die Top Bar als eigene Zeile entfernt und in die Logo-Zeile integriert.
Der mehrzeilige Header eignet sich ebenfalls immer dann, wenn eine Vielzahl an Oberkategorien dargestellt werden soll. Im Unterschied zum zweizeiligen Header behält die Top Bar ihre normale Darstellung.
Suche (4)
Wähle zwischen der Ansicht als Overlay-Suche, Ausklappbarer Suche oder Standard Suche.
Beispiele:
Top Bar (5)
Standard | Ausklappbar | Einklappbar | Offcanvas | ausgeblendet
Die Standardansicht der Top Bar. Permanent sichtbar.
Icon Set (6)
Das Theme stellt verschiedene zusätzliche Icon-Sets zum Standard-Icon Set für die Storefront zur Verfügung. Es werden dabei unter Anderem die Icons für Konto, Suche, Warenkorb, Merkzettel uvm. ausgetauscht.
Entypo Icons (solid):
Feather Old Icons:
Feather Icons:
Fluent (outlined):
Fluent (solid):
Heroicons (outlined):
Heroicons (solid):
Iconic (outlined):
Iconly Broken:
Iconly Bulk:
Iconly Light:
Ionicons (outline)
Ionicons (solid):
Material Icons:
Simple Line Icons:
Tonicons Icons:
Main Navigation als Offcanvas
Die Hauptnavigation mit den Kategorien des Shops geht ab einem bestimmten Viewport in die mobile Darstellung über. Über die Einstellung Main Navigation als Offcanvas (1) kannst Du bestimmten, in welchem Viewportbereich das mobile Menü angezeigt wird. Mit Hilfe dieser Option ist es sogar möglich auch für die Desktop-Ansicht das mobile Menü darzustellen.
Beispiele:
Bestellmengenfeld
Mengenauswahl | Mengeneingabe -/+
Das Feld für die Bestellmenge kann global auf ein Eingabefeld mit Plus- und Minus-Buttons umgestellt werden. Die Einstellung ist global und betrifft alle weiteren Eingabefelder, z.B. in Warenkorb oder Kasse.
Standard: Dieser Wert setzt alle Bestellmengenfelder in den Standard. Ab Showpare 6.5 ist das Standard-Bestellmengenfeld eine Mengeneingabe -/+
Mengenauswahl: Es wird die Standard-Mengenauswahl verwendet. Ab einer maximalen Auswahlmenge > 100 wird die Mengeneingabe -/+ des Themes dargestellt.
Mengeneingabe -/+: Anstelle der Mengenauswahl wird eine Mengeneingabe mit Plus- und Minus-Buttons angezeigt.
Warum wird die Mengenauswahl zu einer Mengeneingabe?
Das hängt mit der maximale Auswahlmenge zusammen, die Du in der Administration des Shops unter Einstellungen > Warenkorb einstellen kannst. Über die maximale Auswahlmenge kannst Du festlegen, wie viele Produkte über das Dropdown ausgewählt werden können.
Der Browser muss für jeden Artikel im Listing (im Warenkorb, Kasse usw.) eine solche Mengenauswahl rendern. Wird die maximale Auswahlmenge auf einen sehr hohen Wert gesetzt, führt dies zu langen Ladezeiten.
Werte jenseits der 10.000 oder sogar 100.000 führen nicht nur zu langen Ladezeiten, sondern können zum Absturz des Browsers führen. In einem solchen Extremfall (maximale Auswahlmenge = 100.000) muss der Browser 1 - 100.000 Option-Zeilen der Mengenauswahl rendern. Bei z.B. 24 Produkten pro Listing sind das 2.400.000 Zeilen.
Beispiele:
Globale Body Abstände
Im Theme können globale Abstände gesetzt werden um bei vollflächigen Layouts eine Rahmung zu erzielen. Auf mobilen Geräten sollten diese Abstände verringert werden. Allgemein eignen sich hier Werte zwischen 0 - 100 Pixeln.
Container Abstände
Die Abstände des Containers für die Hauptinhalte kann über das Theme angepasst werden. Auf mobilen Geräten werden die Werte halbiert.
Beispiel:
Abgerundete Ecken
Der Ecken-Radius definiert das Aussehen von Buttons, Eingabe-Feldern und verschiedenen anderen Elementen, wie Produktboxen, Produkt Slider Thumbnails, Tabs, Modals (Popups) uvm.
Beispiel:
Last updated
Was this helpful?