> ## 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 & Theme Customization

> Customize the look and feel of your checkout, storefront, and customer portal from one place. Choose pre-built themes, configure typography and colors, and apply per-section overrides, all with live preview.

<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 settings page with live preview of checkout, customer portal, and storefront" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="1920" data-path="images/design/general-overview.jpg" />
</Frame>

The Design page is your central hub for branding every customer-facing surface: checkout, storefront, and customer portal. Changes apply instantly across all three and are previewed in real time before you save. Test mode and live mode hold separate designs — see [Copy Design From Test to Live Mode](#copy-design-from-test-to-live-mode).

## Key Highlights

* **Unified Design Hub** — Configure checkout, storefront, and customer portal appearance from a single page
* **Pre-Built Themes** — Start with a curated theme and customize from there
* **Light & Dark Mode** — Define separate color palettes for each mode
* **Live Preview** — See how your changes look across all surfaces before saving
* **Per-Section Overrides** — Fine-tune individual sections without affecting the others
* **Programmatic Control** — Override themes at checkout time via the Checkout Sessions API (`customization.theme_config`). A session's `theme_config` takes precedence over the dashboard design. The Checkout SDK's client-side `themeConfig` option is deprecated
* **Copy Test Design to Live** — Move a design you perfected in test mode into live mode in one step

## Getting Started

Navigate to **Settings → Design** in your Merchant Dashboard. The Design page has four tabs:

| Tab | Purpose |
| :- | :- |
| **General** | Business name, logo, theme selection, and global advanced settings |
| **Checkout** | Override theme settings specifically for the checkout page |
| **Storefront** | Override theme settings and configure storefront layout |
| **Customer Portal** | Override theme settings for the customer portal |

## General Settings

The **General** tab controls your baseline brand identity and global 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="General tab showing advanced settings with typography, colors, and border configuration" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2672" data-path="images/design/general-advanced-settings.jpg" />
</Frame>

### Basic Configuration

| Setting | Description |
| :- | :- |
| **Business Name** | The name displayed on checkout, storefront, and customer portal |
| **Business Logo** | Your brand logo shown across all customer-facing pages |
| **Theme** | Select a pre-built theme as your starting point |

### Advanced Settings

Expand **Advanced Settings** to access granular controls:

<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="Advanced settings expanded showing full color configuration for light and dark modes" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="4192" data-path="images/design/general-color-settings.jpg" />
</Frame>

#### Typography

| Setting | Options | Description |
| :- | :- | :- |
| **Primary Font** | Any Google Font | Main font for headings and body text |
| **Secondary Font** | Any Google Font | Accent font for labels and secondary text |
| **Font Size** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl` | Global base font size |
| **Font Weight** | `normal`, `medium`, `bold`, `extraBold` | Default font weight |

#### Color Configuration

Define separate color palettes for **Light Mode** and **Dark Mode**. Each mode supports:

| Property | Description |
| :- | :- |
| **Background Primary** | Main background color |
| **Background Secondary** | Secondary background (tabs, cards) |
| **Text Primary** | Main text color |
| **Text Secondary** | Muted text color |
| **Button Primary** | Primary button background |
| **Button Primary Text** | Text color on primary buttons |
| **Button Secondary** | Secondary button background |
| **Button Secondary Text** | Text color on secondary buttons |
| **Border Primary** | Main border color |
| **Border Secondary** | Accent border color |

#### Border

| Setting | Description |
| :- | :- |
| **Border Radius** | Controls the roundness of inputs, buttons, tabs, and cards (e.g., `0` for sharp corners, `8px` for rounded, `16px` for pill-shaped) |

## Pre-Built Themes

Dodo Payments ships with four curated themes. Select one from the **Theme** dropdown on the General tab to instantly apply a cohesive design across checkout, storefront, and customer portal.

### Dodo Pulses

The default Dodo Payments theme. Lime green accents give it an energetic, fresh feel. Clean sans-serif typography with generous spacing.

<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 theme in light mode showing checkout, customer portal, and storefront" 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 theme in dark mode showing checkout, customer portal, and storefront" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Terminal

A developer-oriented theme with monospaced typography and royal blue accents. Sharp corners and a technical aesthetic that pairs well with dev-tool and API-first products.

<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 theme in light mode showing checkout with blue accents and monospaced font" 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 theme in dark mode showing checkout with blue accents and monospaced font" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bumblebee

Warm amber and gold accents with rounded, modern styling. Bold and high-contrast, well-suited for consumer-facing products that want to feel premium.

<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 theme in light mode showing checkout with amber accents" 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 theme in dark mode showing checkout with gold accents" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bubblegum

Playful pink and magenta accents with fully rounded corners. A modern, approachable look that works great for creative tools, design products, and lifestyle brands.

<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 theme in light mode showing checkout, customer portal, and storefront with pink accents" 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 theme in dark mode showing checkout, customer portal, and storefront with pink accents" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-dark.png" />
    </Frame>
  </Tab>
</Tabs>

<Tip>
  After selecting a pre-built theme, customize individual properties in Advanced Settings. Any unspecified properties fall back to the theme defaults.
</Tip>

## Per-Section Overrides

Each section tab (Checkout, Storefront, Customer Portal) includes an **Override Theme** toggle. When enabled, you can customize that section's appearance independently from the global theme.

### Checkout Tab

<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 tab showing full checkout preview with product details and payment form" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/checkout-tab.jpg" />
</Frame>

Override typography, colors, and border settings specifically for the checkout experience. The live preview shows:

* Product information and pricing
* Express checkout options (Apple Pay, Google Pay)
* Payment method selection and card form
* Discount code input and price breakdown

### Storefront Tab

<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 tab showing store URL, branding controls, and storefront preview" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/storefront-tab.jpg" />
</Frame>

Configure storefront-specific settings:

| Setting | Description |
| :- | :- |
| **Store URL** | Your storefront address (e.g., `store.dodopayments.com/your-store`) |
| **Store Name** | Toggle and set the name displayed on your storefront |
| **Store Logo** | Toggle and upload a logo for the storefront header |
| **Store Banner** | Toggle and upload a banner image |
| **Product Description** | Toggle to show or hide product descriptions on cards |
| **Override Theme** | Enable to customize typography, colors, and borders for the storefront only |

### Customer Portal Tab

<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="Customer portal tab showing subscription management, billing history, and payment methods preview" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/customer-portal-tab.jpg" />
</Frame>

Override the theme for the customer portal, which includes:

* Subscription management
* Billing history
* Payment methods
* Wallet and credits

## Copy Design From Test to Live Mode

Test mode and live mode keep separate design configurations. A theme you build while testing does not automatically appear to real customers. Instead of re-creating it by hand, copy your design from test mode to live mode in one step.

<Steps>
  <Step title="Open Design in Test Mode">
    Switch to test mode and go to **Settings → Design**. Save any pending changes first: only the saved test design is copied.
  </Step>

  <Step title="Start the Copy">
    Click **Copy to Live Mode**. The button appears once you have a saved theme or a published test storefront, and live mode must be activated.
  </Step>

  <Step title="Choose What to Copy">
    Select **Theme & customizations** (the general theme plus checkout, storefront, and Customer Portal overrides) and **Storefront details** (store name, logo, and banner). Storefront details is unavailable if no storefront is published in test mode.
  </Step>

  <Step title="Confirm">
    Click **Copy to Live Mode** in the dialog.
  </Step>
</Steps>

<Warning>
  Copying overwrites the existing live mode design. Review your live checkout and storefront after copying to confirm everything looks the way you expect.
</Warning>

## Related Pages

<CardGroup cols={2}>
  <Card title="Checkout Features" icon="cart-shopping" href="/features/checkout">
    Checkout features including currency, language, tax, discounts, and more.
  </Card>

  <Card title="Overlay Checkout SDK" icon="layer-group" href="/developer-resources/overlay-checkout">
    Embed checkout as a modal overlay on your page.
  </Card>

  <Card title="Inline Checkout SDK" icon="credit-card" href="/developer-resources/inline-checkout">
    Embed checkout directly into your page layout.
  </Card>

  <Card title="Storefront" icon="store" href="/features/storefront">
    Set up and manage your branded storefront.
  </Card>

  <Card title="Customer Portal" icon="user" href="/features/customer-portal">
    Customer self-service portal for subscriptions and billing.
  </Card>

  <Card title="Multi-Brand Setup" icon="building-columns" href="/features/multi-brands">
    Run multiple brands under one account with separate branding.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.