> ## Documentation Index
> Fetch the complete documentation index at: https://docs.waffo.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 收银台定制

> 通过自定义颜色、Logo 和网站样式导入，打造品牌收银台体验

## 定制概述

让您的收银台页面与品牌保持一致。手动自定义颜色，或直接从您的网站 URL 导入样式。

## 访问收银台设置

1. 前往控制台 → 设置
2. 选择"收银台"选项卡
3. 实时自定义并预览更改
4. 保存以同时应用到浅色和深色主题

***

## 从网站 URL 导入

最快的品牌定制方式 — 粘贴您的网站 URL，Waffo Pancake 自动提取品牌颜色、圆角和网站图标。

<Steps>
  <Step title="输入网站 URL">
    在收银台设置面板中找到"从网站导入"区域，粘贴您的网站 URL（例如 `https://yoursite.com`）。
  </Step>

  <Step title="点击提取">
    点击**提取**按钮。系统会分析您网站的 CSS 并提取品牌颜色。
  </Step>

  <Step title="检查并调整">
    提取的颜色会应用到当前主题模式。检查实时预览，按需微调。
  </Step>
</Steps>

### 工作原理

样式提取使用三层策略以获得最高准确率：

| 层级    | 方法       | 提取内容                                         |
| ----- | -------- | -------------------------------------------- |
| **1** | CSS 变量   | `--primary`、`--brand`、`--accent` 等 CSS 自定义属性 |
| **2** | CSS 规则解析 | 按钮背景、标题颜色、body 样式等实际 CSS 规则                  |
| **3** | AI 兜底    | 当第 1-2 层结果不足时，AI 模型分析 HTML/CSS 上下文识别品牌颜色     |

### 可提取的属性

| 属性   | 来源                     |
| ---- | ---------------------- |
| 主色调  | 按钮和 CTA 的品牌/强调色        |
| 背景色  | 页面背景颜色                 |
| 卡片色  | 基于背景色推导（略浅/略深）         |
| 文字颜色 | 主体文字颜色                 |
| 圆角   | 网站最常用的 border-radius   |
| Logo | 网站 favicon（转换为 base64） |

<Tip>
  如果您已在商店设置中填写了网站 URL，它会被自动预填。
</Tip>

<Note>
  AI 辅助提取限制为每个商店每天 10 次。基于 CSS 的提取（第 1-2 层）无限制。
</Note>

***

## Logo

上传品牌 Logo 显示在收银台页面。

| 设置     | 规格            |
| ------ | ------------- |
| 格式     | PNG, JPG, SVG |
| 推荐尺寸   | 200 × 50 px   |
| 最大文件大小 | 2 MB          |
| 背景     | 推荐透明          |

<Tip>
  使用横向 Logo 效果最佳。从网站 URL 导入时，网站的 favicon 会被自动用作 Logo。
</Tip>

***

## 主题模式

每个主题维护独立的颜色值。切换模式即可分别自定义。

<CardGroup cols={2}>
  <Card title="浅色主题" icon="sun">
    白色背景，深色文字。适合大多数品牌，专业外观。
  </Card>

  <Card title="深色主题" icon="moon">
    深色背景，浅色文字。现代美感，减轻眼睛疲劳。
  </Card>
</CardGroup>

***

## 颜色设置

为当前主题模式自定义收银台配色方案：

| 设置       | 字段名                       | 默认值（浅色） | 默认值（深色） |
| -------- | ------------------------- | ------- | ------- |
| **主色调**  | `checkoutColorPrimary`    | #7CCB02 | #ADFF85 |
| **背景色**  | `checkoutColorBackground` | #FFFFFF | #0A1A1F |
| **卡片色**  | `checkoutColorCard`       | #F3F4F6 | #0A1A1F |
| **文字颜色** | `checkoutColorText`       | #111827 | #FFFFFF |

点击颜色色块打开颜色选择器，或直接输入十六进制代码。

<Note>
  确保文字和背景颜色之间有足够的对比度以保证可访问性。WCAG 建议对比度至少为 4.5:1。
</Note>

### 圆角

通过 `checkoutBorderRadius` 设置控制 UI 元素的圆角程度。

| 值      | 样式     |
| ------ | ------ |
| `0px`  | 直角     |
| `4px`  | 微圆角    |
| `8px`  | 标准（默认） |
| `12px` | 大圆角    |
| `16px` | 超大圆角   |

***

## 实时预览

预览面板在您修改时实时显示收银台页面效果。

* **桌面视图** — 全宽收银台布局
* **手机视图** — 手机尺寸收银台布局
* **产品选择** — 用商店中不同的产品预览

更改即时反映在预览中，无需保存。

***

## API 参考

收银台设置作为商店的 `checkoutSettings` 对象保存：

```json theme={"system"}
{
  "checkoutSettings": {
    "light": {
      "checkoutLogo": "https://...",
      "checkoutColorPrimary": "#7CCB02",
      "checkoutColorBackground": "#FFFFFF",
      "checkoutColorCard": "#F3F4F6",
      "checkoutColorText": "#111827",
      "checkoutBorderRadius": "8px"
    },
    "dark": {
      "checkoutLogo": null,
      "checkoutColorPrimary": "#ADFF85",
      "checkoutColorBackground": "#0A1A1F",
      "checkoutColorCard": "#0A1A1F",
      "checkoutColorText": "#FFFFFF",
      "checkoutBorderRadius": "8px"
    }
  }
}
```

通过 [API 参考](/zh/api-reference/introduction) 查看 `checkoutSettings` 的整体更新方式。

***

## 商店信息

| 选项   | 描述          |
| ---- | ----------- |
| 商店名称 | 显示在收银台页头    |
| 客服邮箱 | 用于客户咨询      |
| 条款链接 | 链接到服务条款（必填） |
| 隐私链接 | 链接到隐私政策（必填） |

***

## 最佳实践

<AccordionGroup>
  <Accordion title="品牌一致性">
    * 使用**从网站导入**功能自动匹配您网站的颜色
    * 使用与主站相同的 Logo
    * 一致的配色方案建立信任
  </Accordion>

  <Accordion title="两套主题都要定制">
    * 很多客户使用深色模式 — 请同时定制浅色和深色主题
    * 确保 Logo 在浅色和深色背景上都能正常显示
    * 在两种模式下都测试颜色对比度
  </Accordion>

  <Accordion title="移动端优化">
    * 使用手机预览检查布局
    * 确保 Logo 在小屏幕上正确缩放
    * 验证触摸目标是否足够大
  </Accordion>

  <Accordion title="可访问性">
    * 保持足够的颜色对比度（最低 4.5:1）
    * 可读的字体大小
    * 在不同色觉条件下测试
  </Accordion>
</AccordionGroup>

***

## 重置为默认

重置当前主题模式为默认值：

1. 在收银台设置中点击"重置"
2. 当前模式（浅色或深色）将恢复默认的 Waffo Pancake 颜色

<Warning>
  重置无法撤销。当前主题模式的定制内容将丢失。
</Warning>

***

<h2 id="checkout-language">
  收银台语言
</h2>

托管收银台内置多语言能力，商户无需任何配置：

* **自动检测** —— 收银台界面自动跟随买家的浏览器语言，暂不支持的语言回落为英文。
* **买家自选** —— 买家可随时通过收银台页脚的语言选择器切换语言。
* **支付页跟随** —— 支付页（PSP 收银台）会使用买家点击支付时所选的语言打开（支持 22 种支付页语言）。