Verwendung des Branding-Editors in Checkout Blocks

Mit dem Branding-Editor in Checkout Blocks, der auf der Checkout Branding API basiert, kannst du die Ästhetik deiner Checkout- und Kontoseiten anpassen, ohne Code ändern zu müssen.

Du kannst den Branding-Editor verwenden, um die Farben und Checkout-Elemente für jede Checkout-Konfiguration zu bearbeiten. Änderungen, die du mit dem Branding-Editor am Design deines Checkouts vornimmst, gelten für alle Seiten deines Checkouts, einschließlich der Seite mit der Dankbotschaft, der Bestellstatus-Seite und der Seiten für neue Kundenkonten.

Um den Branding-Editor in deinem Shopify-Adminbereich zu starten, klicke auf Apps > Checkout Blocks und dann auf Branding-Editor.

Checkout-Farben anpassen

Im Abschnitt Farben kannst du die Grundfarben deines Checkouts anpassen. Du kannst auch bis zu 4 Farbschemata anpassen, die für einzelne Abschnitte gelten, wenn du detailliertere Änderungen an deinem Design vornehmen möchtest. Du kannst Farbtypen bearbeiten, einschließlich Akzentfarben (für interaktive Elemente wie Links) und Markenfarben (für Elemente wie primäre und sekundäre Schaltflächen).

Schritte:

Checkout-Elemente anpassen

Im Abschnitt Anpassungen des Branding-Editors kannst du die folgenden Elemente deines Checkouts bearbeiten:

• Favicon: Wähle das Symbol aus, das den Kund:innen während des Checkouts im Browser-Tab angezeigt wird.
• Global: Passe den Eckenradius für alle Elemente an (Formulareingaben, Schaltflächen und Karten).
• Header und Logo: Wähle die Position des Headers im Checkout aus und lege fest, ob Brotkrümel, ein Warenkorb-Link und ein Logo angezeigt werden sollen.
• Hauptbereich: Wende Designschemata auf den Hauptinhaltsbereich des Checkouts an, einschließlich Hintergrundbildern, Rahmenbreiten und Farbschemata.
• Bestellübersicht: Wende Designschemata auf die Seitenleiste des Checkouts an, die die Bestellübersicht enthält, einschließlich Hintergrundbildern, Rahmenbreiten und Farbschemata.
• Fußzeile: Wähle die Breite der Fußzeile im Checkout aus und lege fest, ob Shop-Richtlinien angezeigt werden sollen.
• Typografie: Wähle die Schriftgröße, Schriftfamilie, den Schriftschnitt, das Kerning und die Groß-/Kleinschreibung für bis zu 3 Ebenen von Headern aus.
• Schaltflächen: Wähle das Padding, die Rahmen und die Stile der primären und sekundären Schaltflächen aus.
• Formulare: Passe die Stile für die Eingabefelder im Checkout-Formular an, z. B. für Kontrollkästchen, Textfelder und ausgewählte Optionen aus einer Liste.
• Produkt-Thumbnails: Passe die Stile für Rahmen und Eckenradius für Produktbilder im Checkout an.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.

2. Klicke auf Branding-Editor.

3. Klicke im Abschnitt Anpassungen auf eines der Elemente, die du anpassen möchtest, z. B. Header und Logo.

4. Passe das Checkout-Element mit den verfügbaren Anpassungsoptionen nach deinen Wünschen an.

5. Klicke auf Speichern.

Checkout-Konfigurationen wechseln

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

Mehr Informationen zur Verwaltung deiner aktiven Checkout-Konfigurationen und Checkout-Konfigurationsentwürfe.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.

2. Klicke auf Branding-Editor.

3. Klicke auf den Namen der aktuellen Checkout-Konfiguration, um ein Dropdown-Menü mit einer Liste der aktiven Konfiguration sowie allen Konfigurationsentwürfen zu öffnen, und wähle dann 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 deines Shopify-Adminbereichs weitergeleitet zu werden.

Checkout als Vorschau anzeigen

Du kannst die Änderungen, die du im Branding-Editor vornimmst, jederzeit in der Vorschau anzeigen, indem du die Checkout-Konfiguration auswählst, für die du eine Vorschau anzeigen möchtest, und dann auf Vorschau klickst. Der Checkout- und Konten-Editor wird in einem separaten Tab mit all deinen angewendeten Änderungen gestartet, sodass du eine Vorschau davon erhältst, wie sie im Checkout angezeigt werden.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.

2. Klicke auf Branding-Editor.

3. Nimm alle gewünschten Anpassungen an den Farben oder Checkout-Elementen deiner Checkout-Konfiguration vor.

4. Klicke auf Vorschau.

Checkout-Konfigurationen exportieren und importieren

Du kannst Checkout-Konfigurationen mithilfe von JSON-Dateien exportieren und importieren.

Eine Checkout-Konfiguration exportieren:

1. Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.

2. Klicke auf Branding-Editor.

3. Wähle im Branding-Editor die Checkout-Konfiguration aus, auf die Anpassungen angewendet wurden.

4. Klicke auf Weitere Aktionen > Konfiguration exportieren.

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

Eine Checkout-Konfiguration importieren:

1. Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.

2. Klicke auf Branding-Editor.

3. Wähle die Checkout-Konfiguration aus, auf die du das importierte Branding-Profil anwenden möchtest.

4. Klicke auf Weitere Aktionen > Konfiguration importieren.

5. Lade im Dialogfeld Checkout-Branding importieren deine Branding-JSON-Datei hoch:

   1. Klicke auf Datei hinzufügen.
   2. Wähle die entsprechende JSON-Datei von deinem Gerät aus.
   3. Klicke auf Importieren und fortfahren.

6. Überprüfe die vorgeladene Anpassungskonfiguration. Passe sie bei Bedarf an.

7. Klicke auf Speichern.

Deinen Checkout-Stil auf die Standardeinstellung zurücksetzen

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

Du kannst das Branding deiner gesamten Checkout-Konfiguration jederzeit auf die Shopify-Standardwerte zurücksetzen. Durch das Zurücksetzen der Checkout-Konfiguration werden alle Anpassungen auf allen Seiten des Branding-Editors gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Apps > Checkout Blocks.

2. Klicke auf Branding-Editor.

3. Wähle die Checkout-Konfiguration aus, die du zurücksetzen möchtest.

4. Klicke auf Auf Standard zurücksetzen.

5. Klicke im Dialogfeld Auf Standardstile zurücksetzen? auf Fortfahren.