Allgemein
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.
Die Einstellungen zur Darstellung der Top Bar sind bei Auswahl eines zweizeiligen Headers eingeschränkt, da die Top Bar in die Logo Zeile integriert wird und nicht als eigenständige Top Bar fungiert.
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 Einstellungen zur Darstellung der Top Bar sind bei Auswahl eines zweizeiligen Headers eingeschränkt, da die Top Bar in die Logo Zeile integriert wird und nicht als eigenständige Top Bar fungiert.
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:
Produktbilder
Das Theme unterstützt die Ermittlung des Seitenverhältnis Deiner Produktbilder. Die Ermittlung des Seitenverhältnisses erfolgt anhand vorgegebener Seitenverhältnisse (1) oder durch die Angabe exakter Bild-Breite (2) und Bild-Höhe (3), welche für Produktlistings und die Produkt Image Galerie genutzt werden.
Sobald exakte Bildmaße in den Feldern Breite Artikelbild (2) und Höhe Artikelbild (3) eingetragen sind, werden diese anstelle des Seitenverhältnis Artikelbilder (1) verwendet.
Warum und vor allem wie Du das optimale Bildformat Deiner Produktbilder ermittelst, haben wir Dir im Artikel unter INHALTE > Produktbilder > Bildformat ausführlich zusammengefasst.
Das Theme bietet mit der Option Hintergrundfarbe überlagernd (5) eine Funktion zum Einfärben von Produktbildern durch eine Hintergrundfarbe. So können auch nicht ausgeschnittene Produktbilder im JPG-Format auf einer Hintergrundfarbe abgebildet werden. Die Funktion zur Einfärbung der Produktbild-Hintergründe haben wir Dir im Tutorial Produktbilder Hintergrund zusammengefasst.
Produkt Layout-Typ
In den Kategorien wird der Layout-Typ für die Produkt-Boxen in der Erlebniswelt unter Erlebniswelten > Kategorieseiten im Kategorie-Listing Element global eingestellt. Die Suchergebnisseite, der Merkzettel und das Crossselling sind allerdings Bereiche, die nicht oder nur teilweise über die Erlebniswelten gesteuert werden können. Daher kannst Du für die einzelnen Bereiche einen Layout-Typ definieren.
Neben den Layout-Typen Standard, Großes Bild und Minimaler Inhalt hat der Merkzettel (2) ein zusätzliches Layout Wunschliste, welches den Hersteller und die Lieferzeit zusätzlich darstellt.
Globales Hintergrundbild
In den Grundeinstellungen kann ein globales Hintergrundbild (1) für den gesamten Onlineshop hochgeladen und konfiguriert werden.
Bestimme über die Wiederholung (2), ob sich das Bild wie ein Muster wiederholen soll. Dabei kannst Du bestimmen ob es sich vertikal, horizontal oder in beide Achsen wiederholen soll.
Die Fixierung (3) lässt dich das Bild beim Scrollen entweder fixieren oder mitlaufen. Wird das bild fixiert, bleibt es auch beim Scrollen sichtbar im Fenster fixiert. Ist das Bild scrollend, verschwindet es beim Scrollen bewegt es sich mit dem Dokumentenfluss nach oben.
Über Position (4) und Größe (5) bestimmst Du wie sich das Bild im Hintergrund des Shops einpassen und positionieren soll.
Gültige Werte für die Position (4) sind Größenangaben nach der CSS Spezifikation:
z.B. auto | cover | contain | 100% 100% | 100px 100px
Beispiel:
Preloader
Der Preloader ist eine Animation beim Laden der Seite. Dadurch wird dem Sucher der häufig unschöne Aufbau der Seite durch eine kleine Animation überblendet. Hier kann auch das Shoplogo animiert eingebunden werden.
Die Anzeige (1) kann so eingestellt werden, dass die Animation bei jedem Seitenübergang order nur beim Laden der Startseite angezeigt wird. Neben Hintergrund und Farbe besteht die Möglichkeit das Verschwinden des Preloaders mit Hilfe der Ausblende Animation (3) zu animieren.
Timeout (4) gibt die Zeit in Millisekunden an, wie lange der Preloader mindestens sichtbar ist. Bei sehr kurzen Ladezeiten kann es sonst vorkommen, dass der Preloader nur kurz aufflackert.
Beispiel:
Akzentlinie
Akzentlinie im oberen Bereich der Seite. Über Akzentlinie oben definierst Du die Größe dieser Linie.
Beispiel:
Scroll Animation
Die Erlebniswelten Scroll-Animationen werden beim Scrollen der Seite ausgelöst. Dabei werden die Inhalte durch eine Animation eingeblendet, sobald diese durch Scrollen in den sichtbaren Bereich eintreten.
Zum Anwenden der Scroll Animationen folge unserer Doku zur Erlebniswelten Animation.
Die Dauer (1) gibt an, wie lange die Animation in Sekunden dauert. Die Verzögerung (2) beschreibt die Dauer, bis die Animation beginnt. Erreicht ein Element also durch Scrollen den sichtbaren Bereich, wartet die Animation noch weitere 0,25 Sekunden bis die Animation beginnt.
Du kannst das Produkt Listing animieren (3), dabei werden die einzelnen Produkt-Boxen im Listing nacheinander animiert eingeblendet.
Last updated
