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

# 设计与主题定制

> 统一定制结账、在线店面和客户门户的外观与体验。选择预设主题，配置排版与配色，并应用各部分覆盖设置，所有操作均可实时预览。

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-overview.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=89f19bfb791cb903fccb3ea7127246ba" alt="设计设置页面，实时预览结帐、客户门户和店面" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="1920" data-path="images/design/general-overview.jpg" />
</Frame>

<Info>
  设计页面是统一管理所有面向客户的界面（结账、在线店面和客户门户）的中心枢纽。所做的更改会即时应用于三者，且在保存前即可实时预览。
</Info>

## 关键亮点

1. **统一设计中心** - 在同一页面配置结账、在线店面与客户门户的外观。
2. **预设主题** - 从精选主题开始，并在此基础上定制。
3. **亮/暗模式** - 为每种模式定义不同的配色方案。
4. **实时预览** - 保存前即可查看结账、客户门户与在线店面的实际效果。
5. **分区覆盖** - 精细调整各个区域（结账、在线店面、客户门户），互不影响。
6. **程序化控制** - 通过 API 或 Checkout SDK 在结账时覆盖主题。

## 快速入门

在你的商家仪表盘中，导航到 **设置 → 设计**。设计页面有四个标签页：

| 选项卡                 | 用途                  |
| ------------------- | ------------------- |
| **General**         | 商户名称、徽标、主题选择与全局高级设置 |
| **Checkout**        | 专门覆盖结账页面的主题设置       |
| **Storefront**      | 覆盖主题设置并配置在线店面布局     |
| **Customer Portal** | 覆盖客户门户的主题设置         |

## 常规设置

**General** 选项卡控制你的基础品牌识别与全局主题。

<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="高级设置的常规选项卡，包含排版、颜色和边框配置" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2672" data-path="images/design/general-advanced-settings.jpg" />
</Frame>

### 基础配置

| 设置       | 描述                  |
| -------- | ------------------- |
| **商户名称** | 显示在结账、在线店面与客户门户中的名称 |
| **商户徽标** | 在所有面向客户的页面上展示你的品牌徽标 |
| **主题**   | 选择一个预设主题作为起点        |

### 高级设置

展开 **高级设置** 以访问更细粒度的控件：

<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="展开的高级设置，显示明暗模式的完整颜色配置" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="4192" data-path="images/design/general-color-settings.jpg" />
</Frame>

#### 排版

| 设置       | 选项                                      | 描述             |
| -------- | --------------------------------------- | -------------- |
| **主字体**  | 任意 Google 字体                            | 用于标题和正文的主要字体   |
| **次字体**  | 任意 Google 字体                            | 用于标签与次要文本的强调字体 |
| **字体大小** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`     | 全局基准字体大小       |
| **字体粗细** | `normal`, `medium`, `bold`, `extraBold` | 默认字体粗细         |

#### 色彩配置

为 **亮模式** 和 **暗模式** 定义独立的配色方案。每种模式支持如下属性：

| 属性        | 描述           |
| --------- | ------------ |
| **主背景**   | 主背景颜色        |
| **次背景**   | 次级背景（选项卡、卡片） |
| **主文本**   | 主文本颜色        |
| **次文本**   | 呈现弱化效果的文本颜色  |
| **主按钮**   | 主按钮背景        |
| **主按钮文字** | 主按钮上的文字颜色    |
| **次按钮**   | 次按钮背景        |
| **次按钮文字** | 次按钮上的文字颜色    |
| **主边框**   | 主边框颜色        |
| **次边框**   | 强调边框颜色       |

#### 边框

| 设置     | 描述                                                        |
| ------ | --------------------------------------------------------- |
| **圆角** | 控制输入框、按钮、选项卡与卡片的圆润程度（例如：`0` 代表锐角，`8px` 代表圆角，`16px` 代表胶囊形） |

## 预设主题

Dodo Payments 提供了四款精选主题。在 General 选项卡的 **Theme** 下拉菜单中选择一项，即可瞬间在结账、在线店面和客户门户上应用统一的设计风格。

### Dodo Pulses

默认的 Dodo Payments 主题。青柠绿点缀营造出充满活力与清新感。清爽的无衬线排版加上宽松的留白。

<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 主题的浅色模式，显示结帐、客户门户和店面" 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 主题的深色模式，显示结帐、客户门户和店面" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Terminal

以开发者为导向的主题，采用等宽字体与皇家蓝点缀。锐角设计与技术美学非常适合开发工具和 API 优先的产品。

<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 主题的浅色模式，显示蓝色强调和等宽字体的结帐" 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 主题的深色模式，显示蓝色强调和等宽字体的结帐" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bumblebee

温暖的琥珀与金色点缀，搭配圆润且现代的样式。醒目且高对比度，适合希望营造高级感的面向消费者的产品。

<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 主题的浅色模式，显示琥珀色强调的结帐" 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 主题的深色模式，显示金色强调的结帐" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bubblegum

活泼的粉色与洋红点缀，搭配完全圆角。现代且亲和的外观，适合创意工具、设计类产品与生活方式品牌。

<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 主题的浅色模式，显示粉色强调的结帐、客户门户和店面" 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 主题的深色模式，显示粉色强调的结帐、客户门户和店面" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-dark.png" />
    </Frame>
  </Tab>
</Tabs>

<Tip>
  在选定预设主题后，还可以在高级设置中进一步定制具体属性。未指定的项目将回退为主题默认值。
</Tip>

## 分区覆盖

每个区域选项卡（Checkout、Storefront、Customer Portal）都包含 **Override Theme** 切换。当启用后，可独立定制该区域的外观，而不影响全局主题。

### 结账选项卡

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/checkout-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a17880492490e6abe2f6b8b9e9f4680e" alt="结帐选项卡，显示完整的结帐预览、产品详细信息和支付表单" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/checkout-tab.jpg" />
</Frame>

专为结账体验覆盖排版、配色与边框设置。实时预览包括：

* 商品信息与价格
* 极速支付选项（Apple Pay、Google Pay）
* 支付方式选择与银行卡表单
* 折扣码输入与价格明细

### 在线店面选项卡

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/storefront-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b45fc842eb771be573ae1a5744d82c5" alt="店面选项卡，显示商店 URL、品牌控制和店面预览" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/storefront-tab.jpg" />
</Frame>

配置面向在线店面的一些专属设置：

| 设置       | 描述                                               |
| -------- | ------------------------------------------------ |
| **店面网址** | 你的在线店面地址（例如：`store.dodopayments.com/your-store`） |
| **店面名称** | 切换并设置显示在店面上的名称                                   |
| **店面徽标** | 切换并上传店面页眉徽标                                      |
| **店面横幅** | 切换并上传横幅图像                                        |
| **商品描述** | 切换以在卡片上显示或隐藏商品描述                                 |
| **覆盖主题** | 启用后可仅为在线店面定制排版、配色与边框                             |

### 客户门户选项卡

<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="客户门户选项卡，显示订阅管理、账单历史和支付方式预览" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/customer-portal-tab.jpg" />
</Frame>

覆盖客户门户的主题，包含：

* 订阅管理
* 账单历史
* 支付方式
* 钱包与余额

## 相关资源

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