设计页面是统一管理所有面向客户的界面（结账、在线店面和客户门户）的中心枢纽。所做的更改会即时应用于三者，且在保存前即可实时预览。
关键亮点
- 统一设计中心 - 在同一页面配置结账、在线店面与客户门户的外观。
- 预设主题 - 从精选主题开始，并在此基础上定制。
- 亮/暗模式 - 为每种模式定义不同的配色方案。
- 实时预览 - 保存前即可查看结账、客户门户与在线店面的实际效果。
- 分区覆盖 - 精细调整各个区域（结账、在线店面、客户门户），互不影响。
- 程序化控制 - 通过 API 或 Checkout SDK 在结账时覆盖主题。
快速入门
在商户控制面板主侧边栏中前往 Design。设计页面包含四个选项卡：| 选项卡 | 用途 |
|---|---|
| General | 商户名称、徽标、主题选择与全局高级设置 |
| Checkout | 专门覆盖结账页面的主题设置 |
| Storefront | 覆盖主题设置并配置在线店面布局 |
| Customer Portal | 覆盖客户门户的主题设置 |
常规设置
General 选项卡控制你的基础品牌识别与全局主题。
基础配置
| 设置 | 描述 |
|---|---|
| 商户名称 | 显示在结账、在线店面与客户门户中的名称 |
| 商户徽标 | 在所有面向客户的页面上展示你的品牌徽标 |
| 主题 | 选择一个预设主题作为起点 |
高级设置
展开 高级设置 以访问更细粒度的控件：
排版
| 设置 | 选项 | 描述 |
|---|---|---|
| 主字体 | 任意 Google 字体 | 用于标题和正文的主要字体 |
| 次字体 | 任意 Google 字体 | 用于标签与次要文本的强调字体 |
| 字体大小 | xs, sm, md, lg, xl, 2xl | 全局基准字体大小 |
| 字体粗细 | normal, medium, bold, extraBold | 默认字体粗细 |
色彩配置
为 亮模式 和 暗模式 定义独立的配色方案。每种模式支持如下属性：| 属性 | 描述 |
|---|---|
| 主背景 | 主背景颜色 |
| 次背景 | 次级背景（选项卡、卡片） |
| 主文本 | 主文本颜色 |
| 次文本 | 呈现弱化效果的文本颜色 |
| 主按钮 | 主按钮背景 |
| 主按钮文字 | 主按钮上的文字颜色 |
| 次按钮 | 次按钮背景 |
| 次按钮文字 | 次按钮上的文字颜色 |
| 主边框 | 主边框颜色 |
| 次边框 | 强调边框颜色 |
边框
| 设置 | 描述 |
|---|---|
| 圆角 | 控制输入框、按钮、选项卡与卡片的圆润程度（例如：0 代表锐角，8px 代表圆角，16px 代表胶囊形） |
预设主题
Dodo Payments 提供了四款精选主题。在 General 选项卡的 Theme 下拉菜单中选择一项，即可瞬间在结账、在线店面和客户门户上应用统一的设计风格。Dodo Pulses
默认的 Dodo Payments 主题。青柠绿点缀营造出充满活力与清新感。清爽的无衬线排版加上宽松的留白。- Light Mode
- Dark Mode
Terminal
以开发者为导向的主题，采用等宽字体与皇家蓝点缀。锐角设计与技术美学非常适合开发工具和 API 优先的产品。- Light Mode
- Dark Mode
Bumblebee
温暖的琥珀与金色点缀，搭配圆润且现代的样式。醒目且高对比度，适合希望营造高级感的面向消费者的产品。- Light Mode
- Dark Mode
Bubblegum
活泼的粉色与洋红点缀，搭配完全圆角。现代且亲和的外观，适合创意工具、设计类产品与生活方式品牌。- Light Mode
- Dark Mode
分区覆盖
每个区域选项卡（Checkout、Storefront、Customer Portal）都包含 Override Theme 切换。当启用后，可独立定制该区域的外观，而不影响全局主题。结账选项卡
- 商品信息与价格
- 极速支付选项（Apple Pay、Google Pay）
- 支付方式选择与银行卡表单
- 折扣码输入与价格明细
在线店面选项卡
| 设置 | 描述 |
|---|---|
| 店面网址 | 你的在线店面地址（例如：store.dodopayments.com/your-store） |
| 店面名称 | 切换并设置显示在店面上的名称 |
| 店面徽标 | 切换并上传店面页眉徽标 |
| 店面横幅 | 切换并上传横幅图像 |
| 商品描述 | 切换以在卡片上显示或隐藏商品描述 |
| 覆盖主题 | 启用后可仅为在线店面定制排版、配色与边框 |
客户门户选项卡
- 订阅管理
- 账单历史
- 支付方式
- 钱包与余额
相关资源
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.