Die Design-Seite ist Ihre zentrale Anlaufstelle zur Markenbildung für alle kundenorientierten Oberflächen: Checkout, Storefront und Kundenportal. Änderungen wirken sich sofort auf alle drei aus und werden in Echtzeit angezeigt, bevor Sie sie speichern.
Wichtige Highlights
- Einheitliches Design-Hub – Konfigurieren Sie Checkout-, Storefront- und Kundenportalauftritt von einer einzigen Seite.
- Vordefinierte Themes – Beginnen Sie mit einem kuratierten Theme und passen Sie es anschließend an.
- Hell- & Dunkelmodus – Definieren Sie separate Farbpaletten für jeden Modus.
- Live-Vorschau – Sehen Sie, wie Ihre Änderungen auf Checkout, Kundenportal und Storefront aussehen, bevor Sie speichern.
- Abschnittsbezogene Overrides – Feinabstimmung einzelner Abschnitte (Checkout, Storefront, Kundenportal), ohne die anderen zu beeinflussen.
- Programmgesteuerte Steuerung – Überschreiben Sie Themes zur Checkout-Zeit über die API oder das Checkout-SDK.
Erste Schritte
Navigieren Sie im Hauptmenü Ihres Merchant-Dashboards zu Design. Die Design-Seite verfügt über vier Registerkarten:| Tab | Zweck |
|---|---|
| Allgemein | Firmenname, Logo, Theme-Auswahl und globale erweiterte Einstellungen |
| Checkout | Theme-Einstellungen speziell für die Checkout-Seite überschreiben |
| Storefront | Theme-Einstellungen überschreiben und Storefront-Layout konfigurieren |
| Kundenportal | Theme-Einstellungen für das Kundenportal überschreiben |
Allgemeine Einstellungen
Die Allgemein-Registerkarte steuert Ihre grundlegende Markenidentität und das globale Theme.
Grundkonfiguration
| Einstellung | Beschreibung |
|---|---|
| Geschäftsname | Der auf Checkout, Storefront und Kundenportal angezeigte Name |
| Geschäftslogo | Ihr Markenlogo, das auf allen kundenorientierten Seiten angezeigt wird |
| Theme | Wählen Sie ein vordefiniertes Theme als Ausgangspunkt |
Erweiterte Einstellungen
Erweitern Sie Erweiterte Einstellungen, um feingranulare Steuerungen zu öffnen:
Typografie
| Einstellung | Optionen | Beschreibung |
|---|---|---|
| Primäre Schriftart | Jede Google Font | Hauptschriftart für Überschriften und Fließtext |
| Sekundäre Schriftart | Jede Google Font | Akzentschriftart für Labels und Nebentext |
| Schriftgröße | xs, sm, md, lg, xl, 2xl | Globale Basis-Schriftgröße |
| Schriftstärke | normal, medium, bold, extraBold | Standard-Schriftstärke |
Farbkonfiguration
Definieren Sie separate Farbpaletten für Hellmodus und Dunkelmodus. Jeder Modus unterstützt folgende Eigenschaften:| Eigenschaft | Beschreibung |
|---|---|
| Hintergrund Primär | Haupt-Hintergrundfarbe |
| Hintergrund Sekundär | Sekundärer Hintergrund (Registerkarten, Karten) |
| Text Primär | Haupttextfarbe |
| Text Sekundär | Gedämpfte Textfarbe |
| Button Primär | Hintergrundfarbe primärer Buttons |
| Button Primär Text | Textfarbe auf primären Buttons |
| Button Sekundär | Hintergrundfarbe sekundärer Buttons |
| Button Sekundär Text | Textfarbe auf sekundären Buttons |
| Rahmen Primär | Haupt-Rahmenfarbe |
| Rahmen Sekundär | Akzent-Rahmenfarbe |
Rahmen
| Einstellung | Beschreibung |
|---|---|
| Rahmenradius | Steuert die Rundung von Eingabefeldern, Buttons, Registerkarten und Karten (z. B. 0 für scharfe Ecken, 8px für abgerundete, 16px für pillenförmige) |
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
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
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
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
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
- Produktinformationen und Preisgestaltung
- Express-Checkout-Optionen (Apple Pay, Google Pay)
- Auswahl der Zahlungsmethode und Kartendatenformular
- Eingabefeld für Rabattcode und Preisaufstellung
Storefront-Registerkarte
| Einstellung | Beschreibung |
|---|---|
| Store-URL | Ihre Storefront-Adresse (z. B. store.dodopayments.com/your-store) |
| Store-Name | Umschalten und Namen festlegen, der auf Ihrer Storefront angezeigt wird |
| Store-Logo | Umschalten und Logo für den Storefront-Kopfbereich hochladen |
| Store-Banner | Umschalten und Bannerbild hochladen |
| Produktbeschreibung | Umschalten, um Produktbeschreibungen auf Karten ein- oder auszublenden |
| Theme überschreiben | Aktivieren, um Typografie, Farben und Rahmen nur für die Storefront anzupassen |
Kundenportal-Registerkarte
- Abonnementverwaltung
- Abrechnungshistorie
- Zahlungsmethoden
- Wallet und Guthaben
Verwandte Ressourcen
Checkout Features
Checkout-Funktionen einschließlich Währung, Sprache, Steuern, Rabatten und mehr.
Overlay Checkout SDK
Betten Sie den Checkout als modale Overlay-Lösung auf Ihrer Seite ein.
Inline Checkout SDK
Betten Sie den Checkout direkt in Ihr Seitenlayout ein.
Storefront
Richten Sie Ihre gebrandete Storefront ein und verwalten Sie sie.
Customer Portal
Kunden-Self-Service-Portal für Abonnements und Abrechnung.
Multi-Brand Setup
Betreiben Sie mehrere Marken unter einem Konto mit separater Markenbildung.