Wo sich diese Einstellungen befinden
Das Branding wird pro Markt konfiguriert und wirkt sich innerhalb eines Marktes auf alle Seiten gleichzeitig aus. Öffne den Builder, wähle mit dem Märkte-Button (Landesflagge) oben in der linken Seitenleiste einen Markt aus und öffne dann den Reiter Einstellungen (Zahnrad-Symbol). Die Einstellungen haben eigene Unterreiter in dieser Reihenfolge: Branding, Farben, Schriftarten, Layout, Animationen, Automatisierungen, Eingabefelder, Icons, Beschränkungen, Checkout, Checkout-Formular, Wartungsseite, Custom CSS und Custom Javascript. Änderungen gelten für den ausgewählten Markt und werden live geschaltet, wenn du auf Veröffentlichen klickst. Beim Wechsel des Marktes werden dessen eigene Farben, Schriftarten und das Layout geladen.
Farbschemata
Im Reiter Farben kannst du bis zu 9 Farbschemata anlegen. Sobald das Limit erreicht ist, verwandelt sich die Hinzufügen-Karte in ein deaktiviertes Zählabzeichen wie 9/9. Jeder Abschnitt, Block und jede Komponente bezieht sich auf ein Schema anhand seiner Nummer. Wenn du die Farben eines Schemas änderst, werden alle Abschnitte, die es nutzen, auf allen Seiten sofort neu gestaltet. Mit Rechtsklick auf eine Schema-Karte kannst du sie duplizieren oder löschen.
Farbrollen in jedem Schema
Jedes Schema definiert diese Rollen, alle als Hex-Werte festgelegt:
- Hintergrund: Der Haupt-Hintergrund eines Abschnitts.
- Innerer Hintergrund: Ein getönter Hintergrund für Karten und verschachtelte Inhalte innerhalb eines Abschnitts.
- Überschrift: Farbe für Überschriftentexte.
- Text: Farbe für Fließtext und Beschreibungen.
- Wichtiger Text: Hervorgehobene Texte wie Preise und wichtige Werte.
- Links und Hover-Links: Linkfarbe im Normal- und Hover-Zustand.
- Rahmen: Rahmen von Elementen und Trennlinien.
- Kontur: Fokus-Ringe und Akzent-Konturen, die stärker auffallen sollen als Rahmen.
- Schatten: Farbe für Box-Schatten (meist halbtransparent).
- Primärer Button: Hintergrund, Text und Rahmen, jeweils mit eigener Hover-Farbe (insgesamt 6 Werte).
- Sekundärer Button: Hintergrund, Text und Rahmen, jeweils mit eigener Hover-Farbe (insgesamt 6 Werte).
- Eingabefeld Hintergrund, Text, Rahmen und Label: Gestaltung von Formularfeldern.
- Eingabefeld Hover-Hintergrund: Hintergrund des Eingabefelds, wenn ein Kunde mit der Maus darüber fährt.
Tipps für starke Farbschemata
- Nutze einen neutralen, hellen Hintergrund für die meisten Abschnitte und reserviere kräftige Farben für ein Akzent-Schema in Hero- und Call-to-Action-Bereichen.
- Wähle für den Primären Button-Hintergrund eine deutlich andere Farbe als für den Abschnitts-Hintergrund, damit der Button hervorsticht.
- Setze den Inneren Hintergrund als leichte Tönung des Haupt-Hintergrunds, damit Karten sich abheben, ohne zu stören.
- Achte auf mindestens 4,5:1 Kontrast zwischen Text und Hintergrund.
Schriftarten
Im Reiter Schriftarten ordnest du vier Rollen jeweils einer Schriftfamilie zu:
- Fließtext: Für normalen Text und Beschreibungen.
- Überschrift: Für alle Überschriften im Shop.
- Unterüberschrift: Für sekundäre Titel und Abschnittsüberschriften.
- Akzent: Eine stilistische Schrift für Preise, Badges und dekorative Hervorhebungen.
Verfügbare Schriftarten: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface und Acme. Für Shops mit arabischen Inhalten wird jeder Schrift automatisch eine passende arabische Variante zugeordnet, du musst keine arabische Schrift separat auswählen.
Seitenbreite
Im Reiter Layout findest du einen Seitenbreite-Schieberegler, mit dem du die maximale Breite des Hauptinhaltsrasters von 900 bis 1400 px in 100er-Schritten festlegst (also 900, 1000, 1100, 1200, 1300 oder 1400; Standard ist 1200). Abschnitte mit Seitenbreite sind auf diesen Wert begrenzt, Abschnitte mit Voll erstrecken sich immer über die gesamte Bildschirmbreite. Auf Bildschirmen, die schmaler als die gewählte Breite sind, passen sich die Abschnitte automatisch an und füllen 100% der Breite.
Logo
Das Logo wird an zwei Stellen festgelegt: im Logo-Block im Kopfbereich und im Über uns-Block im Footer. Klicke auf den Block und wähle dann mit dem Logo-Bildauswähler ein Bild aus deiner Medienbibliothek oder lade ein neues hoch. Nach der Auswahl kannst du die Anzeige-Breite und Höhe festlegen (jeweils 20 bis 300 px); das andere Maß wird automatisch angepasst, damit das Seitenverhältnis erhalten bleibt. Das Standardmaß für das Header-Logo ist 120 px breit und 50 px hoch. Du kannst die horizontale Position (links, mittig oder rechts) und den Innenabstand einstellen. Standardmäßig verlinkt das Header-Logo auf die Startseite. Du kannst es rein dekorativ machen, indem du den Schalter Logo leitet zur Startseite weiter in der Gruppe Kopfbereich im Reiter Beschränkungen ausschaltest.
Favicon
Das Favicon legst du im Reiter Branding fest. Klicke auf Favicon auswählen und wähle ein PNG-, JPEG-, WEBP- oder ICO-Bild (empfohlene Größe 32x32 oder 16x16 px). Es erscheint in Browser-Tabs und Lesezeichen.
Hintergrundbild für den Body
Ebenfalls im Reiter Branding kannst du optional ein Body-Bild hinter dem gesamten Shop festlegen (PNG, JPEG oder WEBP). Nach der Auswahl erscheinen zwei Einstellungen: Größe (Cover füllt den Viewport und schneidet das Bild ggf. zu; Contain zeigt das ganze Bild an) und Wiederholen (bei Aktivierung wird das Bild gekachelt und scrollt mit der Seite; bei Deaktivierung bleibt ein einzelnes Bild fixiert, während der Inhalt darüber scrollt). Verwende ein stark komprimiertes Bild, damit die Seite schnell lädt.
Custom CSS und JavaScript
Für Anpassungen, die mit den Standard-Einstellungen nicht möglich sind, kannst du im Reiter Custom CSS und im Reiter Custom Javascript jeweils bis zu 1.000 Zeichen einfügen, die auf jeder Seite des Shops ausgeführt werden. Nutze diese Möglichkeit sparsam. Für Styling, das nur einen einzelnen Abschnitt betrifft, hat jeder Abschnitt auch einen eigenen Custom CSS-Reiter im Bedienfeld. Das ist sicherer als das globale Feld.