Design- & Themenanpassung

Design-Einstellungen Seite mit Live-Vorschau des Checkouts, des Kundenportals und des Storefronts

Die Design-Seite ist Ihre zentrale Anlaufstelle für das Branding aller kundenorientierten Oberflächen: Checkout, Storefront und Customer Portal. Änderungen werden sofort auf alle drei Oberflächen angewendet und in Echtzeit als Vorschau angezeigt, bevor Sie sie speichern. Testmodus und Live-Modus verfügen über separate Designs — siehe Design vom Testmodus in den Live-Modus kopieren.

Wichtige Highlights

Einheitliche Designzentrale — Konfiguriere das Erscheinungsbild von Checkout, Storefront und Customer Portal auf einer einzigen Seite
Vorgefertigte Themes — Starte mit einem kuratierten Theme und passe es anschließend an
Heller & dunkler Modus — Definiere separate Farbpaletten für jeden Modus
Live-Vorschau — Sieh dir vor dem Speichern an, wie deine Änderungen auf allen Oberflächen aussehen
Überschreibungen pro Abschnitt — Stimme einzelne Abschnitte ab, ohne die anderen zu beeinflussen
Programmatische Steuerung — Überschreibe Themes beim Checkout über die Checkout Sessions API (customization.theme_config). Der theme_config einer Session hat Vorrang vor dem Design im Dashboard. Die clientseitige themeConfig-Option des Checkout SDK ist veraltet
Testdesign in den Live-Modus kopieren — Übertrage ein im Testmodus perfektioniertes Design mit einem Schritt in den Live-Modus

Erste Schritte

Navigieren Sie zu Einstellungen → Design in Ihrem Händler-Dashboard. Die Design-Seite hat vier Registerkarten:

Tab	Zweck
General	Geschäftsname, Logo, Theme-Auswahl und globale erweiterte Einstellungen
Checkout	Theme-Einstellungen speziell für die Checkout-Seite überschreiben
Storefront	Theme-Einstellungen überschreiben und das Storefront-Layout konfigurieren
Customer Portal	Theme-Einstellungen für das Customer Portal überschreiben

Allgemeine Einstellungen

Die Allgemein-Registerkarte steuert Ihre grundlegende Markenidentität und das globale Theme.

Allgemeine Registerkarte, die erweiterte Einstellungen mit Typografie, Farben und Rahmenkonfiguration zeigt

Grundkonfiguration

Einstellung	Beschreibung
Geschäftsname	Der Name, der auf Checkout, Storefront und Customer Portal angezeigt wird
Geschäftslogo	Ihr Markenlogo, das auf allen kundenorientierten Seiten angezeigt wird
Theme	Wählen Sie ein vorgefertigtes Theme als Ausgangspunkt aus

Erweiterte Einstellungen

Erweitern Sie Erweiterte Einstellungen, um feingranulare Steuerungen zu öffnen:

Typografie

Einstellung	Optionen	Beschreibung
Primäre Schriftart	Any Google Font	Hauptschriftart für Überschriften und Fließtext
Sekundäre Schriftart	Any Google Font	Akzentschriftart für Beschriftungen und sekundären Text
Schriftgröße	`xs`, `sm`, `md`, `lg`, `xl`, `2xl`	Globale Basisschriftgröße
Schriftstärke	`normal`, `medium`, `bold`, `extraBold`	Standardschriftstärke

Farbkonfiguration

Definieren Sie separate Farbpaletten für den hellen Modus und den dunklen Modus. Jeder Modus unterstützt:

Eigenschaft	Beschreibung
Primärer Hintergrund	Hauptfarbe des Hintergrunds
Sekundärer Hintergrund	Sekundärer Hintergrund (Tabs, Karten)
Primärer Text	Hauptfarbe des Textes
Sekundärer Text	Gedämpfte Textfarbe
Primärer Button	Hintergrund des primären Buttons
Text des primären Buttons	Textfarbe auf primären Buttons
Sekundärer Button	Hintergrund des sekundären Buttons
Text des sekundären Buttons	Textfarbe auf sekundären Buttons
Primärer Rahmen	Hauptfarbe des Rahmens
Sekundärer Rahmen	Akzentfarbe des Rahmens

Rahmen

Einstellung	Beschreibung
Eckenradius	Steuert die Rundung von Eingabefeldern, Buttons, Tabs und Karten (z. B. `0` für scharfe Ecken, `8px` für abgerundete Ecken, `16px` für pillenförmige Ecken)

Vordefinierte Themes

Dodo Payments wird mit vier kuratierten Themes geliefert. Wählen Sie eines aus dem Theme-Dropdown auf der Allgemein-Registerkarte, um sofort ein stimmiges Design für Checkout, Storefront und Kundenportal anzuwenden.

Dodo Pulses

Das Standard-Theme von Dodo Payments. Limettengrüne Akzente verleihen ihm eine energetische, frische Ausstrahlung. Klare serifenlose Typografie mit großzügigem Abstand.

Light Mode
Dark Mode

Dodo Pulses-Thema im hellen Modus, das Checkout, Kundenportal und Storefront zeigt — Dodo Pulses in light mode

Terminal

Ein auf Entwickler ausgerichtetes Theme mit monospaced Typografie und königsblauen Akzenten. Scharfe Ecken und eine technische Ästhetik, die gut zu Entwickler-Tools und API-first-Produkten passt.

Light Mode
Dark Mode

Terminal-Thema im hellen Modus, das Checkout mit blauen Akzenten und monospaced Schrift zeigt — Terminal in light mode

Bumblebee

Warme Bernstein- und Goldakzente mit abgerundeten, modernen Stil. Kräftig und kontrastreich – ideal für verbraucherorientierte Produkte, die ein hochwertiges Gefühl vermitteln sollen.

Light Mode
Dark Mode

Bumblebee-Thema im hellen Modus, das Checkout mit bernsteinfarbenen Akzenten zeigt — Bumblebee in light mode

Bubblegum

Verspielte rosa und magenta Akzente mit vollständig abgerundeten Ecken. Ein moderner, zugänglicher Look, der sich hervorragend für kreative Tools, Design-Produkte und Lifestyle-Marken eignet.

Light Mode
Dark Mode

Bubblegum-Thema im hellen Modus, das Checkout, Kundenportal und Storefront mit rosa Akzenten zeigt — Bubblegum in light mode

Nach der Auswahl eines vorgefertigten Themes können Sie einzelne Eigenschaften in den erweiterten Einstellungen anpassen. Nicht angegebene Eigenschaften verwenden weiterhin die Standardwerte des Themes.

Abschnittsbezogene Overrides

Jede Abschnitts-Registerkarte (Checkout, Storefront, Kundenportal) verfügt über einen Theme überschreiben-Schalter. Sobald aktiviert, können Sie das Erscheinungsbild dieses Abschnitts unabhängig vom globalen Theme anpassen.

Checkout-Registerkarte

Überschreiben Sie Typografie-, Farb- und Rahmeneinstellungen speziell für das Checkout-Erlebnis. Die Live-Vorschau zeigt:

Produktinformationen und Preise
Express-Checkout-Optionen (Apple Pay, Google Pay)
Auswahl der Zahlungsmethode und Kartenformular
Eingabe des Rabattcodes und Preisaufschlüsselung

Tab „Storefront“

Storefront tab showing store URL, branding controls, and storefront preview

Konfigurieren Sie Storefront-spezifische Einstellungen:

Einstellung	Beschreibung
Store-URL	Ihre Storefront-Adresse (z. B. `store.dodopayments.com/your-store`)
Store-Name	Aktivieren oder deaktivieren Sie den Namen und legen Sie ihn fest, der auf Ihrer Storefront angezeigt wird
Store-Logo	Aktivieren oder deaktivieren Sie das Logo und laden Sie ein Logo für den Storefront-Header hoch
Store-Banner	Aktivieren oder deaktivieren Sie das Banner und laden Sie ein Bannerbild hoch
Produktbeschreibung	Aktivieren oder deaktivieren Sie die Anzeige von Produktbeschreibungen auf Karten
Theme überschreiben	Aktivieren Sie diese Option, um Typografie, Farben und Rahmen ausschließlich für die Storefront anzupassen

Tab „Customer Portal“

Customer portal tab showing subscription management, billing history, and payment methods preview

Überschreiben Sie das Theme für das Customer Portal, das Folgendes umfasst:

Abonnementverwaltung
Abrechnungshistorie
Zahlungsmethoden
Wallet und Guthaben

Design vom Testmodus in den Live-Modus kopieren

Testmodus und Live-Modus verfügen über separate Designkonfigurationen. Ein Theme, das Sie beim Testen erstellen, wird nicht automatisch echten Kunden angezeigt. Statt es manuell neu zu erstellen, können Sie Ihr Design in einem Schritt vom Testmodus in den Live-Modus kopieren.

Open Design in Test Mode

Wechsle in den Testmodus und gehe zu Einstellungen → Design. Speichere zuerst alle ausstehenden Änderungen: Es wird nur das gespeicherte Testdesign kopiert.

Start the Copy

Klicke auf In den Live-Modus kopieren. Die Schaltfläche wird angezeigt, sobald du ein gespeichertes Theme oder einen veröffentlichten Test-Storefront hast; außerdem muss der Live-Modus aktiviert sein.

Choose What to Copy

Wähle Theme & Anpassungen (das allgemeine Theme sowie Überschreibungen für Checkout, Storefront und Customer Portal) und Storefront-Details (Storefront-Name, Logo und Banner) aus. Die Storefront-Details sind nicht verfügbar, wenn im Testmodus kein Storefront veröffentlicht ist.

Confirm

Klicke im Dialog auf In den Live-Modus kopieren.

Beim Kopieren wird das vorhandene Design im Live-Modus überschrieben. Überprüfen Sie nach dem Kopieren Ihren Live-Checkout und Ihre Storefront, um sicherzustellen, dass alles wie erwartet aussieht.

Checkout Features

Checkout-Funktionen einschließlich Währung, Sprache, Steuern, Rabatten und mehr.

Overlay Checkout SDK

Binden Sie den Checkout als modales Overlay auf Ihrer Seite ein.

Inline Checkout SDK

Binden Sie den Checkout direkt in Ihr Seitenlayout ein.

Storefront

Richten Sie Ihre gebrandete Storefront ein und verwalten Sie sie.

Customer Portal

Self-Service-Portal für Kunden zur Verwaltung von Abonnements und Abrechnung.

Multi-Brand Setup

Führen Sie mehrere Marken unter einem Konto mit separatem Branding.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Wichtige Highlights

Erste Schritte