Checkout-Seite gestalten
Der Seiten-Editor: Bereiche und Elemente, welche Bausteine es gibt, Formularfelder und Pflichtangaben, AGB- und Widerrufs-Einwilligungen, Feldlayout für B2B und die Preisanzeige mit Ersparnis.
Die Checkout-Seite ist das Design deiner Bezahlseite, unabhängig von Produkt und Preis. Dieselbe Seite kann für beliebig viele Angebote dienen.
Zum Editor kommst du über Design → Checkout-Seiten → Seite öffnen, oder aus der Liste der Checkout Flows über das Auge-Symbol.
Die Bereiche der Seite#
Die Seite hat vier Bereiche, in die du Elemente legst:
| Bereich | Typische Verwendung |
|---|---|
| Top (Oben) | Kopfzeile, Logo, Überschrift, Vertrauenszeile |
| Main | Kundendaten, Preisoptionen, Zahlung: die eigentliche Bestellstrecke |
| Side | Zusammenfassung, Argumente, Testimonials, Garantien |
| Bottom (Unten) | Fußzeile, rechtliche Hinweise |
Elemente ziehst du aus der Werkzeugleiste an die gewünschte Stelle. Auswählen, verschieben, löschen funktioniert wie in einem Baukasten; rechts findest du zum ausgewählten Element die Einstellungen (Abstände, Farben, Rahmen, Ausrichtung, Spaltenbreite).
Die Elemente#
Checkout-Elemente#
Diese Bausteine tragen die Funktion der Seite:
| Element | Wofür |
|---|---|
| Customer Info | Kundendaten und Rechnungsadresse. |
| Checkout Options | Die Auswahl zwischen mehreren Preisen, z. B. monatlich oder jährlich → Checkout-Optionen. |
| Payment Info | Zahlungsart und Bezahlfelder. |
| Total Price | Zusammenfassung mit Zwischensumme, Rabatt, Steuer, Gesamtbetrag. |
| Coupon | Das Gutscheinfeld („Hast du einen Gutscheincode?"). |
| Bump Offer | Das Ankreuzfeld für das Zusatzangebot. |
| Form | Formularfelder und Einwilligungen (siehe unten). |
Inhaltselemente#
| Element | Wofür |
|---|---|
| Text | Überschriften und Fließtext. |
| Markdown | Längere formatierte Texte. |
| Image | Bilder, Logo, Produktabbildung. |
| Video | Videoeinbettung. |
| Testimonial | Kundenstimme mit Name und Bild. |
| List | Aufzählungen („Was ist enthalten"). |
| Container | Gruppiert Elemente, für Spalten und Abstände. |
| Divider | Trennlinie. |
| File List | Liste von Dateien. |
| HTML | Eigener HTML-Block, wenn dir sonst etwas fehlt. |
Formularfelder und Einwilligungen#
Im Element Form legst du fest, was der Käufer außer den Standardangaben noch ausfüllt oder bestätigt.
Eigene Felder#
Über Feld hinzufügen kommen zusätzliche Felder dazu: Beschriftung, Hilfetext, Pflichtfeld, Spaltenbreite. Die Antworten stehen später im Bestelldetail und stehen auch Webhooks zur Verfügung.
Typische Fälle: Umsatzsteuer-relevante Zusatzangaben, „Wie hast du von uns erfahren?", ein Wunschtermin.
Einwilligungen#
Über Einwilligung hinzufügen nimmst du Zustimmungen in den Checkout auf, etwa AGB und Widerrufsverzicht. Pro Einwilligung wählst du:
| Einstellung | Bedeutung |
|---|---|
| Explizit (Ankreuzfeld) | Der Käufer muss aktiv ein Häkchen setzen. |
| Implizit (Hinweis ohne Ankreuzfeld) | Nur ein Hinweistext. |
Vorbereitet sind unter anderem Widerrufsverzicht – Digitale Inhalte und Widerrufsverzicht – Dienstleistung → Widerruf und Rückerstattung.
Was der Kunde bestätigt hat, wird mit Datum an der Bestellung gespeichert und lässt sich über den Platzhalter consentRecord in die Bestätigungsmail übernehmen → E-Mail-Vorlagen.
Firmenfelder für Geschäftskunden#
Beim Kundendaten-Element gibt es die Option Firmenfelder anzeigen (Firma + USt-IdNr.). Aktiviere sie, wenn du an Unternehmen verkaufst, nur dann kann ein Käufer seine Umsatzsteuer-Identifikationsnummer angeben, und nur dann kann Reverse Charge greifen → Mehrwertsteuer einstellen.
Wie diese Felder präsentiert werden, steuerst du über Feldlayout:
| Layout | Was der Käufer sieht |
|---|---|
| Klassisch (Voreinstellung) | Firma und USt-IdNr. stehen einfach über der Adresse, ohne Markierung. |
| Optionale Felder markieren | Pflichtfelder tragen ein *, optionale den Zusatz „(optional)". |
| Ankreuzfeld „Ich kaufe als Unternehmen" | Die Firmenfelder erscheinen erst nach dem Häkchen. Die Firma wird dann zur Pflicht, die USt-IdNr. bleibt optional. |
Das Ankreuzfeld steht unten im Rechnungsblock, es schiebt also nichts nach unten, was darüber liegt. Ob es von vornherein angehakt ist, stellst du separat ein.
Preisanzeige mit Ersparnis#
Beim Preis-Element wählst du unter Preisanzeige, wie ein eingelöster Gutschein dargestellt wird:
| Modus | Anzeige |
|---|---|
| Aufschlüsselung (Voreinstellung) | Wie bisher: Positionen, Rabatt, Steuer, Summe. |
| Durchgestrichen | Der ursprüngliche Preis steht durchgestrichen neben dem zu zahlenden. |
| Ersparnis | Zusätzlich ein Hinweis wie „Du sparst 59,50 € (34 %)". |
Ansicht prüfen#
Der Editor hat eine Umschaltung zwischen Desktop- und Mobilansicht. Prüfe beides: Der überwiegende Teil der Käufe passiert am Handy, und lange Seitenspalten sehen dort oft anders aus als gedacht.
Wie die Seite wirklich wirkt, mit echten Preisen, echter Zahlung und echter Bestätigungsmail, zeigt der Testkauf.
Erfolgsseiten#
Die Seite nach dem Kauf gestaltest du unter Design → Erfolgsseiten mit demselben Editor und denselben Inhaltselementen. Im Checkout-Flow wählst du unter Nach dem Kauf aus, ob eine Erfolgsseite gezeigt oder auf eine eigene Adresse weitergeleitet wird.
Fehlerseiten lassen sich nicht gestalten.
Häufige Fragen
Design → Checkout-Seiten → Seite öffnen. Alternativ in der Zeile eines Checkout-Flows über das Auge-Symbol, das ebenfalls in den Editor führt.
Im Editor das Element „Coupon“ aus der Werkzeugleiste in den gewünschten Bereich ziehen. Pro Checkout-Flow lässt sich die Eingabe zusätzlich abschalten.
Im Editor beim Kundendaten-Element die Option für Firmenfelder (Firma und USt-IdNr.) aktivieren. Damit greift bei bestätigter USt-IdNr. aus dem EU-Ausland auch das Reverse-Charge-Verfahren.
Ja. Im Formular-Element lassen sich zusätzliche Felder anlegen. Die Antworten stehen später bei der Bestellung.
Ja, wenn mehrere Checkout-Flows dieselbe Seite verwenden. Willst du nur ein Angebot ändern, kopiere die Seite zuerst und ordne die Kopie diesem Flow zu.
Frage nicht beantwortet? Schreib uns — deutscher Support, echte Menschen.