自定义主题——结账设置
结账页的样式,风格可以使用主题编辑器来设置,添加公司logo,更换颜色,设置新字体等。本文中我们去了解一下如何使用 主题编辑器来设置结账页。
A. 自定义结账页面样式
B. 布局与用户界面
C. 账号与表单
D. 法律协议与付款
E. 自定义代码
ShopBase后台前往 线上店铺(Online Store) > 主题(Themes)。选择主题,点击 定制(Customize)。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/themes-customize-inside_jbgxt5.png)
下拉菜单选择 Checkout 页面。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/3_1sb17yk.png)
Checkout 页面,您可以设置以下模板。
布局与用户界面(Layout & user interface)。
账号与表单(Account & forms) - 仅适用于ShopBase和PrintBase店铺。
法律协议与付款(Legal & Payments)- 仅适用于ShopBase店铺。
自定义代码(Custom Scripts)- 仅适用于ShopBase店铺。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/4_1cwkm0t.png)
我们对 PrintBase 和 PlusBase 店铺已进行了广泛的研究,因此店铺的一些功能已默认设置,不用手动自定义。这利于店铺的转化和客户的体验。
下文会说明具体的设置部分。
主题编辑器的 Checkout 页,请选择 Layout & user interface 。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/6_2fxs5x.png)
Layout: 选择 One page checkout (单页结账) 或 3-step checkout(三页结账)。参考 此教程了解两种布局。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/7_1hro8sr.png)
Banner: 上传网站顶部背景图。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/5_56wpdt.png)
Logo: 添加店铺logo。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/8_1pvwxwf.png)
Trust badges image: 添加信任徽章。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/9_10axavi.png)
Main content area: 在主要内容区域添加背景图。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/10_1ow9pck.png)
Order summary: 为订单摘要添加背景图或更改颜色。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/11_1vttlrh.png)
Footer: 选择在结账页显示或隐藏页脚。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/12_1moeung.png)
Typography: 更改结账页内容的字体。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/13_10z3eq6.png)
Color: 更改文本、按钮、通知内容的颜色。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/14_9x0lzv.png)
PrintBase和PlusBase店铺,您只能更改结账页的 logo。
点击 Save 保存。
此功能仅适用于ShopBase和PrintBase店铺。
主题编辑器的 Checkout 页,请选择 Account & forms 。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/15_13tku3i.png)
Customer account 中,勾选其中一个选项。
Accounts are disabled: 消费者只能以客人身份付款。
Accounts are optional: 消费者可以客人身份或登录账号进行付款。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/16_8oddj0.png)
勾选 Accounts are optional 让客户注册或登录账号再进行付款,从而转化成忠诚客户。
Form Option 中进行自定义结账表单。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/17_gk7c65.png)
Billing address,勾选 use the shipping address as the billing address by default 让客户使用收件地址为账单地址。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/19_419b5g.png)
Shipping method,选择显示所有有效物流方案或仅显示默认物流方案(其他物流方案需点击 Change 按钮查看)。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/18_1y90tgz.png)
此功能仅适用于单页结账类型。
Checkout note中,勾选 Allow customer to leave a note ,文本框将显示在结账页让客户备注。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/20_1uazo11.png)
Tipping:设置小费。参考 此教程了解如何设置小费。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/21_sk67h1.png)
点击 Save 完成。
对于PrintBase店铺,小费只能在 Account & forms > Tipping设置。
此功能仅适用于ShopBase店铺。
主题编辑器的 Checkout 页面,选择 Legal & payments 。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/22_fjh5y.png)
Terms agreement 中,选择让客户在下单之前确认已阅读并同意店铺服务条款。参考 如何显示服务条款协议。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/23_93nssk.png)
Marketing consent中,设置邮件和SMS营销,客户是否要订阅邮件和SMS营销,选项是否预选。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/24_1lj5ftj.png)
Payments中勾选 Show PayPal Express checkout at the top of the checkout page 让PayPal快速结账按钮显示。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/25_1da9ch2.png)
点击 Save 完成。
此功能仅适用于ShopBase店铺。
主题编辑器的 Checkout 页,请选择 Custom scripts。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/26_1o6qb07.png)
这里您可以添加自己的代码(CSS, Javascript, HTML)。
您可以添加 Power Up 代码,使用avaScript或CSS。参考 如何添加Power Up代买。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/27_1ioayj2.png)
点击 Save 完成。
结帐概述
禁用“加入购物车”按钮
自定义购物车页面
三页结账和单页结账
优化结账页,提高转化率
如何设置感谢页面的订单状态和运输政策
买家如何跟踪订单状态
如何设置小费
在结帐页面上显示服务条款协议
主要内容
A. 自定义结账页面样式
B. 布局与用户界面
C. 账号与表单
D. 法律协议与付款
E. 自定义代码
A. 自定义结账页面样式
ShopBase后台前往 线上店铺(Online Store) > 主题(Themes)。选择主题,点击 定制(Customize)。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/themes-customize-inside_jbgxt5.png)
下拉菜单选择 Checkout 页面。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/3_1sb17yk.png)
Checkout 页面,您可以设置以下模板。
布局与用户界面(Layout & user interface)。
账号与表单(Account & forms) - 仅适用于ShopBase和PrintBase店铺。
法律协议与付款(Legal & Payments)- 仅适用于ShopBase店铺。
自定义代码(Custom Scripts)- 仅适用于ShopBase店铺。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/4_1cwkm0t.png)
我们对 PrintBase 和 PlusBase 店铺已进行了广泛的研究,因此店铺的一些功能已默认设置,不用手动自定义。这利于店铺的转化和客户的体验。
下文会说明具体的设置部分。
B. 布局与用户界面(Layout & user interface)
主题编辑器的 Checkout 页,请选择 Layout & user interface 。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/6_2fxs5x.png)
Layout: 选择 One page checkout (单页结账) 或 3-step checkout(三页结账)。参考 此教程了解两种布局。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/7_1hro8sr.png)
Banner: 上传网站顶部背景图。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/5_56wpdt.png)
Logo: 添加店铺logo。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/8_1pvwxwf.png)
Trust badges image: 添加信任徽章。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/9_10axavi.png)
Main content area: 在主要内容区域添加背景图。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/10_1ow9pck.png)
Order summary: 为订单摘要添加背景图或更改颜色。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/11_1vttlrh.png)
Footer: 选择在结账页显示或隐藏页脚。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/12_1moeung.png)
Typography: 更改结账页内容的字体。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/13_10z3eq6.png)
Color: 更改文本、按钮、通知内容的颜色。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/14_9x0lzv.png)
PrintBase和PlusBase店铺,您只能更改结账页的 logo。
点击 Save 保存。
C. 账号与表单(Account & forms)
此功能仅适用于ShopBase和PrintBase店铺。
主题编辑器的 Checkout 页,请选择 Account & forms 。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/15_13tku3i.png)
Customer account 中,勾选其中一个选项。
Accounts are disabled: 消费者只能以客人身份付款。
Accounts are optional: 消费者可以客人身份或登录账号进行付款。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/16_8oddj0.png)
勾选 Accounts are optional 让客户注册或登录账号再进行付款,从而转化成忠诚客户。
Form Option 中进行自定义结账表单。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/17_gk7c65.png)
Billing address,勾选 use the shipping address as the billing address by default 让客户使用收件地址为账单地址。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/19_419b5g.png)
Shipping method,选择显示所有有效物流方案或仅显示默认物流方案(其他物流方案需点击 Change 按钮查看)。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/18_1y90tgz.png)
此功能仅适用于单页结账类型。
Checkout note中,勾选 Allow customer to leave a note ,文本框将显示在结账页让客户备注。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/20_1uazo11.png)
Tipping:设置小费。参考 此教程了解如何设置小费。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/21_sk67h1.png)
点击 Save 完成。
对于PrintBase店铺,小费只能在 Account & forms > Tipping设置。
D. 法律协议与付款(Legal & payments)
此功能仅适用于ShopBase店铺。
主题编辑器的 Checkout 页面,选择 Legal & payments 。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/22_fjh5y.png)
Terms agreement 中,选择让客户在下单之前确认已阅读并同意店铺服务条款。参考 如何显示服务条款协议。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/23_93nssk.png)
Marketing consent中,设置邮件和SMS营销,客户是否要订阅邮件和SMS营销,选项是否预选。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/24_1lj5ftj.png)
Payments中勾选 Show PayPal Express checkout at the top of the checkout page 让PayPal快速结账按钮显示。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/25_1da9ch2.png)
点击 Save 完成。
E. 自定义代码
此功能仅适用于ShopBase店铺。
主题编辑器的 Checkout 页,请选择 Custom scripts。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/26_1o6qb07.png)
这里您可以添加自己的代码(CSS, Javascript, HTML)。
您可以添加 Power Up 代码,使用avaScript或CSS。参考 如何添加Power Up代买。
![](https://storage.crisp.chat/users/helpdesk/website/df8398a9e0c06000/27_1ioayj2.png)
点击 Save 完成。
关联页面
结帐概述
禁用“加入购物车”按钮
自定义购物车页面
三页结账和单页结账
优化结账页,提高转化率
如何设置感谢页面的订单状态和运输政策
买家如何跟踪订单状态
如何设置小费
在结帐页面上显示服务条款协议
更新于: 09/11/2022
谢谢!