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.
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 checkout, customer portal, and storefront before saving.
- Per-Section Overrides - Fine-tune individual sections (checkout, storefront, customer portal) without affecting the others.
- Programmatic Control - Override themes at checkout time via the API or Checkout SDK.
Getting Started
Navigate to Design in the main sidebar of 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.
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:
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 the following properties:| 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.- Light Mode
- Dark Mode
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.- Light Mode
- Dark Mode
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.- Light Mode
- Dark Mode
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.- Light Mode
- Dark Mode
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
- 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
| 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
- Subscription management
- Billing history
- Payment methods
- Wallet and credits
Related Resources
Checkout Features
Checkout features including currency, language, tax, discounts, and more.
Overlay Checkout SDK
Embed checkout as a modal overlay on your page.
Inline Checkout SDK
Embed checkout directly into your page layout.
Storefront
Set up and manage your branded storefront.
Customer Portal
Customer self-service portal for subscriptions and billing.
Multi-Brand Setup
Run multiple brands under one account with separate branding.