自定义主题——结账设置
结账页的样式,风格可以使用主题编辑器来设置,添加公司logo,更换颜色,设置新字体等。本文中我们去了解一下如何使用 主题编辑器来设置结账页。
A. 自定义结账页面样式
B. 布局与用户界面
C. 账号与表单
D. 法律协议与付款
E. 自定义代码
ShopBase后台前往 线上店铺(Online Store) > 主题(Themes)。选择主题,点击 定制(Customize)。

下拉菜单选择 Checkout 页面。

Checkout 页面,您可以设置以下模板。
布局与用户界面(Layout & user interface)。
账号与表单(Account & forms) - 仅适用于ShopBase和PrintBase店铺。
法律协议与付款(Legal & Payments)- 仅适用于ShopBase店铺。
自定义代码(Custom Scripts)- 仅适用于ShopBase店铺。

我们对 PrintBase 和 PlusBase 店铺已进行了广泛的研究,因此店铺的一些功能已默认设置,不用手动自定义。这利于店铺的转化和客户的体验。
下文会说明具体的设置部分。
主题编辑器的 Checkout 页,请选择 Layout & user interface 。

Layout: 选择 One page checkout (单页结账) 或 3-step checkout(三页结账)。参考 此教程了解两种布局。

Banner: 上传网站顶部背景图。

Logo: 添加店铺logo。

Trust badges image: 添加信任徽章。

Main content area: 在主要内容区域添加背景图。

Order summary: 为订单摘要添加背景图或更改颜色。

Footer: 选择在结账页显示或隐藏页脚。

Typography: 更改结账页内容的字体。

Color: 更改文本、按钮、通知内容的颜色。

PrintBase和PlusBase店铺,您只能更改结账页的 logo。
点击 Save 保存。
此功能仅适用于ShopBase和PrintBase店铺。
主题编辑器的 Checkout 页,请选择 Account & forms 。

Customer account 中,勾选其中一个选项。
Accounts are disabled: 消费者只能以客人身份付款。
Accounts are optional: 消费者可以客人身份或登录账号进行付款。

勾选 Accounts are optional 让客户注册或登录账号再进行付款,从而转化成忠诚客户。
Form Option 中进行自定义结账表单。

Billing address,勾选 use the shipping address as the billing address by default 让客户使用收件地址为账单地址。

Shipping method,选择显示所有有效物流方案或仅显示默认物流方案(其他物流方案需点击 Change 按钮查看)。

此功能仅适用于单页结账类型。
Checkout note中,勾选 Allow customer to leave a note ,文本框将显示在结账页让客户备注。

Tipping:设置小费。参考 此教程了解如何设置小费。

点击 Save 完成。
对于PrintBase店铺,小费只能在 Account & forms > Tipping设置。
此功能仅适用于ShopBase店铺。
主题编辑器的 Checkout 页面,选择 Legal & payments 。

Terms agreement 中,选择让客户在下单之前确认已阅读并同意店铺服务条款。参考 如何显示服务条款协议。

Marketing consent中,设置邮件和SMS营销,客户是否要订阅邮件和SMS营销,选项是否预选。

Payments中勾选 Show PayPal Express checkout at the top of the checkout page 让PayPal快速结账按钮显示。

点击 Save 完成。
此功能仅适用于ShopBase店铺。
主题编辑器的 Checkout 页,请选择 Custom scripts。

这里您可以添加自己的代码(CSS, Javascript, HTML)。
您可以添加 Power Up 代码,使用avaScript或CSS。参考 如何添加Power Up代买。

点击 Save 完成。
结帐概述
禁用“加入购物车”按钮
自定义购物车页面
三页结账和单页结账
优化结账页,提高转化率
如何设置感谢页面的订单状态和运输政策
买家如何跟踪订单状态
如何设置小费
在结帐页面上显示服务条款协议
主要内容
A. 自定义结账页面样式
B. 布局与用户界面
C. 账号与表单
D. 法律协议与付款
E. 自定义代码
A. 自定义结账页面样式
ShopBase后台前往 线上店铺(Online Store) > 主题(Themes)。选择主题,点击 定制(Customize)。

下拉菜单选择 Checkout 页面。

Checkout 页面,您可以设置以下模板。
布局与用户界面(Layout & user interface)。
账号与表单(Account & forms) - 仅适用于ShopBase和PrintBase店铺。
法律协议与付款(Legal & Payments)- 仅适用于ShopBase店铺。
自定义代码(Custom Scripts)- 仅适用于ShopBase店铺。

我们对 PrintBase 和 PlusBase 店铺已进行了广泛的研究,因此店铺的一些功能已默认设置,不用手动自定义。这利于店铺的转化和客户的体验。
下文会说明具体的设置部分。
B. 布局与用户界面(Layout & user interface)
主题编辑器的 Checkout 页,请选择 Layout & user interface 。

Layout: 选择 One page checkout (单页结账) 或 3-step checkout(三页结账)。参考 此教程了解两种布局。

Banner: 上传网站顶部背景图。

Logo: 添加店铺logo。

Trust badges image: 添加信任徽章。

Main content area: 在主要内容区域添加背景图。

Order summary: 为订单摘要添加背景图或更改颜色。

Footer: 选择在结账页显示或隐藏页脚。

Typography: 更改结账页内容的字体。

Color: 更改文本、按钮、通知内容的颜色。

PrintBase和PlusBase店铺,您只能更改结账页的 logo。
点击 Save 保存。
C. 账号与表单(Account & forms)
此功能仅适用于ShopBase和PrintBase店铺。
主题编辑器的 Checkout 页,请选择 Account & forms 。

Customer account 中,勾选其中一个选项。
Accounts are disabled: 消费者只能以客人身份付款。
Accounts are optional: 消费者可以客人身份或登录账号进行付款。

勾选 Accounts are optional 让客户注册或登录账号再进行付款,从而转化成忠诚客户。
Form Option 中进行自定义结账表单。

Billing address,勾选 use the shipping address as the billing address by default 让客户使用收件地址为账单地址。

Shipping method,选择显示所有有效物流方案或仅显示默认物流方案(其他物流方案需点击 Change 按钮查看)。

此功能仅适用于单页结账类型。
Checkout note中,勾选 Allow customer to leave a note ,文本框将显示在结账页让客户备注。

Tipping:设置小费。参考 此教程了解如何设置小费。

点击 Save 完成。
对于PrintBase店铺,小费只能在 Account & forms > Tipping设置。
D. 法律协议与付款(Legal & payments)
此功能仅适用于ShopBase店铺。
主题编辑器的 Checkout 页面,选择 Legal & payments 。

Terms agreement 中,选择让客户在下单之前确认已阅读并同意店铺服务条款。参考 如何显示服务条款协议。

Marketing consent中,设置邮件和SMS营销,客户是否要订阅邮件和SMS营销,选项是否预选。

Payments中勾选 Show PayPal Express checkout at the top of the checkout page 让PayPal快速结账按钮显示。

点击 Save 完成。
E. 自定义代码
此功能仅适用于ShopBase店铺。
主题编辑器的 Checkout 页,请选择 Custom scripts。

这里您可以添加自己的代码(CSS, Javascript, HTML)。
您可以添加 Power Up 代码,使用avaScript或CSS。参考 如何添加Power Up代买。

点击 Save 完成。
关联页面
结帐概述
禁用“加入购物车”按钮
自定义购物车页面
三页结账和单页结账
优化结账页,提高转化率
如何设置感谢页面的订单状态和运输政策
买家如何跟踪订单状态
如何设置小费
在结帐页面上显示服务条款协议
更新于: 09/11/2022
谢谢!