Checkout-Seite gestalten

Der Seiten-Editor: Bereiche und Elemente, welche Bausteine es gibt, Formularfelder und Pflichtangaben, AGB- und Widerrufs-Einwilligungen, Feldlayout für B2B, die Preisanzeige mit Ersparnis, Einstellungen pro Bildschirmgröße und eigenes CSS.

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 → Zeile anklicken, oder aus der Liste der Checkout Flows über das Auge-Symbol.

Die Liste sagt seit September 2026 dazu, wo eine Seite verwendet wird — wie viele Checkout-Flows sie zeichnen, beim Überfahren mit welchen Namen — wie viele Blöcke sie trägt und wann sie zuletzt bearbeitet wurde. Eine Seite ohne eigenes Layout trägt den Vermerk Standardlayout: Sie verkauft trotzdem, mit dem eingebauten Checkout. Über das Zeilenmenü laufen Einstellungen, Duplizieren, Vorschau und Löschen; löschen geht nicht, solange ein Flow die Seite verwendet, und die Meldung nennt die Flows beim Namen.

Die Bereiche der Seite#

Die Seite hat vier Bereiche, in die du Elemente legst:

Die beiden Seitenleisten#

Links liegen zwei Reiter: Einfügen (durchsuchbar, nach CHECKOUT, FORM, ADVANCED und allgemeinen Blöcken gruppiert) und Ebenen (der Seitenbaum). Rechts erscheinen die Einstellungen des ausgewählten Elements — darüber ein Pfad wie Page › Main › CustomerInfo, über den du zum umschließenden Element springst, und eine Kopfzeile mit Symbol, Name und den Schaltflächen für Sichtbarkeit, Duplizieren und Löschen.

Elemente ziehst du aus dem Reiter Einfügen 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:

Inhaltselemente#

Navigationsmenü, Tabelle, Reiter, Preisrechner und Newsletter-Anmeldung gibt es nur auf Landingpages → Landingpages.

Video erst beim Klick laden#

Ein eingebettetes YouTube- oder Vimeo-Video lädt den Player des Anbieters mit der Seite, auch wenn niemand auf Play drückt. Das macht die Seite langsamer. Im Element Video gibt es dafür im Reiter Allgemein den Schalter Beim Klick laden (Voreinstellung: aus).

Ist er an, zeigt die Seite zunächst nur ein Vorschaubild mit einem Play-Button. Der Player wird erst geladen, wenn ein Besucher darauf klickt. Bei YouTube, Vimeo, Loom und Wistia startet das Video dann sofort.

• Vorschaubild: Ein eigenes Bild aus der Mediathek hat Vorrang. Ohne eigenes Bild nimmt Rabbit Checkout das Vorschaubild von YouTube oder Loom. Vimeo, Wistia und hochgeladene Videos haben kein Standard-Vorschaubild: Ohne eigenes Bild sehen Besucher dort den normalen Player, und der Editor weist dich darauf hin.
• Stil des Play-Buttons: Kreis (Voreinstellung, mittig) oder Pille, eine dunkle, halbtransparente Schaltfläche unten links mit Beschriftung. Die Beschriftung stellst du unter Beschriftung des Play-Buttons ein, vorbelegt ist „Video abspielen“.
• Laufzeit-Label: Die Länge des Videos, etwa 0:31. Du trägst sie selbst ein, sie wird nicht aus dem Video gelesen. Beim Kreis steht sie unten rechts im Bild, bei der Pille in Klammern hinter der Beschriftung.
• Farbe und Größe des Play-Buttons (Voreinstellung: weiß, 72 px).

Vertrauenssiegel unter dem Kaufen-Button#

Das Element Vertrauenssiegel setzt eine Reihe Siegel auf die Seite, meist direkt unter den Bezahlbereich. Du brauchst dafür keine Bilder: Die Siegel werden gezeichnet, bleiben auf jedem Bildschirm scharf und übernehmen die Farbe, die du einstellst. Auf schmalen Bildschirmen rutschen sie untereinander.

Neu eingefügt bringt das Element drei Siegel mit, die für jeden Shop stimmen: Sichere Zahlung, SSL-verschlüsselt und Sofortiger Zugang. Über + Siegel hinzufügen … kommen weitere Vorlagen dazu:

• Geld-zurück-Garantie
• Datenschutz nach DSGVO
• Persönlicher Support
• Zufriedenheitsgarantie
• Rechnung per E-Mail

In der rechten Seitenleiste stellst du ein:

Titel und Untertitel sind reiner Text. Schrift und Textfarbe stellst du wie bei jedem anderen Element unter Stil ein. Das Element gibt es auf Checkout-, Danke-, Upsell- und Landingpages, nicht in Kurslektionen.

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:

Vorbereitet sind AGB, Datenschutz, Widerrufsverzicht – Digitale Inhalte, Widerrufsverzicht – Dienstleistung, Unternehmerkauf und Newsletter → Widerruf und Rückerstattung.

Beispiel: AGB-Zustimmung einbauen

So sieht der häufigste Fall aus, Schritt für Schritt:

1. Im Editor das Element Customer Info anklicken.

2. Rechts unter Einwilligungen auf Einwilligung hinzufügen.

3. Bei Vorlage den Eintrag AGB wählen. Text, Modus und „Erforderlich“ sind damit schon gesetzt:

   Feld	Vorbelegung
   Text	„Ich akzeptiere die Allgemeinen Geschäftsbedingungen.“
   Modus	Explizit (Ankreuzfeld)
   Erforderlich	ja

4. Link-Text und Link-URL ergänzen, damit das Wort im Satz auf deine AGB zeigt — etwa AGB und https://deine-domain.de/agb. Ohne Link steht der Satz ohne Beleg da.

5. Speichern und im Testkauf prüfen, dass das Häkchen erscheint und der Kauf ohne es nicht durchgeht.

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:

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.

Lieferadresse für Produkte, die du verschickst#

Verkaufst du neben dem Digitalen auch etwas Physisches, etwa ein Buch, eine Box oder Arbeitsmaterial, findest du beim Kundendaten-Element den Bereich Adresse mit zwei Einstellungen:

Ist der Schalter an, sieht der Käufer unter der Adresse das Kästchen „Abweichende Lieferadresse". Erst wenn er es anhakt, erscheint ein zweites Adressformular:

• Vor- und Nachname (Empfänger), vorbelegt mit dem Namen des Käufers. Wer ein Geschenk verschickt, überschreibt ihn einfach.
• Straße und Hausnummer. Fehlt die Hausnummer, erscheint der Hinweis „Hausnummer vergessen?". Der Kauf wird dadurch nicht blockiert.
• Adresszusatz (optional), z. B. Firma, Etage oder „bei Müller"
• PLZ, Stadt und Land, vorbelegt mit dem Land der Rechnungsadresse

Ohne Häkchen bleibt das Formular so kurz wie bisher, und die Ware geht an die Rechnungsadresse.

Die Lieferadresse mit dem Namen des Empfängers steht danach an der Bestellung im Dashboard und im Webhook ORDER_CREATED. Die Rechnung geht weiterhin an die Rechnungsadresse.

Preisanzeige mit Ersparnis#

Beim Preis-Element wählst du unter Preisanzeige, wie ein eingelöster Gutschein dargestellt wird:

Beschriftung des Bestellbuttons#

Beim Element Payment Info wählst du unter Zahlungseinstellungen, was auf dem Knopf steht, der die Bestellung auslöst. Zur Auswahl stehen:

Freier Text ist nicht vorgesehen. § 312j BGB stellt Anforderungen an genau diesen Knopf, und ein Eingabefeld würde Formulierungen zulassen, die sie nicht erfüllen — deshalb eine feste Liste. Welche davon zu deinem Angebot passt, entscheidest du (oder deine Rechtsberatung); wir treffen die Auswahl nicht für dich.

Die Beschriftung gilt für alle Bezahlwege der Seite, auch für den PayPal-Knopf.

Handy, Tablet, Desktop#

Der Seiten-Editor ist für alle Seiten derselbe: Checkout-Seiten, Landingpages, Erfolgs- und Upsell-Seiten. Was hier steht, gilt überall.

Oben im Editor schaltest du zwischen drei Ansichten um: Desktopansicht, Telefonansicht und Tabletansicht. Sie entsprechen drei Bildschirmgrößen auf der fertigen Seite:

Der Editor öffnet in der Desktopansicht. Viele Einstellungen rechts, etwa Abstände, Breiten und Schriftgrößen, lassen sich pro Ansicht setzen:

• Solange ein Feld nur einen Wert hat, ändert eine Eingabe in der Desktopansicht ihn für alle drei Größen.
• Änderst du es in der Tablet- oder Telefonansicht, bekommt das Feld drei getrennte Werte. Die anderen beiden Größen behalten den bisherigen.
• Danach ändert jede Ansicht nur noch ihren eigenen Wert.

Ein Element nur auf bestimmten Geräten zeigen#

Jedes Element hat im Reiter Erweitert den Bereich Sichtbarkeit mit drei Schaltern: Auf Smartphone ausblenden, Auf Tablet ausblenden und Auf Desktop ausblenden. Sie gelten unabhängig davon, welche Ansicht du gerade offen hast. So zeigst du etwa eine kurze Überschrift auf dem Handy und eine lange auf dem Desktop.

Im selben Bereich steht Reihenfolge im Container (Smartphone, Tablet, Desktop): drei Zahlen, mit denen du die Elemente eines Containers pro Größe anders anordnest, etwa das Bild auf dem Handy unter den Text statt daneben. Screenreader lesen weiter in der ursprünglichen Reihenfolge.

Container: Spalten, Umbruch, Hintergrund#

Der Container hat im Reiter Allgemein unter Layout zwei Arten:

• Gestapelt (Voreinstellung): Die Elemente stehen unter- oder nebeneinander. Mit In die nächste Zeile umbrechen rutschen sie in eine neue Zeile, wenn der Platz nicht reicht.
• Raster: Die Elemente stehen in Spalten (1 bis 12), pro Ansicht einstellbar. Auf dem Handy ist es eine Spalte; was du für eine Größe nicht setzt, übernimmt sie von der nächstkleineren. Unter Spaltenbreiten machst du die Spalten ungleich breit, etwa 445fr 557fr. Leer lassen heißt: gleich breite Spalten.

Im Reiter Stil hat der Container außerdem:

• ein Hintergrundbild mit Größe (Ausfüllen, Einpassen, Auto), Position und einer Überlagerungsfarbe, damit Text darauf lesbar bleibt;
• Hintergrundunschärfe: verwischt, was hinter dem Container durchscrollt, etwa 14px. Sichtbar wird das nur mit einer halbtransparenten Hintergrundfarbe wie rgba(255,255,255,0.86), zum Beispiel für eine Kopfzeile, die über der Seite schwebt.

Eigenes CSS#

Reichen die Einstellungen nicht, schreibst du eigenes CSS, in beiden Tarifen. Wähl dazu die Seite selbst aus (im Pfad über den Einstellungen Page oder im Reiter Ebenen ganz oben) und öffne im Reiter Erweitert den Bereich Eigenes CSS. Das gibt es auf Checkout-Seiten, Landingpages, Upsell-Seiten, Erfolgsseiten und in Kurslektionen. Ein geteilter Block hat in seinem Editor einen eigenen Reiter CSS.

Das CSS gilt nur für diese Seite beziehungsweise diesen Block. Elemente sprichst du über ihre Klasse an, die immer rc- plus den Namen des Elements ist:

.rc-button { text-transform: uppercase; }
.rc-container .rc-text { line-height: 1.7; }
@media (max-width: 767px) { .rc-testimonial { padding: 12px; } }

Weitere Beispiele: .rc-image, .rc-video, .rc-accordion, .rc-customer-info, .rc-payment-info, .rc-total-price.

Was nicht geht, entfernt der Editor beim Tippen und sagt dir unter dem Feld, was er entfernt hat:

• @import und @font-face. Schriften kommen aus Marke & Design.
• !important und verschachtelte Regeln.
• url() mit einer fremden Adresse. Erlaubt sind Dateien aus deiner Mediathek.
• Selektoren, die aus der Seite hinausreichen würden. html, body und :root meinen die Seite selbst.

Erlaubt sind @media, @supports, @container, @layer und @keyframes. Das CSS darf höchstens 50 KB groß sein.

Ansicht prüfen#

Prüfe die Seite in allen drei Ansichten: 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.