Wo diese Einstellungen zu finden sind
Diese Einstellungen werden pro Markt konfiguriert, und innerhalb eines Marktes wirken sie sich auf alle Seiten gleichzeitig aus. Öffnen Sie den Builder, wählen Sie über den Markt-Tab (Symbol mit der Landesflagge) in der linken Seitenleiste einen Markt aus und klicken Sie dann auf den Tab Einstellungen (Zahnradsymbol). Änderungen gelten für den ausgewählten Markt und werden live, sobald Sie auf Veröffentlichen klicken. Eine vollständige Liste aller Einstellungen finden Sie unter Referenz der Builder-Einstellungen.
Farbschemata
Storeep verwendet eine Palette von bis zu 9 Farbschemata. Jeder Abschnitt, jeder Block und jede Komponente in Ihrem Shop verweist anhand der Nummer (1 bis 9) auf eines dieser Schemata. Wenn Sie die Farben eines Schemas ändern, werden sofort alle Abschnitte aktualisiert, die es verwenden, über alle Seiten hinweg.
Farbrollen innerhalb jedes Schemas
Jedes Schema definiert die folgenden Farbrollen, die alle als Hex-Farbwerte festgelegt werden:
- Hintergrund: die Haupthintergrundfarbe des Abschnitts.
- Innerer Hintergrund: ein dezent getönter Hintergrund für Karten und verschachtelte Inhaltsbereiche innerhalb des Abschnitts.
- Überschriftenfarbe: die Farbe für Überschriftentext.
- Fließtextfarbe: die Farbe für Absatztext.
- Hervorgehobene Textfarbe: eine betonte Textfarbe für Preise, Spar-Badges und Countdown-Werte. In der Regel der dunkelste oder kräftigste Ton der Palette.
- Linkfarbe: die Standardfarbe für Hyperlinks.
- Link-Hover-Farbe: die Hyperlink-Farbe, wenn ein Käufer mit dem Mauszeiger darüber fährt.
- Rahmenfarbe: die Farbe für Elementrahmen und Trennlinien.
- Umrandungsfarbe: die Farbe für Fokusringe, Tastaturauswahl-Hervorhebungen und Akzentumrandungen, die deutlicher hervortreten müssen als normale Rahmen.
- Schattenfarbe: die Farbe für Schlagschatten (meist mit etwas Transparenz).
- Hintergrund des primären Buttons: die Füllfarbe für primäre Buttons.
- Text des primären Buttons: die Beschriftungsfarbe auf primären Buttons.
- Rahmen des primären Buttons: die Rahmenfarbe primärer Buttons.
- Hover-Hintergrund des primären Buttons: die Füllfarbe des primären Buttons beim Überfahren.
- Hover-Text des primären Buttons: die Beschriftungsfarbe des primären Buttons beim Überfahren.
- Hover-Rahmen des primären Buttons: die Rahmenfarbe des primären Buttons beim Überfahren.
- Hintergrund des sekundären Buttons: die Füllfarbe für sekundäre Buttons.
- Text des sekundären Buttons: die Beschriftungsfarbe auf sekundären Buttons.
- Rahmen des sekundären Buttons: die Rahmenfarbe sekundärer Buttons.
- Hover-Hintergrund des sekundären Buttons: die Füllfarbe des sekundären Buttons beim Überfahren.
- Hover-Text des sekundären Buttons: die Beschriftungsfarbe des sekundären Buttons beim Überfahren.
- Hover-Rahmen des sekundären Buttons: die Rahmenfarbe des sekundären Buttons beim Überfahren.
- Eingabe-Hintergrund: die Hintergrundfarbe von Formular-Eingabefeldern.
- Eingabe-Textfarbe: die Textfarbe innerhalb von Formular-Eingabefeldern.
- Eingabe-Rahmenfarbe: die Rahmenfarbe von Formular-Eingabefeldern.
- Eingabe-Beschriftungsfarbe: die Farbe des Beschriftungstexts über Formularfeldern.
- Eingabe-Fokus-Hintergrund: die Hintergrundfarbe der Eingabe, wenn ein Käufer das Feld fokussiert oder mit dem Mauszeiger darüber fährt.
Tipps für starke Farbschemata
- Verwenden Sie für den Hintergrund der meisten Abschnitte eine neutrale helle Farbe und sparen Sie sich kräftige Farben für ein einzelnes Akzentschema auf, das in Hero- und Call-to-Action-Abschnitten genutzt wird.
- Gestalten Sie den Hintergrund des primären Buttons deutlich anders als den Hintergrund des Abschnitts, denn der Button muss klar hervorstechen.
- Halten Sie den Inneren Hintergrund als sehr leichte Tönung des Haupt-Hintergrunds, damit sich Kartenhintergründe abheben, ohne störend zu wirken.
- Streben Sie einen Kontrast von mindestens 4,5:1 zwischen Fließtextfarbe und Hintergrund sowie zwischen Text des primären Buttons und Hintergrund des primären Buttons an.
Typografie
Vier Schriftrollen steuern die Typografie auf jeder Seite. Jede Rolle ist einer Schriftfamilie aus der verfügbaren Bibliothek zugeordnet.
- Fließtext: die primäre Schrift für Absatztext und Beschreibungen.
- Überschrift: die Schrift für alle Überschriften im gesamten Shop.
- Zwischenüberschrift: die Schrift für sekundäre Titel und Abschnittsuntertitel, die zwischen Überschriften- und Fließtextstil vermittelt.
- Akzent: eine stilistische Schrift für Preise, Badges und dekorative Hervorhebungen.
Zu den verfügbaren Schriften gehören: 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.
Bei Shops mit arabischen Inhalten werden Schriften automatisch mit passenden arabischen Gegenstücken kombiniert: Inter wird zum Beispiel mit Cairo gepaart und Poppins mit Tajawal. Sie müssen die arabische Schrift nicht separat auswählen.
Seitenbreite
Die globale Einstellung Seitenbreite steuert die maximale Breite des Hauptinhaltsrasters in Pixeln. Abschnitte, die auf die Breite Seite eingestellt sind, werden auf diesen Wert beschränkt; Abschnitte, die auf Voll eingestellt sind, erstrecken sich unabhängig davon immer über das gesamte Ansichtsfenster. Verfügbare Werte: 900, 1000, 1100, 1200 (Standard), 1300 und 1400 px. Auf Ansichtsfenstern, die schmaler als die gewählte Breite sind, schrumpfen Abschnitte automatisch, um 100 % des Bildschirms auszufüllen.
Logo
Das Logo wird im Logo-Block des Abschnitts Kopfzeile und im Block Über uns in der Fußzeile festgelegt. Klicken Sie im Bedienfeld auf den Logo-Block und dann auf + Medien hinzufügen oder + Bild hinzufügen, um Ihr Logo von Ihrem Gerät hochzuladen oder es aus Ihrer Medienbibliothek auszuwählen. Legen Sie nach dem Hochladen die Anzeigebreite (20–300 px) und -höhe (20–300 px) fest; die jeweils andere Dimension skaliert automatisch, um das Seitenverhältnis beizubehalten.
Favicon
Das Favicon wird im Builder unter Einstellungen → Branding festgelegt. Klicken Sie auf das Favicon-Feld und laden Sie ein Bild hoch (empfohlen: ein quadratisches Bild). Das Favicon erscheint in Browser-Tabs und Lesezeichen.
Hintergrundbild des Bodys
Ebenfalls unter Einstellungen → Branding: Sie können optional ein Hintergrundbild für die gesamte Seite festlegen. Konfigurieren Sie, wie es skaliert (Cover füllt das gesamte Ansichtsfenster, Contain passt das Bild darin ein) und ob es sich wiederholt (kachelt) oder als einzelnes Bild hinter dem scrollenden Inhalt verbleibt.
Globales benutzerdefiniertes CSS und JavaScript
Für fortgeschrittene Anpassungen, die mit den Standardeinstellungen nicht möglich sind, bietet Einstellungen ein Feld für Globales CSS (bis zu 1.000 Zeichen) und ein Feld für Globales JS (bis zu 1.000 Zeichen). Hier eingegebenes CSS wird in jede Seite des Shops eingefügt; hier eingegebenes JS läuft auf jeder Seite. Verwenden Sie diese Felder sparsam und bevorzugen Sie für seitenspezifische Anpassungen den Abschnitt Benutzerdefinierter Code.