Skip to main content

定制概述

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

访问收银台设置

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

从网站 URL 导入

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

输入网站 URL

在收银台设置面板中找到”从网站导入”区域,粘贴您的网站 URL(例如 https://yoursite.com)。
2

点击提取

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

检查并调整

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

工作原理

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

可提取的属性

如果您已在商店设置中填写了网站 URL,它会被自动预填。
AI 辅助提取限制为每个商店每天 10 次。基于 CSS 的提取(第 1-2 层)无限制。

上传品牌 Logo 显示在收银台页面。
使用横向 Logo 效果最佳。从网站 URL 导入时,网站的 favicon 会被自动用作 Logo。

主题模式

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

浅色主题

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

深色主题

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

颜色设置

为当前主题模式自定义收银台配色方案: 点击颜色色块打开颜色选择器,或直接输入十六进制代码。
确保文字和背景颜色之间有足够的对比度以保证可访问性。WCAG 建议对比度至少为 4.5:1。

圆角

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

实时预览

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

API 参考

收银台设置作为商店的 checkoutSettings 对象保存:
通过 API 参考 查看 checkoutSettings 的整体更新方式。

商店信息


最佳实践

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

重置为默认

重置当前主题模式为默认值:
  1. 在收银台设置中点击”重置”
  2. 当前模式(浅色或深色)将恢复默认的 Waffo Pancake 颜色
重置无法撤销。当前主题模式的定制内容将丢失。

收银台语言

收银台语言无需在此配置 —— 它自动跟随买家的浏览器语言,买家也可自行切换。支持的 19 种语言与选择优先级见多语言支持