Export/Import/Vorlagen
Hier kannst du deine Einstellungen exportieren und wieder importieren oder Vorlagen in der Datenbank speichern, um so schnell zwischen Styles zu wechseln.
- Vorlage speichern
- Vorlage laden
- Export
- Import
Werkseinstellungen
Hier kannst du alle Einstellungen auf den Standard wieder zurücksetzen.
Grundfarben und Vorkonfiguration
Wähle deine Grundfarben aus. Das Template passt sich automatisch an deine Auswahl nach definierten Regeln an, die für ein ausgewogenes Ergebnis sorgen.
Automatische Anpassung
Lasse diese Einstellung aktiviert, damit sich zusammengehörige Farben gleichmäßig und automatisch anpassen.
Primärfarbe
Lege hier die Primärfarbe deines Shops fest. Diese beeinflusst standardmäßig unter anderem: Farbe der Topbar, Button-Farben und Bestseller-Artikelribbon. Außerdem wird die Farbe beim Farbgenerator berücksichtigt und wirkt sich auf die anderen automatisch gesetzten Farben aus.Sekundärfarbe
Lege hier die Sekundärfarbe deines Shops fest. Diese beeinflusst standardmäßig: Sekundär-Button, Warenkorb-Button und New-Product-Ribbon für Artikel. Diese Farbe wird ebenfalls beim Farbgenerator berücksichtigt, allerdings mit weniger Einfluss als die Primärfarbe.Tertiärfarbe
Lege die Tertiärfarbe deines Shops fest. Diese beeinflusst maßgeblich: Schrift- und Hintergrundfarbe sowie Farbe des Tertiär-Buttons. Diese Farbe wird ebenfalls beim Farbgenerator berücksichtigt und hat einen ähnlichen Einfluss wie die Primärfarbe - insbesondere auf Schrift- und Hintergrundstyles.Akzentfarben
Accent 1
Die erste Akzentfarbe für schnellen Zugriff in der CompanionApp und im OnPage-Composer
Accent 2
Die zweite Akzentfarbe für schnellen Zugriff in der CompanionApp und im OnPage-Composer
Meta Theme Color
Lege die Meta Theme Color deines Shops fest. Diese Farbe beeinflusst das Erscheinungsbild des Browsers auf mobilen Geräten, indem sie die Farbe der Adressleiste oder der Browser-Oberfläche anpasst, wenn die Seite geöffnet ist.Dies trägt zur einheitlichen Darstellung deiner Markenfarben über verschiedene Plattformen hinweg bei.Mehr Informationen bei MDN Web Docs
Erweiterte Einstellungen
Für die meisten Fälle genügt die Einstellung der Grundfarben. Hier kannst du alle einzelnen Styles für jedes Element individuell anpassen, ohne die Grundfarben zu beeinflussen.Hintergrund- und Schriftfarbe
Signalfarben
Success-Farbe
Wird angezeigt, wenn ein Artikel erfolgreich in den Warenkorb gelegt wurde
Info-Farbe
Wird verwendet, wenn ein Nutzer beispielsweise sein Passwort falsch eingegeben hat
Warning-Farbe
Für Warnhinweise und wichtige Mitteilungen
Error-Farbe
Für Fehlermeldungen und kritische Hinweise
Anpassung der Signalfarben
Anpassung der Signalfarben
Du kannst per Dropdown entweder den Standard oder eine deiner hinterlegten Grundfarben wählen.Um eine andere Farbe zu verwenden, wähle in dem Dropdown “Custom”, um den Colorpicker freizuschalten. Wähle deine gewünschte Farbe per Color-Picker oder trage den Hexcode ein und drücke anschließend auf “Apply”.Vergiss nicht dein Theme zu kompilieren und die Einstellungen zu speichern!
Ribbons (Artikelsticker)
Border Radius
Hier kannst du die Kantenabrundung der Artikelribbons festlegen. Verwende eine CSS Auszeichnung, um den Border Radius festzulegen.0 → Keine Abrundung, 5px 5px 5px 5px → 5px an jeder Seite, 5px → 5px an jeder Seite, 0 10px 5px 0 → Oben links 0, oben rechts 10px, unten rechts 5px, unten links 0, 15px 10px → Oben links und unten rechts 15px, oben rechts und unten links 10px
Ribbon-Farben
Außerdem kannst du hier die Farbe der einzelnen Artikelribbons/Artikelsticker festlegen. Du kannst eine der vorher konfigurierten Farben aus dem Dropdown-Menü auswählen. Um eine andere Farbe zu verwenden, wähle in dem Dropdown “Custom”, um den Colorpicker freizuschalten.Preis Ribbon
Wenn du in Kategorieseiteneinstellungen die Ribbondarstellung für den Preis aktiviert hast, kannst du hier die Farben und Styles wählen.
Lagerstatus Farben
Auf Lager
Farbe für verfügbare Artikel
Wenige verfügbar
Farbe für begrenzt verfügbare Artikel
Nicht verfügbar
Farbe für nicht verfügbare Artikel
Logo, Navigation und Footer
Logos
- Primäres Logo
- Mobile Logo
Hier kannst du dein primäres Logo hochladen. Das primäre Logo ist für die Desktop Version gedacht und als Fallback für die mobilen Varianten, falls kein mobiles Logo hinterlegt wurde.
Größeneinstellungen
Höhe Nav Desktop
Setze einen festen Wert für die Höhe der Nav für die Desktopansicht.Erlaubt sind CSS Werte wie px, rem, vh oder %.
Höhe Nav Mobil
Setze einen festen Wert für die Höhe der Nav für die mobile Version.Erlaubt sind CSS Werte wie px, rem, vh oder %.
Höhe Logo Desktop
Setze einen festen Wert für die Höhe des Logos für die Desktopansicht.Die maximale Höhe wird durch die Höhe der Nav gedeckelt.
Höhe Logo Mobile
Setze einen festen Wert für die Höhe des Logos für die mobile Version.Die maximale Höhe wird durch die Höhe der Nav gedeckelt.
Buttons
Border Radius
Hier kannst du die Kantenabrundung festlegen (siehe Border Radius Beispiele bei Ribbons).Schriftoptionen
Headfont statt Bodyfont für Buttons verwenden: Mit dieser Einstellung kannst du entscheiden, ob du die Schriftart für Überschriften (Headfont) anstelle der Fließtextschriftart (Bodyfont) für deine Buttons nutzen möchtest. Button Schrift in Caps Lock: Bei Aktivierung dieser Einstellung wird der Buttontext ausschließlich in Großbuchstaben dargestellt.Button-Typen
Primär, Sekundär, Tertiär
Drei separate Gestaltungsmöglichkeiten für deine Buttons, deren Aktion beim Drücken noch von dir ausgewählt werden kann
Warenkorb-Buttons
Warenkorb, zur Kasse und Quickbuy Button
Footer Topbar Button
Design für die Buttons in der Fußzeile bzw. Kopfzeile
Consent & Load more
Buttons im Cookie-Banner und für “Mehr laden”
Buttonfarbe
Außerdem kannst du die Farbe der verschiedenen Buttons hier anpassen. Du kannst eine der vorher konfigurierten Farben aus dem Dropdown-Menü auswählen oder “Custom” für den Colorpicker wählen.Buttontyp
Zusätzlich kannst du den Button-Typ der einzelnen Buttons anpassen:- Full
- Outlined
- Plain
Eingabefelder
Containersettings
Der Standard liegt bei 1650px.Um deinen Content genauso breit wie Nav und Footer zu machen, vergebe für den Container-XL und den Container-Fluid-XL die gleiche Breite.
Produktboxen
Hier werden die wichtigsten Informationen zu deinem Produkt als kurze Übersicht angezeigt. Entscheide dabei, wie viele Zeilen des Produkttitels bzw. der Produktbeschreibung in deinen Produktboxen ersichtlich sind.
Font Settings
Wähle hier deine Schriftarten und Styles aus. Wähle Pagespeed optimierte Optionen, wenn dir die simulierten Abstufungen der Fontweights ausreichen und du mehr Wert auf einen schlanken Ladevorgang legst.In der Regel genügt der Browsercache, um deinen Kunden ein hervorragendes Ergebnis zu liefern auch mit mehreren Fonts. Wenn du gar keine Fonts auswählen willst, nutze die System Default Fonts, um die Standardfonts der jeweiligen User zu verwenden.
Font Display Settings
Die Font Display Settings entscheiden darüber, wie Fonts geladen werden:- Swap
- Optional
Font wechselt, sobald sie geladen wurde - kann zu Layout-Shifts führen
In der Regel reicht der Browsercache, um alle Fonts rechtzeitig zur Verfügung zu stellen.
Font Headlines
Wähle hier die Schriftart für deine Überschriften. Du kannst eine der mitgelieferten Schriftarten oder Custom wählen, um deine eigene Schriftart zu nutzen. Custom Headlines Font Name: Custom Fonts musst du manuell im Stylesheet einbinden. Trage hier den exakten Namen ein, wie du die font-family bezeichnet hast. Headline Fontweight: Schriftdicke der Überschriften.Font Bodytext
Wähle hier die Schriftart für deine Textkörper. Du kannst eine der mitgelieferten Schriftarten oder Custom wählen. Custom Bodytext Font Name: Custom Fonts musst du manuell im Stylesheet einbinden. Trage hier den exakten Namen ein, wie du die font-family bezeichnet hast. Bodytext Fontweight: Schriftdicke des Fließtexts.Display Font
Wähle hier die Schriftart für deinen Schaugrößentext. Display Fontweight: Schriftdicke des Schaugrößentexts.Navigation
Nav Items Level 1 Fontweight: Schriftdicke für Hauptnavigationspunkte.Responsive Fontsizes
Responsive Fontsizes nutzen: Wenn aktiviert, passen sich die Schriftgrößen dynamisch an die Displaygröße an, wodurch eine optimale Lesbarkeit auf verschiedenen Geräten gewährleistet wird.Skalierungsoptionen
Skalierungsoptionen
Base Fontsize SkalierungsfaktorBei aktivierter responsiver Schriftgröße kannst du hier einen Skalierungsfaktor wählen:Standardwert: 1. Wert < 1 verkleinert die Schriftgröße, Wert > 1 vergrößert die Schriftgröße.Base Desktop BreiteWähle hier die Basis-Desktopbreite in px. Von diesem Wert aus skaliert die Schriftgröße vom Maximalwert herunter bis zum empfohlenen Minimalwert.SkalierungsfaktorHier kannst du einstellen, wie stark die einzelnen Schriftgrößen zueinander skalieren, basierend auf der Basis-Schriftgröße.
Vorschau & Testing
Kursiv Preview: Aktiviere diese Einstellung, um die Schriften in der Vorschau in kursiv angezeigt zu bekommen. Schriftdicke Preview: Hier siehst du die Vorschau deiner gewählten Schrifteinstellungen, welche automatisch aktualisiert wird, ohne dass du auf „Speichern” oder „Theme kompilieren” drücken musst..Bezeichnungen in der Vorschau:D1-D6: Display-Font, H1-H6: Headline-FontDie aktuelle Bildschirmbreite wird automatisch anhand deiner gewählten Browser-Fenstergröße aktualisiert.