> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design- & Themenanpassung

> Passen Sie das Erscheinungsbild Ihres Checkouts, Storefronts und Kundenportals an einem Ort an. Wählen Sie vordefinierte Themes, konfigurieren Sie Typografie und Farben und wenden Sie pro Abschnitt überschreibende Einstellungen an – alles mit Live-Vorschau.

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-overview.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=89f19bfb791cb903fccb3ea7127246ba" alt="Design-Einstellungen Seite mit Live-Vorschau des Checkouts, des Kundenportals und des Storefronts" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="1920" data-path="images/design/general-overview.jpg" />
</Frame>

<Info>
  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.
</Info>

## Wichtige Highlights

1. **Einheitliches Design-Hub** – Konfigurieren Sie Checkout-, Storefront- und Kundenportalauftritt von einer einzigen Seite.
2. **Vordefinierte Themes** – Beginnen Sie mit einem kuratierten Theme und passen Sie es anschließend an.
3. **Hell- & Dunkelmodus** – Definieren Sie separate Farbpaletten für jeden Modus.
4. **Live-Vorschau** – Sehen Sie, wie Ihre Änderungen auf Checkout, Kundenportal und Storefront aussehen, bevor Sie speichern.
5. **Abschnittsbezogene Overrides** – Feinabstimmung einzelner Abschnitte (Checkout, Storefront, Kundenportal), ohne die anderen zu beeinflussen.
6. **Programmgesteuerte Steuerung** – Überschreiben Sie Themes zur Checkout-Zeit über die API oder das Checkout-SDK.

## Erste Schritte

Navigieren Sie zu **Einstellungen → Design** in Ihrem Händler-Dashboard. Die Design-Seite hat 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.

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-advanced-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=00131c2a9d74d4c120bf85f588e358d8" alt="Allgemeine Registerkarte, die erweiterte Einstellungen mit Typografie, Farben und Rahmenkonfiguration zeigt" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2672" data-path="images/design/general-advanced-settings.jpg" />
</Frame>

### 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:

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-color-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=c09ecc738beb79cff0d130f46bb72b0a" alt="Erweiterte Einstellungen erweitert, zeigt vollständige Farbkonfiguration für helle und dunkle Modi" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="4192" data-path="images/design/general-color-settings.jpg" />
</Frame>

#### 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.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Dodo Pulses in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=f081086300770146c0df373b6304ea12" alt="Dodo Pulses-Thema im hellen Modus, das Checkout, Kundenportal und Storefront zeigt" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Dodo Pulses in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=d2fe47c69734ccb419471609095627fe" alt="Dodo Pulses-Thema im dunklen Modus, das Checkout, Kundenportal und Storefront zeigt" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### 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.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Terminal in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=3e3320fc9c073ed9bf3ebe7b03bf7a3f" alt="Terminal-Thema im hellen Modus, das Checkout mit blauen Akzenten und monospaced Schrift zeigt" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Terminal in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=dea087e1c0fad9cf7a66fc37cfbda8ac" alt="Terminal-Thema im dunklen Modus, das Checkout mit blauen Akzenten und monospaced Schrift zeigt" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### 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.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bumblebee in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-bumblebee-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=e276288fe683a831d10add3f8af4eae0" alt="Bumblebee-Thema im hellen Modus, das Checkout mit bernsteinfarbenen Akzenten zeigt" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bumblebee in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bumblebee-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a35df24ccd45a9acb717652ce5b5fd19" alt="Bumblebee-Thema im dunklen Modus, das Checkout mit goldenen Akzenten zeigt" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### 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.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bubblegum in light mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-light.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b53c9d3c6d07ef0ff44d4c613520789" alt="Bubblegum-Thema im hellen Modus, das Checkout, Kundenportal und Storefront mit rosa Akzenten zeigt" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bubblegum in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=ef4a70ff8f289715628377b0631adf25" alt="Bubblegum-Thema im dunklen Modus, das Checkout, Kundenportal und Storefront mit rosa Akzenten zeigt" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-dark.png" />
    </Frame>
  </Tab>
</Tabs>

<Tip>
  Nach Auswahl eines vordefinierten Themes können Sie einzelne Eigenschaften weiter in den erweiterten Einstellungen anpassen. Nicht spezifizierte Eigenschaften fallen auf die Theme-Standardeinstellungen zurück.
</Tip>

## 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

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/checkout-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a17880492490e6abe2f6b8b9e9f4680e" alt="Checkout-Registerkarte, die vollständige Checkout-Vorschau mit Produktdetails und Zahlungsformular zeigt" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/checkout-tab.jpg" />
</Frame>

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

* Produktinformationen und Preisgestaltung
* Express-Checkout-Optionen (Apple Pay, Google Pay)
* Auswahl der Zahlungsmethode und Kartendatenformular
* Eingabefeld für Rabattcode und Preisaufstellung

### Storefront-Registerkarte

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/storefront-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b45fc842eb771be573ae1a5744d82c5" alt="Storefront-Registerkarte zeigt die Laden-URL, Branding-Steuerungen und Storefront-Vorschau" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/storefront-tab.jpg" />
</Frame>

Konfigurieren Sie Storefront-spezifische Einstellungen:

| 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

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/customer-portal-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=38c16ef9ed1648f0f5d3851d7c91f17c" alt="Kundenportal Registerkarte, die Abonnementverwaltung, Abrechnungshistorie und Vorschau der Zahlungsmethoden zeigt" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/customer-portal-tab.jpg" />
</Frame>

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

* Abonnementverwaltung
* Abrechnungshistorie
* Zahlungsmethoden
* Wallet und Guthaben

## Verwandte Ressourcen

<CardGroup cols={2}>
  <Card title="Checkout Features" icon="cart-shopping" href="/features/checkout">
    Checkout-Funktionen einschließlich Währung, Sprache, Steuern, Rabatten und mehr.
  </Card>

  <Card title="Overlay Checkout SDK" icon="layer-group" href="/developer-resources/overlay-checkout">
    Betten Sie den Checkout als modale Overlay-Lösung auf Ihrer Seite ein.
  </Card>

  <Card title="Inline Checkout SDK" icon="credit-card" href="/developer-resources/inline-checkout">
    Betten Sie den Checkout direkt in Ihr Seitenlayout ein.
  </Card>

  <Card title="Storefront" icon="store" href="/features/storefront">
    Richten Sie Ihre gebrandete Storefront ein und verwalten Sie sie.
  </Card>

  <Card title="Customer Portal" icon="user" href="/features/customer-portal">
    Kunden-Self-Service-Portal für Abonnements und Abrechnung.
  </Card>

  <Card title="Multi-Brand Setup" icon="building-columns" href="/features/multi-brands">
    Betreiben Sie mehrere Marken unter einem Konto mit separater Markenbildung.
  </Card>
</CardGroup>