定制概述
让您的收银台页面与品牌保持一致。手动自定义颜色,或直接从您的网站 URL 导入样式。访问收银台设置
- 前往控制台 → 设置
- 选择”收银台”选项卡
- 实时自定义并预览更改
- 保存以同时应用到浅色和深色主题
从网站 URL 导入
最快的品牌定制方式 — 粘贴您的网站 URL,Waffo Pancake 自动提取品牌颜色、圆角和网站图标。1
输入网站 URL
在收银台设置面板中找到”从网站导入”区域,粘贴您的网站 URL(例如
https://yoursite.com)。2
点击提取
点击提取按钮。系统会分析您网站的 CSS 并提取品牌颜色。
3
检查并调整
提取的颜色会应用到当前主题模式。检查实时预览,按需微调。
工作原理
样式提取使用三层策略以获得最高准确率:可提取的属性
AI 辅助提取限制为每个商店每天 10 次。基于 CSS 的提取(第 1-2 层)无限制。
Logo
上传品牌 Logo 显示在收银台页面。主题模式
每个主题维护独立的颜色值。切换模式即可分别自定义。浅色主题
白色背景,深色文字。适合大多数品牌,专业外观。
深色主题
深色背景,浅色文字。现代美感,减轻眼睛疲劳。
颜色设置
为当前主题模式自定义收银台配色方案:
点击颜色色块打开颜色选择器,或直接输入十六进制代码。
确保文字和背景颜色之间有足够的对比度以保证可访问性。WCAG 建议对比度至少为 4.5:1。
圆角
通过checkoutBorderRadius 设置控制 UI 元素的圆角程度。
实时预览
预览面板在您修改时实时显示收银台页面效果。- 桌面视图 — 全宽收银台布局
- 手机视图 — 手机尺寸收银台布局
- 产品选择 — 用商店中不同的产品预览
API 参考
收银台设置作为商店的checkoutSettings 对象保存:
checkoutSettings 的整体更新方式。
商店信息
最佳实践
品牌一致性
品牌一致性
- 使用从网站导入功能自动匹配您网站的颜色
- 使用与主站相同的 Logo
- 一致的配色方案建立信任
两套主题都要定制
两套主题都要定制
- 很多客户使用深色模式 — 请同时定制浅色和深色主题
- 确保 Logo 在浅色和深色背景上都能正常显示
- 在两种模式下都测试颜色对比度
移动端优化
移动端优化
- 使用手机预览检查布局
- 确保 Logo 在小屏幕上正确缩放
- 验证触摸目标是否足够大
可访问性
可访问性
- 保持足够的颜色对比度(最低 4.5:1)
- 可读的字体大小
- 在不同色觉条件下测试
重置为默认
重置当前主题模式为默认值:- 在收银台设置中点击”重置”
- 当前模式(浅色或深色)将恢复默认的 Waffo Pancake 颜色