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.
Auf dieser Seite
- Überlegungen zur Anpassung des Checkout-Stils
- Ein Hintergrundbild für das Banner hochladen
- Ein Logo für die Checkout-Seite hinzufügen
- Ein Hintergrundbild oder eine Hintergrundfarbe zum Hauptinhaltsbereich hinzufügen
- Die Farbe der Formularfelder ändern
- Ein Hintergrundbild oder eine Hintergrundfarbe zur Bestellübersicht hinzufügen
- Ein Bild auf der Checkout-Seite ändern oder entfernen
- Die Schriftart auf der Checkout-Seite ändern
- Die Schaltflächen- und Akzentfarben auf der Checkout-Seite ändern
- Checkout-Layout ändern
- Das Rabattcodefeld standardmäßig auf Mobilgeräten anzeigen
- App-Blöcke zu deinen Checkout-Seiten hinzufügen
Ü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:
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:
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:
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.
Schritte:
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:
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:
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:
- Klicke für das Bild, zu dem du Alt-Text hinzufügen möchtest, auf Bearbeiten.
- Gib unter Alt-Text den Alt-Text für das Bild ein. Wähle einen kurzen, aussagekräftigen Titel für das Bild aus.
- 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:
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:
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:
Das Rabattcodefeld standardmäßig auf Mobilgeräten anzeigen
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:
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.