自定义结账页面的样式
如果您使用在线商店销售产品，则可以在结账和账户编辑器中自定义结账页面的样式。您可以添加公司 logo、更改颜色或选择新字体，以使结账页面与您的业务相匹配。
您为结账页面选择的某些品牌营销元素也适用于您的新客户账户页面。
在此页面上
自定义结账页面和客户账户样式的注意事项
在自定义结账页面样式之前，请查看以下注意事项：
- 后台 结账设置部分中的配置区域在您选择套餐并创建第一个产品后才会显示。
- 如果您使用的是 Shopify Plus，则可以使用 Checkout Branding API 进行高级结账品牌营销自定义。
- 如果您在自定义购物车和结账页面样式方面需要帮助，可以聘请 Shopify 合作伙伴。详细了解聘请 Shopify 合作伙伴。
- 尽管您可能想为结账页面添加许多颜色和有趣的元素，但最好还是保持设计简洁。您的客户使用这些页面来输入其订单的发货和付款信息，您不应分散他们的注意力或使信息难以阅读。请选择高对比度的颜色，以及不会将注意力从页面文字上移开的图片。
为您的结账页面和客户账户创建调色板
您可以创建一个调色板，以便在结账和账户编辑器中的多个设置之间快速重用颜色。更改调色板中的颜色时，所有使用该颜色的设置都会动态更新为新颜色。这也意味着，如果您想多次使用某一种颜色，将无需记住其十六进制代码。
步骤：
桌面版
在 Shopify 后台中，转至设置 > 结账。
在配置部分中，点击您要自定义的配置旁边的编辑。
在结账和账户编辑器中，点击
访问设置侧边栏。在调色板部分中，点击
+选择一种要添加到调色板的颜色。可选：若要移除调色板中不再需要的颜色：
- 点击该颜色，然后点击删除颜色。
- 选择一种替代颜色，在结账页面中使用被删除颜色的各个地方进行替换。
- 点击确认。
点击保存。
移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分中，轻触您要自定义的配置上的编辑。
在结账和账户编辑器中，轻触设置。
在调色板部分中，轻触
+选择一种要添加到调色板的颜色。可选：若要移除调色板中不再需要的颜色：
- 轻触该颜色，然后轻触删除颜色。
- 选择一种替代颜色，在结账页面中使用被删除颜色的各个地方进行替换。
- 轻触确认。
轻触保存或 ✓。
在结账和账户编辑器中使用颜色选择器
在结账和账户编辑器中自定义需要颜色的字段时，可以使用颜色选择器来帮助您选择所需颜色。在颜色选择器中，您可以通过以下任一方式选择颜色：
- 使用颜色滑块可更改选择器预览中可用颜色的色调。
- 使用十六进制字段可输入特定颜色的代码，例如，标准纯蓝色为
#0000FF。 - 使用
以通过光标从屏幕上的任意位置选取特定颜色。 - 使用
可将选择器预览中可用颜色的数量缩小为 40 种。
调色板部分显示了您已添加到结账和账户编辑器中调色板的所有颜色样本。
如果您在此次访问结账和账户编辑器期间曾经手动选择过任何颜色，您也可以从最近使用的颜色样本中进行选择。
自定义标头颜色
在每个结账和客户账户页面的顶部，标头会显示您的商店名称。您可以更改该横幅的背景色。选择与您的品牌相匹配的颜色。
步骤：
桌面版
在 Shopify 后台中，转至设置 > 结账。
在配置部分中，点击您要自定义的配置旁边的编辑。
在结账和账户编辑器中，点击
访问设置侧边栏。在标头部分中，进行以下任意颜色自定义：
- 使用背景可设置标头的背景色。
- 使用强调色可设置标头中购物车图标和链接的颜色。
点击保存。
移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分中，轻触您要自定义的配置上的编辑。
在结账和账户编辑器中，轻触设置。
在标头部分中，进行以下任意颜色自定义：
- 使用背景可设置标头的背景色。
- 使用强调色可设置标头中购物车图标和链接的颜色。
轻触保存或 ✓。
在结账页面上添加 logo
您可以将商店 logo 添加到结账页面中。您可以将 logo 对齐到结账页面中横幅区域的左侧、右侧或中间。
步骤：
桌面版
在 Shopify 后台中，转至设置 > 结账。
在配置部分中，点击您要自定义的配置旁边的编辑。
在结账和账户编辑器中，点击
访问设置侧边栏。在 Logo 部分中，点击图片字段。
点击从媒体库中选择，从媒体库中选择现有图片。
可选：在 Logo 部分中，通过以下设置调整您的 logo：
- 使用宽度可选择 logo 尺寸，单位为像素。
- 使用对齐方式可选择将 logo 显示在横幅的左侧、中间还是右侧。
点击保存。
移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分中，轻触您要自定义的配置上的编辑。
在结账和账户编辑器中，轻触设置。
在 Logo 部分中，轻触图片字段。
轻触从媒体库中选择，从媒体库中选择现有图片。
可选：在 Logo 部分中，通过以下设置调整您的 logo：
- 使用宽度可选择 logo 尺寸，单位为像素。
- 使用对齐方式可选择将 logo 显示在横幅的左侧、中间还是右侧。
轻触保存或 ✓。
为主要内容区域添加背景颜色
您可以为结账页面的主要内容区域添加背景颜色。客户将在此区域输入发货和付款信息，因此请确保在此背景下能清晰阅读各字段。
步骤：
桌面版
在 Shopify 后台中，转至设置 > 结账。
在配置部分中，点击您要自定义的配置旁边的编辑。
在结账和账户编辑器中，点击
访问设置侧边栏。在主要分区中，点击颜色打开颜色选择器，然后选择一种颜色或输入十六进制代码。
点击保存。
移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分中，轻触您要自定义的配置上的编辑。
在结账和账户编辑器中，轻触设置。
在主要分区中，轻触颜色打开颜色选择器，然后选择一种颜色或输入十六进制代码。
轻触保存或 ✓。
更改表单字段的颜色
您可以更改结账页面中表单字段的颜色。此外，还可以更改错误消息的颜色，将其变为白色或透明。确保您可以清楚地阅读字段中的文本。
步骤：
桌面版
在 Shopify 后台中，转至设置 > 结账。
在配置部分中，点击您要自定义的配置旁边的编辑。
在结账和账户编辑器中，点击
访问设置侧边栏。在输入字段部分中，进行以下任意自定义：
- 要更改输入字段的颜色，请转至输入，然后点击透明或白色。
- 要更改错误消息的颜色，请点击错误字段，然后选择一种颜色。
点击保存。
移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分中，轻触您要自定义的配置上的编辑。
在结账和账户编辑器中，轻触设置。
在输入字段部分中，进行以下任意自定义：
- 要更改输入字段的颜色，请转至输入，然后轻触透明或白色。
- 要更改错误消息的颜色，请轻触错误字段，然后选择一种颜色。
轻触保存或 ✓。
向订单摘要添加背景图片或颜色
当客户在结账页面上点击显示订单摘要时，系统会显示他们正在购买的产品的列表。您可以向订单摘要添加背景图片或颜色。您可以在模板编辑器的预览中点击显示订单摘要，以确保您对订单摘要的显示方式感到满意。
较小的图片会在背景中垂直和水平方向重复，类似于图块。
步骤：
桌面版
在 Shopify 后台中，转至设置 > 结账。
在配置部分中，点击您要自定义的配置旁边的编辑。
在结账和账户编辑器中，点击
访问设置侧边栏。在订单摘要部分中，点击订单摘要。
添加背景色或图片：
- 要添加颜色，请点击背景打开颜色选择器，然后选择一种颜色或输入十六进制代码。
- 要添加图片，请点击图片 > 选择。点击从媒体库中选择，从媒体库中选择现有图片。
点击保存。
移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分中，轻触您要自定义的配置上的编辑。
在结账和账户编辑器中，轻触设置。
在订单摘要部分中，轻触订单摘要。
添加背景色或图片：
- 要添加颜色，请轻触背景打开颜色选择器，然后选择一种颜色或输入十六进制代码。
- 要添加图片，请轻触图片 > 选择。轻触从媒体库中选择，从媒体库中选择现有图片。
轻触保存或 ✓。
在订单摘要中更改或移除图片
您可以更改或移除已添加到订单摘要中的图片。
步骤：
桌面版
在 Shopify 后台中，转至设置 > 结账。
在配置部分中，点击您要自定义的配置旁边的编辑。
在结账和账户编辑器中，点击
访问设置侧边栏。在订单摘要部分中，点击订单摘要。
在要更换的图片下方，点击更改以从媒体库中选择图片或浏览免费图片。
点击保存。
移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分中，轻触您要自定义的配置上的编辑。
在结账和账户编辑器中，轻触设置。
在订单摘要部分中，轻触订单摘要。
在要更换的图片下方，轻触更改以从媒体库中选择图片或浏览免费图片。
轻触保存或 ✓。
若要删除图片，请点击更改 > 删除图片。此操作不会从 Shopify 中删除该图片。
更改结账页面上的字体
您可以从字体列表中进行选择，从而自定义您的结账页面。
步骤：
桌面版
在 Shopify 后台中，转至设置 > 结账。
在配置部分中，点击您要自定义的配置旁边的编辑。
在结账和账户编辑器中，点击
访问设置侧边栏。在排版部分，点击标题下拉菜单或正文下拉菜单，然后选择一种字体。
点击保存。
移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分中，轻触您要自定义的配置上的编辑。
在结账和账户编辑器中，轻触设置。
在排版部分，轻触标题下拉菜单或正文下拉菜单，然后选择一种字体。
轻触保存或 ✓。
更改结账页面上的按钮和强调色
您可以更改结账页面上的按钮和强调色（如链接）的颜色。如果您更改了颜色，请确保在主要内容区域和订单摘要的背景下可以清楚地阅读文本。
步骤：
桌面版
在 Shopify 后台中，转至设置 > 结账。
在配置部分中，点击您要自定义的配置旁边的编辑。
在结账和账户编辑器中，点击
访问设置侧边栏。在强调色和按钮部分中，点击强调色或按钮旁边的颜色框以打开颜色选择器，然后选择一种颜色或输入十六进制代码。
点击保存。
移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分中，轻触您要自定义的配置上的编辑。
在结账和账户编辑器中，轻触设置。
在强调色和按钮部分，轻触强调色或按钮旁边的颜色框，打开颜色选择器，然后选择颜色或输入十六进制代码。
轻触保存或 ✓。
更改结账布局
默认情况下，您商店的结账布局设置为单页结账。您可以从 Shopify 后台在单页结账和三页结账之间进行切换。在更改结账布局之前，请查看单页结账和三页结账之间的差异。
当您切换结账布局时，结账和账户编辑器中的预览不会实时显示。保存更改后，请导航到您的在线店面结账页面以查看新的结账布局。
步骤：
桌面版
在 Shopify 后台中，转至设置 > 结账。
在配置部分中，点击您要自定义的配置旁边的编辑。
在结账和账户编辑器中，点击齿轮图标以访问设置侧边栏。
在结账布局部分，点击当前布局以打开结账布局选项。
点击单页结账或三页结账以设置结账布局。
点击保存。
移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分，轻触自定义。
在结账和账户编辑器中，轻触齿轮图标以访问设置侧边栏。
在结账布局部分，轻触单页结账或三页结账以设置结账布局。
轻触保存或 ✓。
管理再次购买按钮
您的订单状态页面上会显示一个再次购买按钮，方便客户重新订购已购买的商品。
步骤：
在 Shopify 后台中，转至设置 > 结账。
在配置部分，点击要自定义的配置旁边的自定义。
在结账和账户编辑器中，点击设置图标。
在再次购买按钮部分，打开或关闭此按钮。
在移动设备上默认显示折扣码字段
默认情况下，当客户在移动设备上结账时，订单摘要和折扣码字段是隐藏的。客户可以轻触显示订单摘要来展开完整的订单摘要详细信息并显示折扣码字段，以便将折扣码或礼品卡代码添加到其订单中。
您可以更改默认行为，以在移动设备上结账时始终显示订单摘要和折扣码字段。客户可以轻触隐藏订单摘要来隐藏折扣码字段。
您的结账必须使用三页结账布局才能访问此设置。
步骤：
桌面版
在 Shopify 后台中，转至设置 > 结账。
在配置部分中，点击您要自定义的配置旁边的编辑。
在结账和账户编辑器中，点击分区图标以访问分区侧边栏。
在信息、发货或支付页面上，点击订单摘要。
激活始终显示折扣码字段设置。
点击保存。
移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分中，轻触您要自定义的配置上的编辑。
在结账和账户编辑器中，轻触分区。
在信息、发货或支付页面上，轻触订单摘要。
激活始终显示折扣码字段设置。
轻触保存或 ✓。
向结账页面添加块
您可以使用块将自定义横幅或忠诚度奖励等功能添加到客户结账体验中。某些结账应用（包括在结账流程中自定义信息、发货和支付页面的应用）仅适用于 Shopify Plus 套餐的商店。在选择要添加到结账流程的应用时，请参阅结账应用可用性。
您可以使用分区侧边栏或应用侧边栏将现有块直接添加到页面上的分区中。
详细了解如何使用应用自定义结账配置。
使用分区侧边栏添加块
您可以使用分区侧边栏将已安装应用中的块添加到当前正在查看的页面。只有可安装到页面或分区上的块才会显示为可选选项。
步骤：
桌面版
以访问分区侧边栏。移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分，在要自定义的结账配置上轻触自定义。
在结账和账户编辑器中，选择要向其添加应用的页面，然后轻触分区。
在要向其添加应用的分区中，轻触⊕ 添加块。
轻触您想添加的块。
根据需要自定义块：
- 若要重新排列块的位置，请在分区列表中向上或向下拖放该块，或使用预览窗口中的移动按钮。
- 轻触块以配置任何块设置。
轻触保存或 ✓。
使用应用侧边栏添加块
您可以使用 应用 侧边栏，将已安装应用中的内容块添加到当前正在查看的页面。添加内容块时，只有支持安装特定内容块的页面才会显示为选项。
详细了解如何在结账和账户编辑器中使用应用侧边栏。
步骤：
桌面版
以访问应用侧边栏。移动版
在 Shopify app 中，轻触
，然后轻触 设置。在商店设置部分，轻触结账。
在配置部分，在要自定义的结账配置上轻触自定义。
在结账和账户编辑器中，轻触应用。
在要添加的块旁边，轻触 ⊕。
在添加到弹出窗口中，轻触要将块添加到的页面。
根据需要自定义块：
- 若要重新排列块的位置，请使用预览窗口中的移动按钮。
- 配置任何块设置。
轻触保存或 ✓。