自定义结账样式

如果您使用在线商店销售产品,则可以在结账和账户编辑器中自定义结账页面的样式。您可以添加公司 logo、更改颜色或选择新字体,使结账页面与您的业务匹配。

您为结账页面选择的一些品牌营销内容也会应用于您的新客户账户页面

自定义结账样式的注意事项

在自定义结账样式之前,请查看以下注意事项:

  • 在您选择某一套餐并创建第一个产品之前,后台结账设置部分中的配置区域会被隐藏。
  • 如果您使用 Shopify Plus,则可以使用 Checkout Branding API 执行高级结账品牌营销自定义。
  • 如果您需要自定义购物车和结账方面的帮助,您可以聘请 Shopify 合作伙伴。详细了解如何聘请 Shopify 合作伙伴

  • 虽然您可能希望为结账页面增添许多色彩和趣味,但最好采用简单的设计。您的客户将使用这些页面输入其订单的发货和付款信息,您不应该分散他们的注意力或使信息难以查看。选择对比度高的颜色,以及不会分散对页面上文字的注意力的图片。

上传横幅的背景图片

在每个结账页面的顶部,都会有一个横幅显示您的商店名称。您可以更改横幅的背景图片。请选择适合您的品牌的图片。例如,如果您销售的是珠宝,那么彩色珠子的图片可能就比较适合。分辨率为 1000 x 400 像素的横幅图片视觉效果最佳。

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,点击齿轮图标以访问设置侧边栏。

  4. 结账标头部分,点击背景图片选项上的添加图片

  5. 点击添加图片以上传图片文件,或从库中选择现有图片。

  6. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 结账标头部分,点击背景图片选项上的添加图片
  6. 点击添加图片以上传图片文件,或从库中选择现有图片。
  7. 轻触保存
Android
  1. Shopify 应用中,点击 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 结账标头部分,点击背景图片选项上的添加图片
  6. 点击添加图片以上传图片文件,或从库中选择现有图片。
  7. 轻触保存

您可以将商店 logo 添加到结账页面。如果您使用横幅图片,则 logo 会显示在横幅图片上方。您可以将 logo 置于结账页面上横幅区域的左侧、右侧或中央。

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,点击齿轮图标以访问设置侧边栏。

  4. logo 部分,点击添加图片

  5. 点击添加图片以上传图片文件,或从库中选择现有图片。

  6. 可选:在结账标头部分,通过以下设置调整 logo:

    • 使用 logo 最大宽度选择 logo 的大小(以像素为单位)。
    • 使用 logo 对齐方式选择 logo 是显示在横幅的左侧、中央还是右侧。
    • 使用 logo 位置选择 logo 在结账页面的显示位置。
  7. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. logo 部分,点击添加图片
  6. 点击添加图片以上传图片文件,或从库中选择现有图片。
  7. 可选:在结账标头部分,通过以下设置调整 logo:

    • 使用 logo 最大宽度选择 logo 的大小(以像素为单位)。
    • 使用 logo 对齐方式选择 logo 是显示在横幅的左侧、中央还是右侧。
    • 使用 logo 位置选择 logo 在结账页面的显示位置。
  8. 轻触保存

Android
  1. Shopify 应用中,点击 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. logo 部分,点击添加图片
  6. 点击添加图片以上传图片文件,或从库中选择现有图片。
  7. 可选:在结账标头部分,通过以下设置调整 logo:

    • 使用 logo 最大宽度选择 logo 的大小(以像素为单位)。
    • 使用 logo 对齐方式选择 logo 是显示在横幅的左侧、中央还是右侧。
    • 使用 logo 位置选择 logo 在结账页面的显示位置。
  8. 轻触保存

在主要内容区域中添加背景图片或颜色

您可以将背景图片或颜色添加到结账页面的主要内容区域。客户会在此区域中输入发货和付款信息,因此请确保在所用背景中您可清楚查看字段内容。

较小的图片会在背景上以垂直和水平方式重复排列,与图块类似。您无法同时添加背景图片和颜色。

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,点击齿轮图标以访问设置侧边栏。

  4. 背景 1 部分,添加背景色或图片:

    • 若要添加颜色,请点击背景色以打开颜色选择器,然后选择颜色或输入十六进制代码。
    • 若要添加图片,请在背景图片部分,点击添加图片。点击添加图片以上传图片文件,或从库中选择现有图片。
  5. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 背景 1 部分,添加背景色或图片。

    • 若要添加颜色,请点击背景色以打开颜色选择器,然后选择颜色或输入十六进制代码。
    • 若要添加图片,请在背景图片部分,点击添加图片。点击添加图片以上传图片文件,或从库中选择现有图片。
  6. 轻触保存

Android
  1. Shopify 应用中,点击 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 背景 1 部分,添加背景色或图片。

    • 若要添加颜色,请点击背景色以打开颜色选择器,然后选择颜色或输入十六进制代码。
    • 若要添加图片,请在背景图片部分,点击添加图片。点击添加图片以上传图片文件,或从库中选择现有图片。
  6. 轻触保存

更改表单字段的颜色

您可以更改字段的颜色,让它们以白色或透明方式显示。您可能需要让字段以透明方式显示,以使背景图片可见。请确保您可以清楚阅读字段中的文本。

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,点击齿轮图标以访问设置侧边栏。

  4. 颜色部分,转至表单字段和卡背景,然后点击透明白色

  5. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 颜色部分,转至表单字段和卡背景,然后点击透明白色
  6. 轻触保存
Android
  1. Shopify 应用中,点击 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 颜色部分,转至表单字段和卡背景,然后点击透明白色
  6. 轻触保存

为订单摘要添加背景图片或颜色

当客户在结账页面上点击显示订单摘要时,系统会显示他们要购买的产品的列表。您可以向订单摘要添加背景图片或颜色。您可以在模板编辑器的预览中点击显示订单摘要,确保订单摘要的显示方式符合您的需求。

较小的图片会在背景上以垂直和水平方式重复排列,与图块类似。

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,点击齿轮图标以访问设置侧边栏。

  4. 背景 2 部分,添加背景色或图片:

    • 若要添加颜色,请点击背景色以打开颜色选择器,然后选择颜色或输入十六进制代码。
    • 若要添加图片,请点击背景图片 > 添加图片。点击添加图片以上传图片文件,或从库中选择现有图片。
  5. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 背景 2 部分,添加背景色或图片:

    • 若要添加颜色,请点击背景色以打开颜色选择器,然后选择颜色或输入十六进制代码。
    • 若要添加图片,请在背景图片部分,点击添加图片。点击添加图片以上传图片文件,或从库中选择现有图片。
  6. 轻触保存

Android
  1. Shopify 应用中,点击 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 背景 2 部分,添加背景色或图片:

    • 若要添加颜色,请点击背景色以打开颜色选择器,然后选择颜色或输入十六进制代码。
    • 若要添加图片,请在背景图片部分,点击添加图片。点击添加图片以上传图片文件,或从库中选择现有图片。
  6. 轻触保存

更改或删除结账页面的图片

您可以更改或删除您添加到结账页面的任何图片。

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,点击齿轮图标以访问设置侧边栏。

  4. 在要替换的图片下方,点击更改以从库中选择图片,或浏览免费图片。

  5. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 在要替换的图片下方,点击更改以从库中选择图片,或浏览免费图片。
  6. 轻触保存
Android
  1. Shopify 应用中,点击 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 在要替换的图片下方,点击更改以从库中选择图片,或浏览免费图片。
  6. 轻触保存

若要删除图片,请点击更改 > 删除图片。这不会从 Shopify 中删除此图片。

添加图片替代文本

将图片添加到结账页面后,您可以添加图片替代文本。此文本可以帮助提高可访问性和 SEO。详细了解搜索引擎优化

步骤:

  1. 在要添加替代文本的图片上,点击编辑
  2. 替代文本下方,为图片输入替代文本。为图片选择简短的描述性标题。
  3. 点击保存

更改结账页面的字体

您可以从字体列表中进行选择,以便自定义结账页面。您无法更改结账页面上的文本颜色。

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,点击齿轮图标以访问设置侧边栏。

  4. 字体部分,点击标题下拉菜单或正文下拉菜单,然后选择一种字体。

  5. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 字体部分,点击标题下拉菜单或正文下拉菜单,然后选择一种字体。
  6. 轻触保存
Android
  1. Shopify 应用中,点击 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 字体部分,点击标题下拉菜单或正文下拉菜单,然后选择一种字体。
  6. 轻触保存

更改结账页面上的按钮和强调色

您可以更改结账页面上的按钮颜色、错误消息颜色和主题色(例如链接)。如果您更改了颜色,请确保您能够看清主要内容区域和订单摘要的背景中的文本。

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,点击齿轮图标以访问设置侧边栏。

  4. 颜色部分,点击主题色按钮错误旁边的颜色框以打开颜色选择器,然后选择颜色或输入十六进制代码。

  5. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 颜色部分,点击主题色按钮错误旁边的颜色框以打开颜色选择器,然后选择颜色或输入十六进制代码。
  6. 轻触保存
Android
  1. Shopify 应用中,点击 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,点击设置
  5. 颜色部分,点击主题色按钮错误旁边的颜色框以打开颜色选择器,然后选择颜色或输入十六进制代码。
  6. 轻触保存

更改结账布局

默认情况下,您商店中的结账布局设置为单页结账。您可以在 Shopify 后台切换单页结账和三页结账。更改结账布局前,请查看单页结账和三页结账之间的差异

切换结账布局时,结账和账户编辑器中的预览不会实时显示。保存更改后,请导航到店面结账页面来查看新结账布局。

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,点击齿轮图标以访问设置侧边栏。

  4. 结账布局部分,点击当前布局以打开结账布局选项。

  5. 点击单页结账三页式结账以设置结账布局。

  6. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击自定义
  4. 在结账和账户编辑器中,点击齿轮图标以访问设置侧边栏。
  5. 结账布局部分,点击单页结账三页结账以设置结账布局。
  6. 轻触保存
Android
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击自定义
  4. 在结账和账户编辑器中,点击齿轮图标以访问设置侧边栏。
  5. 结账布局部分,点击单页结账三页结账以设置结账布局。
  6. 轻触保存

在移动设备上默认显示折扣码

默认情况下,当客户在移动设备上结账时,订单摘要和折扣码字段处于隐藏状态。客户可以轻触显示订单摘要展开完整订单摘要详细信息并显示折扣码字段,以便向订单添加折扣码或礼品卡代码。

您可以更改默认行为,以便在移动设备上结账时始终显示订单摘要和折扣码字段。客户可以轻触隐藏订单摘要隐藏折扣码字段。

您的结账页面必须使用三页式结账布局来访问此设置。

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,点击分区图标以访问分区侧边栏。

  4. 信息发货付款页面上,点击订单摘要

  5. 激活始终显示折扣码字段设置。

  6. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,轻触分区
  5. 信息发货付款页面上,轻触订单摘要
  6. 激活始终显示折扣码字段设置。
  7. 轻触保存
Android
  1. Shopify 应用中,点击 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账上的自定义
  4. 在结账和账户编辑器中,轻触分区
  5. 信息发货付款页面上,轻触订单摘要
  6. 激活始终显示折扣码字段设置。
  7. 轻触保存

将应用块添加到结账页面

您可以使用应用块为客户结账体验添加自定义横幅或忠诚度奖励等功能。某些结账应用(包括可自定义结账流程中的信息、发货和付款页面的应用)仅适用于使用 Shopify Plus 套餐的商店。选择要添加到结账流程的应用时,请参阅结账应用可用性

您可以使用分区侧边栏或应用侧边栏直接将现有应用块添加到页面上的分区。

详细了解如何使用应用自定义结账配置

使用“分区”侧边栏添加应用块

您可以使用分区侧边栏将已安装应用的应用块添加到您当前查看的页面。只有可安装在页面或分区上的应用块才会显示为可选选项。

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,选择要添加应用的页面,然后点击分区图标以访问分区侧边栏。

  4. 在要添加应用的分区中,点击 ⊕ 添加应用块

  5. 点击您要添加的应用块。

  6. 根据需要自定义应用块:

    • 若要重新排列应用块的位置,请从分区列表中向上或向下拖放应用块,或使用预览窗口中的移动按钮。
    • 点击应用块以配置任何应用块设置
  7. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账配置旁边的自定义
  4. 在结账和账户编辑器中,选择要添加应用的页面,然后点击分区
  5. 在要添加应用的分区中,点击 ⊕ 添加应用块
  6. 点击您要添加的应用块。
  7. 根据需要自定义应用块:

    • 若要重新排列应用块的位置,请从分区列表中向上或向下拖放应用块,或使用预览窗口中的移动按钮。
    • 点击应用块以配置任何应用块设置
  8. 轻触保存

Android
  1. Shopify 应用中,点击 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账配置旁边的自定义
  4. 在结账和账户编辑器中,选择要添加应用的页面,然后点击分区
  5. 在要添加应用的分区中,点击 ⊕ 添加应用块
  6. 点击您要添加的应用块。
  7. 根据需要自定义应用块:

    • 若要重新排列应用块的位置,请从分区列表中向上或向下拖放应用块,或使用预览窗口中的移动按钮。
    • 点击应用块以配置任何应用块设置
  8. 轻触保存

使用“应用”侧边栏添加应用块

您可以使用应用侧边栏将已安装应用的应用块添加到您当前查看的页面。添加应用块时,只有支持安装特定应用块的页面会显示为选项。

详细了解如何在结账和账户编辑器中使用“应用”侧边栏

步骤:

桌面
  1. 在 Shopify 后台中,转至设置 > 结账

  2. 配置部分,点击您想要进行自定义操作的配置旁边的自定义

  3. 在结账和账户编辑器中,点击应用块图标以访问应用侧边栏。

  4. 在要添加的应用块旁,点击

  5. 添加到弹出窗口中,点击要将应用块添加到的页面。

  6. 根据需要自定义应用块:

  7. 点击保存

iPhone
  1. Shopify 应用中,点击 ... 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账配置旁边的自定义
  4. 在结账和账户编辑器中,点击应用
  5. 在要添加的应用块旁,点击
  6. 添加到弹出窗口中,点击要添加应用块的页面。
  7. 根据需要自定义应用块:

  8. 轻触保存

Android
  1. Shopify 应用中,点击 按钮,然后点击设置
  2. 商店设置部分中,点击结账
  3. 配置部分,点击要自定义的结账配置旁边的自定义
  4. 在结账和账户编辑器中,点击应用
  5. 在要添加的应用块旁,点击
  6. 添加到弹出窗口中,点击要添加应用块的页面。
  7. 根据需要自定义应用块:

  8. 轻触保存

没有找到您需要的答案?我们将为您提供帮助。