SHOPIFY 运营教程

域名应用的结账页样式设置教程

从编辑入口开始,按红框编号设置结账页样式。

适用:Shopify / 域名应用图文操作教程

1 进入结账页编辑器

打开应用 → 自己店铺域名对应的入口 → Funnels,找到目标流程,点击 … → View/Edit Settings。

在左侧选择 One Page Checkout,点击右侧红框中的 Edit checkout page。

结账页样式编辑入口
结账页样式编辑入口 · 点击放大

2 设置页面标题和 Logo

点击左侧 Page Basic Config,在右侧选择 Base。

Logo 一定要添加:使用大小合适的透明底 Logo。

建议配置 Favicon(浏览器标签页小图标),上传并复制图片链接后,填写到 Favicon URL。

基础信息和 Logo
基础信息和 Logo · 点击放大
  1. Page Title 设置页面标题;Favicon URL 填写浏览器标签图标链接。
  2. 点击 Logo 图片区域上传店铺 Logo;Width / Height 设置宽高,勾选 Auto 使用自动尺寸。
Favicon 小图标:上传、复制链接、粘贴

1 上传小图标

1 上传小图标
1 上传小图标 · 点击放大

进入 Shopify 后台的内容 → 文件,点击右上角红框中的上传文件,选择准备好的小图标图片。

2 复制图片链接

2 复制图片链接
2 复制图片链接 · 点击放大

上传完成后,找到该文件。鼠标移到文件所在行,点击右侧红框中的链条图标(复制链接)。

3 粘贴到 Favicon URL

3 粘贴到 Favicon URL
3 粘贴到 Favicon URL · 点击放大

回到结账编辑器的Page Basic Config → Base,将图片链接粘贴到红框中的Favicon URL,再点击右上角Save。

3 设置主题、颜色和字体

在 Page Basic Config → Theme 选择预设主题,或选择 Custom 自定义。

选择主题
选择主题 · 点击放大
  1. 点击 Page Basic Config,再打开 Theme。
  2. 直接选择预设配色;需要自己设置颜色时,选择 Custom。
页面颜色和字体
页面颜色和字体
页面颜色和字体 · 点击放大
  1. 设置页面、订单摘要和边框颜色,以及正文、标题颜色;Font Family / Base Font Size 设置字体和字号。
主色、付款按钮和输入框
主色和按钮颜色
主色和按钮颜色 · 点击放大
  1. Accent Color 设置强调色;Interactive Color 设置交互颜色。
  2. Button Background / Button Text 设置付款按钮的背景和文字颜色。
输入框样式
输入框样式 · 点击放大
  1. 设置输入框背景、文字、边框颜色;Input Radius 设置圆角大小。

4 设置各个组件

点击左侧组件名称,右侧会显示对应设置。按图中红框编号修改。

顶部内容和倒计时
Checkout Header 顶部内容
Checkout Header 顶部内容 · 点击放大
  1. 在 Content 编辑结账页顶部内容,可调整文字格式。
Countdown 倒计时
Countdown 倒计时 · 点击放大
  1. Style 选择倒计时样式。
  2. Bottom Spacing 设置底部间距。
  3. 填写倒计时提示文字,并设置字号。
  4. Duration 设置倒计时秒数,例如 600 表示 10 分钟。
  5. Color Theme 选择倒计时配色。
联系信息和收货信息文案
Contact 联系信息文案
Contact 联系信息文案 · 点击放大
  1. Section Title 设置联系信息区域的标题。
  2. 修改邮箱输入框标签和邮件营销复选框的说明文字。
Delivery 收货信息文案
Delivery 收货信息文案 · 点击放大
  1. 修改国家、姓名、地址、城市、电话等输入框的标签和提示文字。
付款按钮和优惠码入口
Pay Button 付款按钮文案
Pay Button 付款按钮文案 · 点击放大
  1. Button Text 设置付款按钮文字;Processing Aria Label 设置付款处理中供辅助阅读使用的说明。按钮配色在 Theme → Custom → Button 中设置。
Discount Code 优惠码显示
Discount Code 优惠码显示 · 点击放大
  1. Display Position 选择优惠码入口位置:订单摘要、结账页顶部或底部。
  2. Placeholder 设置优惠码输入框的提示文字。
订单摘要下方的介绍与评价
Order Summary 摘要下方内容
Order Summary 摘要下方内容 · 点击放大
  1. 设置 Why choose us? 是否显示在客户评价前面。
  2. 设置 Why choose us? 的显示开关、标题和字号。
  3. 设置客户评价的显示开关、标题和字号。
底部内容和政策链接
Checkout Footer 底部内容
Checkout Footer 底部内容 · 点击放大
  1. 编辑政策链接上方的内容。
  2. 设置底部链接的字号和颜色。
底部政策链接
底部政策链接 · 点击放大
  1. 勾选需要显示的退款、运输、隐私、服务条款和取消政策链接。
  2. 修改各个政策链接的显示文字。

5 预览并保存

  1. 在 Live Preview 切换 Desktop / Mobile,检查电脑和手机的文字、图片与按钮。
  2. 点击 Refresh Preview 刷新预览。
  3. 确认后点击编辑器右上角 Save 保存,再点击 Back 返回结账步骤页面。