Wo das Einstellungspanel liegt
Das Einstellungspanel des Builders enthält die shopweiten Design- und Verhaltenssteuerungen, die außerhalb jedes einzelnen Abschnitts liegen. Öffne den Builder und klicke dann in der linken Symbolleiste auf das Zahnradsymbol (die Symbole für Marktflagge, Seiten und Beiträge liegen darüber). Das Panel öffnet sich als einklappbare Tabs: Branding, Farben, Schriften, Layout, Animationen, Automatisierungen, Eingaben, Symbole, Verbote, Checkout, Checkout-Formular, Wartungsseite, individuelles CSS und individuelles JavaScript. Jede Änderung ist ein Entwurf, bis du in der oberen Leiste auf Veröffentlichen drückst.
Einstellungen werden pro Markt gespeichert
All diese Einstellungen werden pro Markt gespeichert, nicht einmal für den gesamten Shop. Der Untertitel des Panels lautet "Globale Einstellungen von [Marktname]", um anzuzeigen, welchen Markt du bearbeitest. Wechsle zuerst mit dem Flaggensymbol den Markt und öffne dann die Einstellungen. Innerhalb eines Marktes sind die Einstellungen über jede Seite hinweg global.
Branding
Dieser Tab enthält zwei Bild-Assets (er enthält nicht dein Logo, das innerhalb des Header-Abschnitts festgelegt wird, nicht hier):
- Favicon: das kleine Browser-Tab-Symbol. Akzeptiert PNG, JPEG, WEBP oder ICO (32x32 oder 16x16 empfohlen).
- Hintergrundbild: ein optionaler shopweiter Hintergrund. Akzeptiert PNG, JPEG oder WEBP. Wenn festgelegt, erscheinen zwei weitere Steuerungen: Größe (Cover oder Contain) und ein Schalter Wiederholen.
Farben
Jeder Markt hat bis zu neun Farbschemata (mindestens eines). Jeder Abschnitt, Block und jede Komponente verweist über ihre Nummer auf ein Schema, sodass das Bearbeiten eines Schemas alles umfärbt, was es verwendet. Klicke auf eine Karte, um ihre Farben zu bearbeiten, klicke mit der rechten Maustaste, um zu Duplizieren (bei neun gesperrt) oder zu Löschen (beim letzten Schema gesperrt), und ziehe, um die Reihenfolge zu ändern. Ein Schema definiert Farben für Hintergründe, Überschriften, Fließtext, Links, Rahmen, Umrisse, Schatten, primäre und sekundäre Schaltflächen (mit Hover-Zuständen) und Formularfelder.
Schriften
Die Typografie ordnet eine Schriftfamilie vier Rollen zu:
- Fließtext: Absätze und allgemeiner Text.
- Überschrift: große Seiten- und Abschnittstitel.
- Unterüberschrift: sekundäre Titel und Abschnittsunterüberschriften.
- Akzent: dekorative Hervorhebung.
Die Schriftauswahl (mit Suche) teilt Schriften in Systemschriften (laden sofort) und Nicht-Systemschriften (werden zum Besucher heruntergeladen, können das Laden verlangsamen). Mehr als eine Nicht-Systemschrift kann die Seitengeschwindigkeit beeinträchtigen. Jede lateinische Schrift wird automatisch mit einer passenden arabischen Schrift gepaart, sodass Sprachen mit Rechts-nach-links-Schreibrichtung sauber dargestellt werden.
Layout
Eine Steuerung: Seitenbreite, ein Schieberegler von 900px bis 1400px in 100px-Schritten (Standard 1200). Das ist die maximale Inhaltsbreite nur auf großen Desktop-Bildschirmen. Auf dem Handy beträgt die Breite immer 100 %. Auf volle Breite gesetzte Abschnitte ignorieren diesen Wert und dehnen sich von Rand zu Rand.
Animationen
- Scroll-Einblendung: wie Abschnitte animiert werden, wenn sie ins Sichtfeld kommen: Keine, Einblenden, Nach oben gleiten, Nach links gleiten oder Zoom (Standard Nach oben gleiten).
- Bilder-Zoom-Effekt: ein Schalter, der den Hover-Zoom auf Produktbildern aktiviert.
Automatisierungen
Ein Schalter: Videos automatisch abspielen. Wenn aktiviert, starten Videoblöcke von selbst. Aufgrund von Browser-Richtlinien bleiben sie stummgeschaltet, bis der Besucher mit der Seite interagiert.
Eingaben (Gestaltung der Formularfelder)
Dieser Tab gestaltet jedes Eingabefeld im Schaufenster. Er hat keine Farboption (Eingabefarben stammen aus dem Farbschema). Die Steuerungen sind:
- Typ (Layout): Einklappen setzt jede Beschriftung über ihr eigenes Feld, Ausklappen setzt eine Beschriftung wie eine Kopfzeile über die gesamte Feldgruppe.
- Symbole: Keine blendet Feldsymbole aus, Standard zeigt sie im Feld, Beschriftung hängt sie an die Beschriftung.
- Position: Anfang oder Ende, nur angezeigt, wenn Symbole auf Standard gesetzt ist.
Symbole
Eine Steuerung: Strichstärke, die Linienstärke der Oberflächensymbole, gesetzt auf Standard (normal) oder Stark (fett).
Verbote
Schränke Browser-Interaktionen ein, um das gelegentliche Kopieren zu erschweren. Allgemeine Optionen: Texte und Bilder kopieren, Texte und Bilder auswählen, Zugriff auf das Kontextmenü (Rechtsklick) und Untersuchen der Seite (entfernt den Seiteninhalt, wenn Entwicklerwerkzeuge erkannt werden). Eine separate Header-Option, Logo verlinkt zur Startseite, lässt das Header-Logo zur Startseite verlinken, wenn aktiviert, oder dekorativ bleiben, wenn deaktiviert.
Checkout
- Checkout-Methode: In den Warenkorb leitet Käufer durch die Warenkorb-Schublade, Schnell-Checkout überspringt den Warenkorb und geht direkt zum Bestellformular.
- Sekundäre Methode: ein Schalter, der zusätzlich die gegenteilige Methode als sekundäre Option anbietet, sodass ein Schnell-Checkout-Shop trotzdem eine In-den-Warenkorb-Schaltfläche zeigen kann und umgekehrt.
Checkout-Formular
Dieser Tab steuert jedes Feld im Bestellformular. Jedes Feld ist eine Zeile, die du zum Umsortieren ziehen kannst. Für jedes Feld legst du fest:
- Status: Deaktiviert (ausgeblendet, aus dem Formular entfernt), Aktiviert (angezeigt, aber optional) oder Erforderlich (der Käufer muss es ausfüllen).
- Beschriftung: der sichtbare Feldname (bis zu 50 Zeichen).
- Platzhalter: der Hinweistext im leeren Feld (bis zu 50 Zeichen).
Regionsfelder (Bezirk, Stadt, Bundesland, Gemeinde, Provinz) erhalten außerdem eine Steuerung Typ (Eingabe für freien Text oder Auswahl für ein Dropdown-Menü), aber nur, wenn das Land des aktiven Marktes kuratierte Standortdaten hat. Verfügbare Felder umfassen vollständiger Name, Vor-/Nachname, Firma, Geschlecht, Geburtstag, Adresse, Adresszeile 2, Personalausweisnummer, Stadtviertel, Bezirk, Wohnung, Stockwerk, Postleitzahl, Stadt, Bundesland, Gemeinde, Provinz, Bestellnotiz, Geschenk, E-Mail, Telefon, WhatsApp, Link, Farbe, Versand und Zahlung. Da das Formular pro Markt gilt, kannst du in einem Markt eine Personalausweisnummer verlangen und sie in einem anderen ausblenden.
Wartungsseite
Verberge das Schaufenster während Aktualisierungen hinter einer Halteseite. Steuerungen: ein Hauptschalter Aktiviert (wenn aktiviert, zeigt jede Route die Wartungsseite, nicht nur die Startseite), eine Überschrift (reiner Text, bis zu 100 Zeichen), eine Nachricht (Rich-Text, bis zu 500 Zeichen) und ein Farbschema. Schalte Aktiviert aus, um den Shop wieder online zu bringen.
Individuelles CSS und individuelles JavaScript
Für fortgeschrittene Anpassungen fügt individuelles CSS deine eigenen Stile ein (bis zu 1000 Zeichen) und individuelles JavaScript fügt deine eigenen Skripte ein, etwa Drittanbieter-Tracking (bis zu 1000 Zeichen). Beide gelten für den gesamten Shop, nutze sie also nur, wenn du mit Code vertraut bist.