跳转到主要内容

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.

​
定制概述

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

​
访问结账设置

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

​
从网站 URL 导入

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

输入网站 URL

在结账设置面板中找到”从网站导入”区域，粘贴您的网站 URL（例如 https://yoursite.com）。
2

点击提取

点击提取按钮。系统会分析您网站的 CSS 并提取品牌颜色。
3

检查并调整

提取的颜色会应用到当前主题模式。检查实时预览，按需微调。

​
工作原理

样式提取使用三层策略以获得最高准确率：
层级方法提取内容
1CSS 变量--primary、--brand、--accent 等 CSS 自定义属性
2CSS 规则解析按钮背景、标题颜色、body 样式等实际 CSS 规则
3AI 兜底当第 1-2 层结果不足时，AI 模型分析 HTML/CSS 上下文识别品牌颜色

​
可提取的属性

属性来源
主色调按钮和 CTA 的品牌/强调色
背景色页面背景颜色
卡片色基于背景色推导（略浅/略深）
文字颜色主体文字颜色
圆角网站最常用的 border-radius
Logo网站 favicon（转换为 base64）
如果您已在商店设置中填写了网站 URL，它会被自动预填。
AI 辅助提取限制为每个商店每天 10 次。基于 CSS 的提取（第 1-2 层）无限制。
上传品牌 Logo 显示在结账页面。
设置规格
格式PNG, JPG, SVG
推荐尺寸200 × 50 px
最大文件大小2 MB
背景推荐透明
使用横向 Logo 效果最佳。从网站 URL 导入时，网站的 favicon 会被自动用作 Logo。

​
主题模式

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

浅色主题

白色背景，深色文字。适合大多数品牌，专业外观。

深色主题

深色背景，浅色文字。现代美感，减轻眼睛疲劳。

​
颜色设置

为当前主题模式自定义结账配色方案：
设置字段名默认值（浅色）默认值（深色）
主色调checkoutColorPrimary#7CCB02#ADFF85
背景色checkoutColorBackground#FFFFFF#0A1A1F
卡片色checkoutColorCard#F3F4F6#0A1A1F
文字颜色checkoutColorText#111827#FFFFFF
点击颜色色块打开颜色选择器，或直接输入十六进制代码。
确保文字和背景颜色之间有足够的对比度以保证可访问性。WCAG 建议对比度至少为 4.5:1。

​
圆角

通过 checkoutBorderRadius 设置控制 UI 元素的圆角程度。
值样式
0px直角
4px微圆角
8px标准（默认）
12px大圆角
16px超大圆角

​
实时预览

预览面板在您修改时实时显示结账页面效果。
  • 桌面视图 — 全宽结账布局
  • 手机视图 — 手机尺寸结账布局
  • 产品选择 — 用商店中不同的产品预览
更改即时反映在预览中，无需保存。

​
API 参考

结账设置作为商店的 checkoutSettings 对象保存： 
{
  "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 参考 查看 checkoutSettings 的整体更新方式。

​
商店信息

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

​
最佳实践

  • 使用从网站导入功能自动匹配您网站的颜色
  • 使用与主站相同的 Logo
  • 一致的配色方案建立信任
  • 很多客户使用深色模式 — 请同时定制浅色和深色主题
  • 确保 Logo 在浅色和深色背景上都能正常显示
  • 在两种模式下都测试颜色对比度
  • 使用手机预览检查布局
  • 确保 Logo 在小屏幕上正确缩放
  • 验证触摸目标是否足够大
  • 保持足够的颜色对比度（最低 4.5:1）
  • 可读的字体大小
  • 在不同色觉条件下测试

​
重置为默认

重置当前主题模式为默认值：
  1. 在结账设置中点击”重置”
  2. 当前模式（浅色或深色）将恢复默认的 Waffo Pancake 颜色
重置无法撤销。当前主题模式的定制内容将丢失。