自定义结账样式

已于 Sep 07, 2024 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/checkout-settings/customize-checkout-configurations/checkout-style。

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

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

本页相关主题

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

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

  • 在您选择某一套餐并创建第一个产品之前，后台结账设置部分中的配置区域会被隐藏。
  • 如果您使用 Shopify Plus，则可以使用 Checkout Branding API 执行高级结账品牌营销自定义。

  • 如果您需要自定义购物车和结账方面的帮助，您可以聘请 Shopify 合作伙伴。详细了解如何聘请 Shopify 合作伙伴。

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

上传横幅的背景图片

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。

  2. 在配置部分，点击要自定义的结账配置旁边的自定义。

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

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

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

  6. 点击保存。

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

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

  7. 可选：在结账标头部分，通过以下设置调整 logo：

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

  8. 轻触保存。

  1. 在 Shopify 应用中，点击 ☰ 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在配置部分，点击要自定义的结账上的自定义。
  4. 在结账和账户编辑器中，点击设置。
  5. 在 logo 部分，点击添加图片。
  6. 点击添加图片以上传图片文件，或从库中选择现有图片。

  7. 可选：在结账标头部分，通过以下设置调整 logo：

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

  8. 轻触保存。

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

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

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。

  2. 在配置部分，点击要自定义的结账配置旁边的自定义。

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

  4. 在背景 1 部分，添加背景色或图片：

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

  5. 点击保存。

  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在配置部分，点击要自定义的结账上的自定义。
  4. 在结账和账户编辑器中，点击设置。

  5. 在背景 1 部分，添加背景色或图片。

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

  6. 轻触保存。

  1. 在 Shopify 应用中，点击 ☰ 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在配置部分，点击要自定义的结账上的自定义。
  4. 在结账和账户编辑器中，点击设置。

  5. 在背景 1 部分，添加背景色或图片。

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

  6. 轻触保存。

更改表单字段的颜色

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。

  2. 在配置部分，点击要自定义的结账配置旁边的自定义。

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

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

  5. 点击保存。

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

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

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

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。

  2. 在配置部分，点击要自定义的结账配置旁边的自定义。

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

  4. 在背景 2 部分，添加背景色或图片：

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

  5. 点击保存。

  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在配置部分，点击要自定义的结账上的自定义。
  4. 在结账和账户编辑器中，点击设置。

  5. 在背景 2 部分，添加背景色或图片：

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

  6. 轻触保存。

  1. 在 Shopify 应用中，点击 ☰ 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在配置部分，点击要自定义的结账上的自定义。
  4. 在结账和账户编辑器中，点击设置。

  5. 在背景 2 部分，添加背景色或图片：

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

  6. 轻触保存。

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

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。

  2. 在配置部分，点击要自定义的结账配置旁边的自定义。

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

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

  5. 点击保存。

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

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

添加图片替代文本

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

步骤：

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

更改结账页面的字体

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。

  2. 在配置部分，点击要自定义的结账配置旁边的自定义。

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

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

  5. 点击保存。

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

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

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。

  2. 在配置部分，点击要自定义的结账配置旁边的自定义。

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

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

  5. 点击保存。

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

更改结账布局

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

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。

  2. 在配置部分，点击要自定义的结账配置旁边的自定义。

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

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

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

  6. 点击保存。

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

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

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

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

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。

  2. 在配置部分，点击要自定义的结账配置旁边的自定义。

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

  4. 在信息、发货或付款页面上，点击订单摘要。

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

  6. 点击保存。

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

将应用块添加到结账页面

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

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。

  2. 在配置部分，点击要自定义的结账配置旁边的自定义。

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

  4. 点击 ⊕ 添加应用块。

  5. 在适用于此页面的应用部分，点击要添加到结账页面的应用。应用会被自动放置在页面的推荐区域中。

  6. 点击保存。

  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在配置部分，点击要自定义的结账上的自定义。
  4. 在结账和账户编辑器中，选择要添加应用的页面，然后点击分区。
  5. 轻触 ⊕ 应用块。
  6. 在适用于此页面的应用部分，轻触要添加到结账页面的应用。应用会被自动放置在页面的推荐区域中。
  7. 轻触保存。
  1. 在 Shopify 应用中，点击 ☰ 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在配置部分，点击要自定义的结账上的自定义。
  4. 在结账和账户编辑器中，选择要添加应用的页面，然后点击分区。
  5. 轻触 ⊕ 应用块。
  6. 在适用于此页面的应用部分，轻触要添加到结账页面的应用。应用会被自动放置在页面的推荐区域中。
  7. 轻触保存。

准备好开始使用 Shopify 进行销售了吗？

免费试用