自定义结账样式

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

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

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

本页相关主题

上传横幅的背景图片

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。
  2. 在结账样式部分，点击自定义结账以打开模板编辑器。
  3. 在模板编辑器中，点击齿轮图标以访问模板设置。
  4. 点击结账。
  5. 在横幅部分，点击选择图片。
  6. 点击添加图片以上传图片文件，或选择已上传到库中的图片。
  7. 单击保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在横幅部分，点击选择图片。
  7. 点击添加图片以上传图片文件，或选择已上传到库中的图片。
  8. 轻触保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在横幅部分，点击选择图片。
  7. 点击添加图片以上传图片文件，或选择已上传到库中的图片。
  8. 轻触保存。

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。
  2. 在结账样式部分，点击自定义结账以打开模板编辑器。
  3. 在模板编辑器中，点击齿轮图标以访问模板设置。
  4. 点击结账。
  5. 在 logo 部分，点击选择图片。
  6. 点击添加图片以上传图片文件，或选择已上传到库中的图片。
  7. 选择 logo 位置。
  8. 选择 logo 大小。
  9. 单击保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在 logo 部分，点击选择图片。
  7. 点击添加图片以上传图片文件，或选择已上传到库中的图片。
  8. 选择 logo 位置。
  9. 选择 logo 大小。
  10. 轻触保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在 logo 部分，点击选择图片。
  7. 点击添加图片以上传图片文件，或选择已上传到库中的图片。
  8. 选择 logo 位置。
  9. 选择 logo 大小。
  10. 轻触保存。

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

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。
  2. 在结账样式部分，点击自定义结账以打开模板编辑器。
  3. 在模板编辑器中，点击齿轮图标以访问模板设置。
  4. 点击结账。

  5. 在主要内容区域部分中，添加背景色或图片。

    • 如果您要添加颜色，请点击背景色旁边的框以打开颜色选择器，然后选择一种颜色或输入一个十六进制代码。
    • 如果您要添加图片，请点击选择图片 > 添加图片以上传图片文件，或选择已上传到库中的图片。较小的图片会在背景上以垂直和水平方式重复排列，与图块类似。

  6. 单击保存。

  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。

  6. 在主要内容区域部分中，添加背景色或图片。

    • 如果您要添加颜色，请点击背景色旁边的框以打开颜色选择器，然后选择一种颜色或输入一个十六进制代码。
    • 如果您要添加图片，请点击选择图片 > 添加图片以上传图片文件，或选择已上传到库中的图片。较小的图片会在背景上以垂直和水平方式重复排列，与图块类似。

  7. 轻触保存。

  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。

  6. 在主要内容区域部分中，添加背景色或图片。

    • 如果您要添加颜色，请点击背景色旁边的框以打开颜色选择器，然后选择一种颜色或输入一个十六进制代码。
    • 如果您要添加图片，请点击选择图片 > 添加图片以上传图片文件，或选择已上传到库中的图片。较小的图片会在背景上以垂直和水平方式重复排列，与图块类似。

  7. 轻触保存。

更改表单字段的颜色

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。
  2. 在结账样式部分，点击自定义结账以打开模板编辑器。
  3. 在模板编辑器中，点击齿轮图标以访问模板设置。
  4. 点击结账。
  5. 在主要内容区域部分中，点击表单字段下拉菜单以选择所需的颜色。
  6. 单击保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在主要内容区域部分，点击表单字段下拉菜单以选择所需的颜色。
  7. 轻触保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在主要内容区域部分，点击表单字段下拉菜单以选择所需的颜色。
  7. 轻触保存。

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

当客户在结账页面上点击显示订单摘要时，会显示他们要购买的产品的一个列表。您可以向订单摘要添加背景图片或颜色。请务必预览您自己的选择，从而确保您对订单摘要的外观感到满意。您可以在模板编辑器中的预览上点击显示订单摘要。

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。
  2. 在结账样式部分，点击自定义结账以打开模板编辑器。
  3. 在模板编辑器中，点击齿轮图标以访问模板设置。
  4. 点击结账。

  5. 在订单摘要部分中，添加背景色或图片。

    • 如果您要添加颜色，请点击背景色旁边的框以打开颜色选择器，然后选择一种颜色或输入一个十六进制代码。
    • 如果您要添加图片，请点击选择图片 > 添加图片以上传图片文件，或选择已上传到库中的图片。较小的图片会在背景上以垂直和水平方式重复排列，与图块类似。

  6. 单击保存。

  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。

  6. 在订单摘要部分中，添加背景色或图片。

    • 如果您要添加颜色，请点击背景色旁边的框以打开颜色选择器，然后选择一种颜色或输入一个十六进制代码。
    • 如果您要添加图片，请点击选择图片 > 添加图片以上传图片文件，或选择已上传到库中的图片。较小的图片会在背景上以垂直和水平方式重复排列，与图块类似。

  7. 轻触保存。

  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。

  6. 在订单摘要部分中，添加背景色或图片。

    • 如果您要添加颜色，请点击背景色旁边的框以打开颜色选择器，然后选择一种颜色或输入一个十六进制代码。
    • 如果您要添加图片，请点击选择图片 > 添加图片以上传图片文件，或选择已上传到库中的图片。较小的图片会在背景上以垂直和水平方式重复排列，与图块类似。

  7. 轻触保存。

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

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。
  2. 在结账样式部分，点击自定义结账以打开模板编辑器。
  3. 在模板编辑器中，点击齿轮图标以访问模板设置。
  4. 点击结账。
  5. 在要替换的图片下方，点击更改以从库中选择图片，或浏览免费图片。
  6. 单击保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在要替换的图片下方，点击更改以从库中选择图片，或浏览免费图片。
  7. 轻触保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在要替换的图片下方，点击更改以从库中选择图片，或浏览免费图片。
  7. 轻触保存。

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

添加图片替代文本

直到您对结账页面上的图片感到满意后，最好添加图片替代文本。此文本可以帮助提高可访问性和 SEO。详细了解搜索引擎优化。

步骤：

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

更改结账页面的字体

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。
  2. 在结账样式部分，点击自定义结账以打开模板编辑器。
  3. 在模板编辑器中，点击齿轮图标以访问模板设置。
  4. 点击结账。
  5. 在字体部分中，点击标题下拉菜单或正文下拉菜单，然后选择一种字体。
  6. 单击保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在字体部分，点击标题下拉菜单或正文下拉菜单，然后选择一种字体。
  7. 轻触保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在字体部分，点击标题下拉菜单或正文下拉菜单，然后选择一种字体。
  7. 轻触保存。

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

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

步骤：

  1. 在 Shopify 后台中，转至设置 > 结账。
  2. 在结账样式部分，点击自定义结账以打开模板编辑器。
  3. 在模板编辑器中，点击齿轮图标以访问模板设置。
  4. 点击结账。
  5. 在颜色部分中，点击主题色、按钮或错误旁边的颜色框以打开颜色选择器，然后选择一种颜色或输入一个十六进制代码。
  6. 单击保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在颜色部分，点击主题色、按钮或错误旁边的颜色框以打开颜色选择器，然后选择一种颜色或输入一个十六进制代码。
  7. 轻触保存。
  1. 在 Shopify 应用中，点击 ... 按钮，然后点击设置。
  2. 在商店设置部分中，点击结账。
  3. 在结账样式部分，点击自定义结账以打开模板编辑器。
  4. 在模板编辑器中，点击齿轮图标以访问模板设置。
  5. 点击结账。
  6. 在颜色部分，点击主题色、按钮或错误旁边的颜色框以打开颜色选择器，然后选择一种颜色或输入一个十六进制代码。
  7. 轻触保存。

向结账时的售后页面添加功能

您可以使用售后应用为客户结账体验增添客户调查或增销优惠等功能。这些应用会在客户完成付款之后（但在订单确认页面显示之前）增添内容。

若要向售后页面添加功能，您需要安装和配置结账应用，然后在结账设置中选择该应用以在售后页面上使用。

一次只能使用一个结账应用来添加售后功能。如果您安装了多个具有售后功能的应用，您可以在结账设置中选择要使用的应用。

安装结账应用以添加售后功能

若要向售后页面添加功能，您需要在结账时使用支持售后功能的第三方应用。

如果您需要有关第三方应用的帮助，则需要联系应用开发者。

步骤：

  1. 转到 Shopify App Store，搜索适合您业务的售后应用。
  2. 点击添加应用。如果您未登录 Shopify 账户，则系统会提示您登录。
  3. 点击安装应用。
  4. 转到 Shopify 后台的应用部分，然后点击结账应用的名称。
  5. 输入所需的任何配置设置。

选择要在售后页面上使用的应用

安装和配置结账应用后，您需要在结账设置中选择该应用以在售后页面上使用。

您还可以更改要在结账设置中使用的应用。

步骤：

  1. 在 Shopify 后台，点击设置。
  2. 点击结账。
  3. 在售后页面部分中，选择要使用的结账应用。

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

免费试用