Anpassung des Stils für deinen Checkout

Wenn du deine Produkte in einem Onlineshop verkaufst, kannst du den Stil deiner Checkout-Seiten im Checkout- und Konto-Editor anpassen. Du kannst dein Unternehmenslogo hinzufügen, die Farben ändern oder eine neue Schriftart auswählen, damit der Checkout zu deinem Unternehmen passt.

Ein Teil des Brandings, das du für deine Checkout-Seiten auswählst, wird auch auf deine neuen Kundenkontoseiten angewendet.

Tipp

Wenn du den Shopify Plus-Plan verwendest, kannst du Checkout Blocks verwenden, um erweiterte Anpassungen des Checkout-Brandings vorzunehmen, ohne dass API-Aufrufe erforderlich sind.

Überlegungen zur Anpassung des Checkout-Stils

Bevor du den Stil deines Checkouts anpasst, solltest du die folgenden Überlegungen beachten:

• Der Bereich Konfigurationen im Abschnitt Checkout-Einstellungen im Adminbereich wird ausgeblendet, bis du einen Plan ausgewählt und dein erstes Produkt erstellt hast.
• Wenn du Shopify Plus nutzt, kannst du die Checkout Branding API für erweiterte Checkout-Branding-Anpassungen verwenden.

• Wenn du Hilfe bei der stilistischen Anpassung deines Warenkorbs und Checkouts benötigst, kannst du einen Shopify-Partner engagieren. Erhalte mehr Informationen über das Engagieren von Shopify-Partnern.

• Obwohl du vielleicht viele Farben hinzufügst und deine Checkout-Seiten hübsch gestalten möchtest, ist es am besten, das Design einfach zu halten. Kunden werden auf diesen Seiten die Versand- und Zahlungsinformationen für ihre Bestellungen eingeben und es ist nicht empfehlenswert, sie abzulenken oder Informationen schwer lesbar zu machen. Wähle Farben mit hohem Kontrast und Bilder, die nicht vom Text auf der Seite ablenken.

Ein Hintergrundbild für das Banner hochladen

Am oberen Rand jeder Checkout-Seite zeigt ein Banner den Namen deines Shops an. Du kannst das Hintergrundbild dieses Banners ändern. Wähle ein Bild, das zu deiner Marke passt. Wenn du zum Beispiel Schmuck verkaufst, wäre ein Bild mit farbenfrohen Perlen eine gute Wahl. Bannerbilder sehen mit einer Auflösung von 1000 x 400 Pixel am besten aus.

Schritte:

Desktop

1. Navigiere in deinem Shopify-Adminbereich zu Einstellungen> Checkout.

2. Klicke im Abschnitt Konfigurationen neben der Checkout-Konfiguration, die du anpassen möchtest, auf Anpassen.

3. Klicke im Checkout- und Konto-Editor auf das Zahnradsymbol, um auf die Seitenleiste Einstellungen zuzugreifen.

4. Klicke im Abschnitt Checkout-Header bei der Option Hintergrundbild auf Bild hinzufügen.

5. Klicke auf Bilder hinzufügen, um eine Bilddatei hochzuladen, oder wähle ein vorhandenes Bild aus deiner Bibliothek aus.

6. Klicke auf Speichern.

Ein Logo für die Checkout-Seite hinzufügen

Du kannst dein Shop-Logo zu den Checkout-Seiten hinzufügen. Wenn du ein Bannerbild verwendest, wird das Logo darüber angezeigt. Du kannst dein Logo auf den Checkout-Seiten links, rechts oder in der Mitte des Bannerbereichs positionieren.

Schritte:

Desktop

1. Navigiere in deinem Shopify-Adminbereich zu Einstellungen> Checkout.

2. Klicke im Abschnitt Konfigurationen neben der Checkout-Konfiguration, die du anpassen möchtest, auf Anpassen.

3. Klicke im Checkout- und Konto-Editor auf das Zahnradsymbol, um auf die Seitenleiste Einstellungen zuzugreifen.

4. Klicke im Abschnitt Logo auf Bild hinzufügen.

5. Klicke auf Bilder hinzufügen, um eine Bilddatei hochzuladen, oder wähle ein vorhandenes Bild aus deiner Bibliothek aus.

6. Optional: Passe im Abschnitt Checkout-Header dein Logo mithilfe der folgenden Einstellungen an:

   • Verwende Max. Logo-Breite, um eine Größe für das Logo in Pixeln auszuwählen.
   • Verwende Logo-Ausrichtung, um auszuwählen, ob dein Logo links, in der Mitte oder rechts im Banner angezeigt wird.
   • Verwende Logo-Position, um auszuwählen, an welcher Stelle im Checkout das Logo angezeigt wird.

7. Klicke auf Speichern.

Ein Hintergrundbild oder eine Hintergrundfarbe zum Hauptinhaltsbereich hinzufügen

Du kannst ein Hintergrundbild oder eine Hintergrundfarbe zum Hauptinhaltsbereich der Checkout-Seiten hinzufügen. Das ist der Bereich, in dem Kunden ihre Versand- und Zahlungsinformationen eingeben. Stelle daher sicher, dass die Felder auf dem Hintergrund gut lesbar sind.

Kleinere Bilder werden ähnlich wie bei Kacheln wiederholt vertikal bzw. horizontal auf dem Hintergrund angezeigt. Du kannst entweder ein Hintergrundbild oder eine Hintergrundfarbe hinzufügen, nicht beides.

Schritte:

Desktop

1. Navigiere in deinem Shopify-Adminbereich zu Einstellungen> Checkout.

2. Klicke im Abschnitt Konfigurationen neben der Checkout-Konfiguration, die du anpassen möchtest, auf Anpassen.

3. Klicke im Checkout- und Konto-Editor auf das Zahnradsymbol, um auf die Seitenleiste Einstellungen zuzugreifen.

4. Füge im Abschnitt Hintergrund 1 eine Hintergrundfarbe oder ein Hintergrundbild hinzu:

   • Um eine Farbe hinzuzufügen, klicke auf Hintergrundfarbe. Eine Farbauswahl wird geöffnet. Wähle eine Farbe aus oder gib einen Hexadezimalcode ein.
   • Um ein Bild hinzuzufügen, klicke im Abschnitt Hintergrundbild auf Bild hinzufügen. Klicke auf Bilder hinzufügen, um eine Bilddatei hochzuladen, oder wähle ein vorhandenes Bild aus deiner Bibliothek aus.

5. Klicke auf Speichern.

Die Farbe der Formularfelder ändern

Du kannst die Farbe der Felder ändern, um sie weiß oder transparent zu machen. Möglicherweise möchtest du die Felder transparent machen, damit ein Hintergrundbild sichtbar ist. Stelle sicher, dass der Text in den Feldern deutlich lesbar ist.

Plananforderung

Wenn du mithilfe der Checkout Branding API einen benutzerdefinierten Wert für Formularfelder festlegst, wird zusätzlich die Option Benutzerdefiniert (festgelegt via API) angezeigt. Diese Option ist nur für Shops mit dem Shopify Plus-Plan verfügbar.

Schritte:

Desktop

1. Navigiere in deinem Shopify-Adminbereich zu Einstellungen> Checkout.

2. Klicke im Abschnitt Konfigurationen neben der Checkout-Konfiguration, die du anpassen möchtest, auf Anpassen.

3. Klicke im Checkout- und Konto-Editor auf das Zahnradsymbol, um auf die Seitenleiste Einstellungen zuzugreifen.

4. Gehe im Abschnitt Farbe zu Formularfeld- und Kartenhintergrund und klicke anschließend auf Transparent oder Weiß.

5. Klicke auf Speichern.

Ein Hintergrundbild oder eine Hintergrundfarbe zur Bestellübersicht hinzufügen

Wenn ein Kunde auf einer Checkout-Seite auf Bestellübersicht anzeigen klickt, wird eine Liste der Produkte, die er kauft, angezeigt. Du kannst der Bestellübersicht ein Hintergrundbild oder eine Hintergrundfarbe hinzufügen. Du kannst in der Vorschau im Theme-Editor auf Bestellübersicht anzeigen klicken, um sicherzustellen, dass du mit der Art und Weise, wie die Bestellübersicht angezeigt wird, zufrieden bist.

Kleinere Bilder werden ähnlich wie bei Kacheln wiederholt vertikal bzw. horizontal auf dem Hintergrund angezeigt.

Schritte:

Desktop

1. Navigiere in deinem Shopify-Adminbereich zu Einstellungen> Checkout.

2. Klicke im Abschnitt Konfigurationen neben der Checkout-Konfiguration, die du anpassen möchtest, auf Anpassen.

3. Klicke im Checkout- und Konto-Editor auf das Zahnradsymbol, um auf die Seitenleiste Einstellungen zuzugreifen.

4. Füge im Abschnitt Hintergrund 2 ein Hintergrundbild oder eine Hintergrundfarbe hinzu:

   • Um eine Farbe hinzuzufügen, klicke auf Hintergrundfarbe. Eine Farbauswahl wird geöffnet. Wähle eine Farbe aus oder gib einen Hexadezimalcode ein.
   • Um ein Bild hinzuzufügen, klicke auf Hintergrundbild > Bild hinzufügen. Klicke auf Bilder hinzufügen, um eine Bilddatei hochzuladen, oder wähle ein vorhandenes Bild aus deiner Bibliothek aus.

5. Klicke auf Speichern.

Ein Bild auf der Checkout-Seite ändern oder entfernen

Du kannst alle Bilder ändern oder entfernen, die du zu den Checkout-Seiten hinzufügst.

Schritte:

Desktop

1. Navigiere in deinem Shopify-Adminbereich zu Einstellungen> Checkout.

2. Klicke im Abschnitt Konfigurationen neben der Checkout-Konfiguration, die du anpassen möchtest, auf Anpassen.

3. Klicke im Checkout- und Konto-Editor auf das Zahnradsymbol, um auf die Seitenleiste Einstellungen zuzugreifen.

4. Klicke unter dem Bild, das du ersetzen möchtest, auf Ändern, um ein Bild aus deiner Bibliothek auszuwählen, oder durchsuche kostenlose Bilder.

5. Klicke auf Speichern.

Klicke auf Ändern > Bild entfernen, um ein Bild zu entfernen. Dadurch wird das Bild nicht aus Shopify gelöscht.

Alt-Text für ein Bild hinzufügen

Nachdem du Bilder zu deinen Checkout-Seiten hinzugefügt hast, kannst du Bild-Alt-Text hinzufügen. Dieser Text kann die Zugänglichkeit und SEO verbessern. Erfahre mehr über die Suchmaschinenoptimierung.

Schritte:

1. Klicke für das Bild, zu dem du Alt-Text hinzufügen möchtest, auf Bearbeiten.
2. Gib unter Alt-Text den Alt-Text für das Bild ein. Wähle einen kurzen, aussagekräftigen Titel für das Bild aus.
3. Klicke auf Speichern.

Die Schriftart auf der Checkout-Seite ändern

Du kannst aus einer Liste von Schriftarten auswählen, um deine Checkout-Seiten anzupassen. Allerdings kannst du die Farbe des Textes auf der Checkout-Seite nicht ändern.

Schritte:

Desktop

1. Navigiere in deinem Shopify-Adminbereich zu Einstellungen> Checkout.

2. Klicke im Abschnitt Konfigurationen neben der Checkout-Konfiguration, die du anpassen möchtest, auf Anpassen.

3. Klicke im Checkout- und Konto-Editor auf das Zahnradsymbol, um auf die Seitenleiste Einstellungen zuzugreifen.

4. Klicke im Abschnitt Typographie auf das Dropdown-Menü Überschriften oder das Dropdown-Menü Textkörper und wähle eine Schriftart aus.

5. Klicke auf Speichern.

Die Schaltflächen- und Akzentfarben auf der Checkout-Seite ändern

Du kannst die Farben der Schaltflächen, Fehlermeldungen und Akzente wie z. B. für Links auf den Checkout-Seiten ändern. Wenn du die Farben änderst, stelle sicher, dass der Text auf dem Hintergrund des Haupttextbereichs und der Bestellübersicht gut und deutlich lesbar ist.

Schritte:

Desktop

1. Navigiere in deinem Shopify-Adminbereich zu Einstellungen> Checkout.

2. Klicke im Abschnitt Konfigurationen neben der Checkout-Konfiguration, die du anpassen möchtest, auf Anpassen.

3. Klicke im Checkout- und Konto-Editor auf das Zahnradsymbol, um auf die Seitenleiste Einstellungen zuzugreifen.

4. Klicke im Abschnitt Farben auf das Farbfeld neben Akzente, Schaltflächen oder Fehler, um die Farbauswahl zu öffnen, und wähle anschließend deine gewünschte Farbe aus oder gib einen Hexadezimalcode ein.

5. Klicke auf Speichern.

Checkout-Layout ändern

Standardmäßig verwendet das Checkout-Layout in deinem Shop den einseitigen Checkout. Du kannst im Shopify-Adminbereich zwischen dem einseitigen und dem dreiseitigen Checkout wechseln. Überprüfe die Unterschiede zwischen dem einseitigen und dem dreiseitigen Checkout, bevor du dein Checkout-Layout änderst.

Wenn du dein Checkout-Layout wechselst, wird die Vorschau in deinem Checkout- und Konto-Editor nicht in Echtzeit angezeigt. Nachdem du deine Änderungen gespeichert hast, navigiere zu deinem Storefront-Checkout, um dein neues Checkout-Layout anzuzeigen.

Schritte:

Desktop

1. Navigiere in deinem Shopify-Adminbereich zu Einstellungen> Checkout.

2. Klicke im Abschnitt Konfigurationen neben der Checkout-Konfiguration, die du anpassen möchtest, auf Anpassen.

3. Klicke im Checkout- und Konto-Editor auf das Zahnradsymbol, um auf die Seitenleiste Einstellungen zuzugreifen.

4. Klicke im Abschnitt Checkout-Layout auf das aktuelle Layout, um die Optionen für das Checkout-Layout zu öffnen.

5. Klicke auf Einseitiger Checkout oder Dreiseitiger Checkout, um das Checkout-Layout festzulegen.

6. Klicke auf Speichern.

Das Rabattcodefeld standardmäßig auf Mobilgeräten anzeigen

Hinweis

Diese Funktion ist nur für bestimmte Shops mit Shopify Plus-Plan verfügbar.

Wenn ein Kunde auf einem mobilen Gerät auscheckt, sind die Bestellübersicht und das Rabattcodefeld standardmäßig ausgeblendet. Der Kunde kann auf Bestellübersicht anzeigen tippen, um seine vollständige Details zur Bestellübersicht zu erweitern und das Rabattcodefeld anzuzeigen, damit er seiner Bestellung einen Rabattcode oder einen Geschenkgutscheincode hinzufügen kann.

Du kannst das Standardverhalten ändern, um beim Auschecken auf einem Mobilgerät immer die Bestellübersicht und das Rabattcodefeld anzuzeigen. Der Kunde kann auf Bestellübersicht ausblenden tippen, um das Rabattcodefeld auszublenden.

Dein Checkout muss das dreiseitige Checkout-Layout verwenden, um auf diese Einstellung zuzugreifen.

Schritte:

Desktop

1. Navigiere in deinem Shopify-Adminbereich zu Einstellungen> Checkout.

2. Klicke im Abschnitt Konfigurationen neben der Checkout-Konfiguration, die du anpassen möchtest, auf Anpassen.

3. Klicke im Checkout- und Konto-Editor auf das Abschnittssymbol, um auf die Seitenleiste Abschnitte zuzugreifen.

4. Klicke auf der Seite Informationen, Versand oder Zahlungen auf Bestellübersicht.

5. Aktiviere die Einstellung Rabattcode-Feld immer anzeigen.

6. Klicke auf Speichern.

App-Blöcke zu deinen Checkout-Seiten hinzufügen

Mit App-Blöcken kannst du deiner Kunden-Checkout-Erfahrung Funktionen wie benutzerdefinierte Banner oder Treuebelohnungen hinzufügen. Einige Checkout-Apps, einschließlich Apps zur Anpassung der Informations-, Versand- und Zahlungsseiten im Checkout, sind nur für Shops mit dem Shopify Plus-Plan verfügbar. Siehe Verfügbarkeit von Checkout-Apps, wenn du eine App auswählst, die du deinem Checkout hinzufügen möchtest.

Erfahre mehr darüber, wie du Checkout-Konfigurationen mithilfe von Apps anpasst.

Schritte:

Desktop

1. Navigiere in deinem Shopify-Adminbereich zu Einstellungen> Checkout.

2. Klicke im Abschnitt Konfigurationen neben der Checkout-Konfiguration, die du anpassen möchtest, auf Anpassen.

3. Wähle im Checkout- und Konto-Editor die Seite aus, zu der du eine App hinzufügen möchtest, und klicke dann auf das Abschnittssymbol, um auf die Seitenleiste Abschnitte zuzugreifen.

4. Klicke auf ⊕ App-Block hinzufügen.

5. Klicke im Abschnitt Verfügbare Apps für diese Seite auf die App, die du zum Checkout hinzufügen möchtest. Die App wird automatisch im empfohlenen Bereich deiner Seite platziert.

6. Klicke auf Speichern.