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
Hier hast du die Möglichkeit die Einstellungen dieses Tabs als Vorlage in der Datenbank zu speichern, um so schnell zwischen Styles zu wechseln.
1
Namen vergeben
Vergebe einen aussagekräftigen Namen für deine Vorlage
2
Speichern
Klicke auf Vorlage speichern
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.
boolean
Lasse diese Einstellung aktiviert, damit sich zusammengehörige Farben gleichmäßig und automatisch anpassen.
color
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.
color
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.
color
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
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.Zusätzlich kannst du per Dropdown zwischen “Standard” und “Custom” wählen. Bei “Custom” wird ein weiteres Eingabefeld freigeschaltet, in dem du einen eigenen Hexcode eintragen kannst.
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
color
Haupt-Hintergrundfarbe für primäre Flächen im Shop.
color
Zweite Hintergrundfarbe für primäre Flächen, z. B. für Abstufungen oder Verläufe.
color
Haupt-Hintergrundfarbe für sekundäre Flächen im Shop.
color
Zweite Hintergrundfarbe für sekundäre Flächen, z. B. für Abstufungen oder Verläufe.
color
Schriftfarbe auf primärem Hintergrund.
color
Abgestufte Schriftfarbe auf primärem Hintergrund, z. B. für weniger wichtigen Text.
color
Schriftfarbe auf sekundärem Hintergrund.
color
Abgestufte Schriftfarbe auf sekundärem Hintergrund, z. B. für weniger wichtigen Text.
color
Gedämpfte Schriftfarbe, z. B. für Platzhaltertexte oder deaktivierte Elemente.
1
Farbe öffnen
Klicke auf den Pfeil neben der entsprechenden Farbe
2
Farbe wählen
Wähle deine gewünschte Farbe per Color-Picker oder trage den Hexcode ein
3
Anwenden
Drücke auf “Apply”, um die Farbe anzuwenden
4
Speichern & Kompilieren
Vergiss nicht dein Theme zu kompilieren und die Einstellungen zu speichern
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. Folgende Ribbons kannst du individuell einfärben:- Bestseller – Standard: Primärfarbe
- Special offer – Standard: Dangerfarbe
- New product – Standard: Sekundärfarbe
- Top offer – Standard: Custom
- Upcoming – Standard: Infofarbe
- Top reviews – Standard: Primärhintergrund 2
- Out of stock – Standard: Custom
- On stock – Standard: Successfarbe
- Preorder – Standard: Warningfarbe
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
- Sofort verfügbar – Farbe für verfügbare Artikel (Standard: Successfarbe)
- Für dich Bestellbar – Farbe für begrenzt verfügbare Artikel (Standard: Warningfarbe)
- Vergriffen – Farbe für nicht verfügbare Artikel (Standard: Dangerfarbe)
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.
Farbeinstellungen
Zusätzlich kannst du die Hintergrund- und Akzentfarben von Topbar, Navigation und Footer einzeln festlegen. Du kannst eine der vorher konfigurierten Farben aus dem Dropdown-Menü auswählen oder “Custom” für den Colorpicker wählen.- Topbar Hintergrundfarbe – Hintergrundfarbe der obersten Leiste
- Nav Hintergrundfarbe – Hintergrundfarbe der Hauptnavigation
- Nav Kategorieleiste Hintergrundfarbe – Hintergrundfarbe der Kategorieleiste innerhalb der Navigation
- Nav Item Akzentfarbe – Akzentfarbe für Navigationspunkte (z.B. bei Hover/Aktiv)
- Footer Topbar Hintergrundfarbe – Hintergrundfarbe der obersten Footer-Leiste
- Footer Hintergrundfarbe – Hintergrundfarbe des Hauptfooters
- Footer Akzentfarbe – Akzentfarbe für Elemente im Footer
- Footer Bottombar Hintergrundfarbe – Hintergrundfarbe der untersten Footer-Leiste
Buttons
string
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
- Accent Button 1 – Zusätzliche Gestaltungsmöglichkeit für Buttons mit Akzentfarbe
- Consent & Load more – Buttons im Cookie-Banner und für “Mehr laden”
color
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.
select
Zusätzlich kannst du den Button-Typ der einzelnen Buttons anpassen:
- Full – Button ausgefüllt mit Farbe
- Outlined – Button umrandet mit Farbe
- Flat – Weder Füllung noch Umrandung, nur die Schrift ist eingefärbt
- Link – Button wird wie ein reiner Textlink dargestellt
select
Für die Consent-Buttons (“Alles Akzeptieren”, “Einmal erlauben”, “Konfigurieren”, “Alles Ablehnen”) und den Load-more-Button wählst du per Dropdown, welcher der zuvor definierten Button-Stile (z. B. Sekundärbutton) verwendet werden soll.
Eingabefelder
Containersettings
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.
number
Legt fest, wie viele Zeilen des Produkttitels in der Produktbox maximal angezeigt werden, bevor der Text abgeschnitten wird.
number
Legt fest, wie viele Zeilen der Produktbeschreibung in der Produktbox maximal angezeigt werden, bevor der Text abgeschnitten wird.
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. Mitgelieferte Schriftarten:- System Default Serif
- System Default Sans-Serif
- Dyslexia (barrierefreie Schriftart)
- Custom (auch Pagespeed optimiert)
Dyslexia hat nicht jeden Schriftschnitt: vorhanden sind nur 400 und 700. Wählst du z. B. 800 (ExtraBold), rendert die Schrift stattdessen mit 700.
Font Bodytext
Wähle hier die Schriftart für deine Textkörper. Du kannst eine der mitgelieferten Schriftarten oder Custom wählen, dieselbe Auswahl wie unter Font Headlines beschrieben. 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, dieselbe Auswahl wie unter Font Headlines beschrieben. Display Fontweight: Schriftdicke des Schaugrößentexts.Navigation
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.
Deine Style-Vorschau
Hier siehst du eine Zusammenfassung deiner erfassten Styles auf einen Blick.
Die Vorschau fasst alle wichtigen Styles zusammen: Grundfarben (Primary, Secondary, Tertiary, Accent 1/2), Signalfarben (Info, Success, Warning, Danger), Meta Theme, Headline-Beispiele auf hellem und dunklem Hintergrund, Button-Varianten sowie Beispiele für Success-, Warning-, Info- und Error-Meldungen.