1 进入结账页编辑器
打开应用 → 自己店铺域名对应的入口 → Funnels,找到目标流程,点击 … → View/Edit Settings。
在左侧选择 One Page Checkout,点击右侧红框中的 Edit checkout page。
2 设置页面标题和 Logo
点击左侧 Page Basic Config,在右侧选择 Base。
Logo 一定要添加:使用大小合适的透明底 Logo。
建议配置 Favicon(浏览器标签页小图标),上传并复制图片链接后,填写到 Favicon URL。
- Page Title 设置页面标题;Favicon URL 填写浏览器标签图标链接。
- 点击 Logo 图片区域上传店铺 Logo;Width / Height 设置宽高,勾选 Auto 使用自动尺寸。
Favicon 小图标:上传、复制链接、粘贴
1 上传小图标
进入 Shopify 后台的内容 → 文件,点击右上角红框中的上传文件,选择准备好的小图标图片。
2 复制图片链接
上传完成后,找到该文件。鼠标移到文件所在行,点击右侧红框中的链条图标(复制链接)。
3 粘贴到 Favicon URL
回到结账编辑器的Page Basic Config → Base,将图片链接粘贴到红框中的Favicon URL,再点击右上角Save。
3 设置主题、颜色和字体
在 Page Basic Config → Theme 选择预设主题,或选择 Custom 自定义。
- 点击 Page Basic Config,再打开 Theme。
- 直接选择预设配色;需要自己设置颜色时,选择 Custom。
页面颜色和字体
- 设置页面、订单摘要和边框颜色,以及正文、标题颜色;Font Family / Base Font Size 设置字体和字号。
主色、付款按钮和输入框
- Accent Color 设置强调色;Interactive Color 设置交互颜色。
- Button Background / Button Text 设置付款按钮的背景和文字颜色。
- 设置输入框背景、文字、边框颜色;Input Radius 设置圆角大小。
4 设置各个组件
点击左侧组件名称,右侧会显示对应设置。按图中红框编号修改。
顶部内容和倒计时
- 在 Content 编辑结账页顶部内容,可调整文字格式。
- Style 选择倒计时样式。
- Bottom Spacing 设置底部间距。
- 填写倒计时提示文字,并设置字号。
- Duration 设置倒计时秒数,例如 600 表示 10 分钟。
- Color Theme 选择倒计时配色。
联系信息和收货信息文案
- Section Title 设置联系信息区域的标题。
- 修改邮箱输入框标签和邮件营销复选框的说明文字。
- 修改国家、姓名、地址、城市、电话等输入框的标签和提示文字。
付款按钮和优惠码入口
- Button Text 设置付款按钮文字;Processing Aria Label 设置付款处理中供辅助阅读使用的说明。按钮配色在 Theme → Custom → Button 中设置。
- Display Position 选择优惠码入口位置:订单摘要、结账页顶部或底部。
- Placeholder 设置优惠码输入框的提示文字。
订单摘要下方的介绍与评价
- 设置 Why choose us? 是否显示在客户评价前面。
- 设置 Why choose us? 的显示开关、标题和字号。
- 设置客户评价的显示开关、标题和字号。
底部内容和政策链接
- 编辑政策链接上方的内容。
- 设置底部链接的字号和颜色。
- 勾选需要显示的退款、运输、隐私、服务条款和取消政策链接。
- 修改各个政策链接的显示文字。
5 预览并保存
- 在 Live Preview 切换 Desktop / Mobile,检查电脑和手机的文字、图片与按钮。
- 点击 Refresh Preview 刷新预览。
- 确认后点击编辑器右上角 Save 保存,再点击 Back 返回结账步骤页面。