Branding-Editor in Checkout Blocks verwenden

Du kannst den Branding-Editor in Checkout Blocks verwenden, der von der Checkout Branding API unterstützt wird, um das Erscheinungsbild deiner Checkout- und Kontoseiten anzupassen, ohne dabei Code ändern zu müssen.

Du kannst den Branding-Editor verwenden, um die Farben und Checkout-Elemente für jede beliebige Checkout-Konfiguration zu bearbeiten. Änderungen, die du mithilfe des Branding-Editors am Checkout-Design vornimmst, werden auf alle Seiten deines Checkouts angewendet, einschließlich der Danke-Seite, der Bestellstatus-Seite und der neuen Kundenkontoseiten.

Um den Branding-Editor über deinen Shopify-Adminbereich zu starten, klicke auf Apps > Checkout Blocks und klicke anschließend auf Branding-Editor.

Auf dieser Seite

Checkout-Farben anpassen

Im Abschnitt Farben kannst du die Basisfarben deines Checkouts anpassen. Du kannst auch bis zu 4 Farbschemas anpassen, die auf einzelne Abschnitte angewendet werden, wenn du dein Design mehr im Detail bearbeiten möchtest. Du kannst Farbtypen, einschließlich Akzentfarben (für interaktive Elemente wie Links) und Markenfarben (für Elemente wie primäre und sekundäre Schaltflächen), bearbeiten.

Schritte:

Customize global colors

Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.
Klicke auf Branding-Editor.
Klicke im Abschnitt Farben auf Allgemeine Farben.
Um eine vorhandene Checkout-Farbe zu überschreiben, klicke im Abschnitt Allgemeine Farben auf das Symbol ⊕ und wähle die gewünschte Farbe aus, indem du eine der folgenden Aktionen ausführst:
- Verwende die Farbauswahl, um eine Farbe auszuwählen.
- Gib den HEX-Farbcode in das verfügbare Feld ein.
Klicke auf Speichern.

Customize color schemes

Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.
Klicke auf Branding-Editor.
Klicke im Abschnitt Farben auf Schema 1, Schema 2, Schema 3 oder Schema 4, um ein bestimmtes Farbschema anzupassen.
Wähle eine der folgenden Komponenten aus, die du anpassen möchtest:
- Hauptfarben
- Formularsteuerung
- Primäre Schaltfläche
- Sekundäre Schaltfläche
Klicke im Abschnitt Basis auf das Symbol ⊕ neben dem Farbtyp, den du anpassen möchtest, und wähle die gewünschte Farbe aus, indem du eine der folgenden Aktionen ausführst:
- Verwende die Farbauswahl, um eine Farbe auszuwählen.
- Gib den HEX-Farbcode in das verfügbare Feld ein.
Optional: Wenn du das Schema für die Optionen Formularsteuerung, Primäre Schaltfläche oder Sekundäre Schaltfläche bearbeiten möchtest, kannst du auch die Farben für das Interaktionsverhalten der Optionen Bei Auswahl und Hover-Effekt anpassen. Klicke auf das Symbol ⊕ neben dem Farbtyp, den du anpassen möchtest, und wähle die gewünschte Farbe aus, indem du eine der folgenden Aktionen ausführst:
- Verwende die Farbauswahl, um eine Farbe auszuwählen.
- Gib den HEX-Farbcode in das verfügbare Feld ein.
Klicke auf Speichern.

Checkout-Elemente anpassen

Im Branding-Editor kannst du im Abschnitt Anpassungen die folgenden Elemente deines Checkouts bearbeiten:

Favicon: Wähle das Symbol aus, das Kunden beim Checkout im Browser-Tab angezeigt wird.
Allgemein: Passe den Eckenradius für alle Elemente (Formulareingaben, Schaltflächen und Karten) an.
Header und Logo: Wähle die Header-Position im Checkout aus und lege fest, ob Brotkrümel, ein Link zum Warenkorb und ein Logo angezeigt werden sollen.
Hauptinhaltsbereich: Wende Designschemas auf den Hauptinhaltsbereich des Checkouts an, einschließlich der Hintergrundbilder, Randbreiten und Farbschemas.
Bestellübersicht: Wende Designschemas auf die Seitenleiste des Checkouts mit der Kunden-Bestellübersicht an, einschließlich der Hintergrundbilder, Randbreiten und Farbschemas.
Fußzeile: Wähle im Checkout die Fußzeilenbreite aus und lege fest, ob Shop-Richtlinien angezeigt werden.
Typografie: Wähle die Schriftgröße, Schriftfamilie, Schriftbreite und die Unterschneidung aus und lege die Groß- und Kleinschreibung für bis zu 3 Ebenen von Überschriften fest.
Schaltflächen: Wähle den Abstand, die Rahmen und den Stil für die primären und sekundären Schaltflächen aus.
Formulare: Passe den Stil der Checkout-Formulareingaben an, z. B. Kontrollkästchen, Textfelder und ausgewählte Optionen in einer Liste.
Produkt-Vorschaubilder: Passe den Rahmenstil und den Stil des Eckenradius von Produktbildern im Checkout an.

Schritte:

Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.
Klicke auf Branding-Editor.
Klicke im Abschnitt Anpassungen auf eines der Elemente, das du anpassen möchtest, z. B. Header und Logo.
Nutze die verfügbaren Anpassungsoptionen, um das Checkout-Element nach deinen Wünschen zu gestalten.
Klicke auf Speichern.

Checkout-Konfigurationen wechseln

Wenn du den Branding-Editor öffnest, bearbeitest du standardmäßig die Checkout-Konfiguration, die derzeit live ist. Du kannst jedoch die Checkout-Konfiguration ändern, die du mit dem Branding-Editor bearbeiten möchtest, und neue Checkout-Konfigurationen erstellen.

Erfahre mehr über die Verwaltung deiner Live-Checkout-Konfigurationen und Checkout-Konfigurationsentwürfe.

Schritte:

Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.
Klicke auf Branding-Editor.
Klicke auf den Namen der aktuellen Checkout-Konfiguration, um ein Dropdown-Menü mit einer Liste der Live-Konfiguration sowie allen Konfigurationsentwürfen zu öffnen, und wähle anschließend die Checkout-Konfiguration aus, die du anpassen möchtest:
- Wähle eine vorhandene Konfiguration aus, die du bearbeiten möchtest.
- Klicke auf ⊕ Neue Konfiguration erstellen, um zu den Checkout-Einstellungen im Shopify-Adminbereich weitergeleitet zu werden.

Checkout-Vorschau anzeigen

Du kannst die Änderungen, die du im Branding-Editor vornimmst, jederzeit in der Vorschau anzeigen, indem du die gewünschte Checkout-Konfiguration auswählst und auf Vorschau klickst. Der Checkout- und Konto-Editor wird in einem separaten Tab mit allen deinen Änderungen geöffnet, damit du eine Vorschau der Änderungen im Checkout erhältst.

Schritte:

Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.
Klicke auf Branding-Editor.
Nimm Anpassungen an den Farben und Checkout-Elementen, die du anpassen möchtest, in deiner Checkout-Konfiguration vor.
Klicke auf Vorschau.

Checkout-Konfigurationen exportieren und importieren

Du kannst Checkout-Konfigurationen mit JSON-Dateien exportieren und importieren.

Checkout-Konfiguration exportieren:

Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.
Klicke auf Branding-Editor.
Wähle die Checkout-Konfiguration aus, für die du mit dem Branding-Editor Anpassungen vorgenommen hast.
Klicke auf Weitere Aktionen> > Konfiguration exportieren.

Die Checkout-Konfiguration wird als .json auf dein lokales Gerät heruntergeladen.

Checkout-Konfiguration importieren:

Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.
Klicke auf Branding-Editor.
Wähle die Checkout-Konfiguration aus, auf die du das importierte Branding-Profil anwenden möchtest.
Klicke auf Weitere Aktionen> > Konfiguration importieren.
Lade im Dialogfeld Checkout-Branding importieren deine JSON-Datei für das Branding hoch:
1. Klicke auf Datei hinzufügen.
2. Wähle die entsprechende JSON-Datei auf deinem Gerät aus.
3. Klicke auf Importieren und fortfahren.
Überprüfe die vorgeladene Anpassungskonfiguration. Ändere sie nach Bedarf.
Klicke auf Speichern.

Checkout-Stil auf Standard zurücksetzen

Wenn du eine Farbe oder ein Checkout-Element mit dem Branding-Editor bearbeitest, kannst du den spezifischen Wert auf den Standardwert zurücksetzen, indem du neben der geänderten Farbe oder dem geänderten Element auf Zurücksetzen klickst.

Du kannst das gesamte Branding für deine Checkout-Konfiguration jederzeit auf die Shopify-Standardwerte zurücksetzen. Durch das Zurücksetzen der Checkout-Konfiguration werden im Branding-Editor auf allen Seiten alle Anpassungen gelöscht. Dieser Vorgang kann nicht rückgängig gemacht werden.

Schritte:

Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.
Klicke auf Branding-Editor.
Wähle die Checkout-Konfiguration aus, die du zurücksetzen möchtest.
Klicke auf Auf Standard zurücksetzen.
Klicke im Dialogfeld Auf Standardstile zurücksetzen? auf Fortfahren.