> ## 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. Design settings page with live preview of checkout, customer portal, and storefront 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 1. **Unified Design Hub** - Configure checkout, storefront, and customer portal appearance from a single page. 2. **Pre-Built Themes** - Start with a curated theme and customize from there. 3. **Light & Dark Mode** - Define separate color palettes for each mode. 4. **Live Preview** - See how your changes look across checkout, customer portal, and storefront before saving. 5. **Per-Section Overrides** - Fine-tune individual sections (checkout, storefront, customer portal) without affecting the others. 6. **Programmatic Control** - Override themes at checkout time via the API or Checkout SDK. ## 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. General tab showing advanced settings with typography, colors, and border configuration ### 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: Advanced settings expanded showing full color configuration for light and dark modes #### 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. Dodo Pulses theme in light mode showing checkout, customer portal, and storefront Dodo Pulses theme in dark mode showing checkout, customer portal, and storefront ### 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. Terminal theme in light mode showing checkout with blue accents and monospaced font Terminal theme in dark mode showing checkout with blue accents and monospaced font ### 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. Bumblebee theme in light mode showing checkout with amber accents Bumblebee theme in dark mode showing checkout with gold accents ### 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. Bubblegum theme in light mode showing checkout, customer portal, and storefront with pink accents Bubblegum theme in dark mode showing checkout, customer portal, and storefront with pink accents After selecting a pre-built theme, you can further customize individual properties in the Advanced Settings. Any unspecified properties fall back to the theme defaults. ## 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 Checkout tab showing full checkout preview with product details and payment form 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 Storefront tab showing store URL, branding controls, and storefront preview 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 Customer portal tab showing subscription management, billing history, and payment methods preview Override the theme for the customer portal, which includes: * Subscription management * Billing history * Payment methods * Wallet and credits ## Related Resources Checkout features including currency, language, tax, discounts, and more. Embed checkout as a modal overlay on your page. Embed checkout directly into your page layout. Set up and manage your branded storefront. Customer self-service portal for subscriptions and billing. Run multiple brands under one account with separate branding.