自定义结帐样式

如果使用在线商店销售产品,则可以在主题编辑器中自定义结帐页面的样式:添加公司徽标,更改颜色或选择新字体,以使结帐与业务相匹配。

即使想要给结帐页面添加一些颜色等,但最好保持设计简单。客户将使用这些页面为订单设置运输和付款信息,所以您不要分散他们的注意力或使信息难以阅读,尽量使用图片具有高对比度的颜色。

备注

在选择付费计划并创建第一个产品之后,在checkout设置部分的Customize checkout会显示出来,

给横幅添加/上传背景图片

在每个结帐页面的顶部,横幅显示商店名称,该横幅的背景图像是可以更改的,要选择与您的品牌相匹配的图片。例如,如果销售珠宝,那么彩色珠子的图像可能是一个很好的匹配,分辨率为1000 x 400像素横幅图像看起来效果最佳。

Desktop操作步骤:

1、在Shopify后台中,转到 Settings > Checkout
2、在 Style部分中,单击Customize checkout以打开主题编辑器
3、在BANNER部分中,单击Upload image,或选择已上载到库中的图像。
4、点击Save
iPhone&Android操作步骤:

1、在Shopify应用程序中,转到Store > Settings
2、在Store settings下,点击Checkout
3、在Style部分中,点击Customize checkout以打开主题编辑器。
4、在BANNER部分,点击Upload image,或选择您已上传到图书馆的图片。
5、点击Save

在结帐页面添加徽标

可以将商店徽标添加到结帐页面。如果使用横幅图片,则徽标将显示在其上方,可以将徽标放在结帐页面上横幅区域的左侧、右侧或中央。

Desktop操作步骤:

1、在Shopify后台中,转到Settings > Checkout
2、在 Style部分中,单击Customize checkout以打开主题编辑器。
3、在LOGO部分中,单击Upload image,或选择已上载到库中的图像。
4、选择徽标的位置。
5、选择徽标的大小。
6、点击Save




iPhone&Android操作步骤:

1、在Shopify应用程序中,转到Store > Settings
2、在Store settings下,点击Checkout
3、在Style部分中,点击Customize checkout以打开主题编辑器。
4、在 LOGO 部分,点击Upload image,或选择您已上传到图书馆的图片。
5、选择徽标的位置。
6、选择徽标的大小。
7、点击Save

将背景图像或颜色添加到主要内容区域

可以将背景图像或颜色添加到结帐页面的主要内容区域。这是客户将输入其运输和付款信息的区域,因此要确保可以清楚地阅读背景中的字段。注意:无法同时添加背景图像和颜色。

Desktop操作步骤:

1、在Shopify后台中,转到Settings > Checkout
2、在Style部分中,单击Customize checkout以打开主题编辑器
3、在MAIN CONTENT AREA部分中,添加背景颜色或图像。

  • 如果要添加颜色,单击Background color旁边的框打开颜色选择器,然后选择颜色或输入十六进制代码。
  • 如果要添加图像,单击Upload image,或选择已上载到库中的图像。较小的图像将在背景上垂直和水平重复,如瓷砖。

4、点击Save
iPhone&Android操作步骤:

1、在Shopify app中,转到Store > Settings
2、在Store settings下,点击Checkout
3、在Style部分中,点击Customize checkout以打开主题编辑器。
4、在MAIN CONTENT AREA部分中,添加背景颜色或图像

  • 如果要添加颜色,点击Background color旁边的框打开颜色选择器,然后选择颜色或输入十六进制代码。
  • 如果要添加图像,点击Upload image,或选择已上载到库中的图像。较小的图像将在背景上垂直和水平重复。

5、点击Save



更改表单区域的颜色

可以更改字段的颜色,使其为白色或透明。字段透明,以便显示背景图像。确保可以清楚地阅读字段中的文本。

Desktop操作步骤:

1、在Shopify后台中,转到Settings > Checkout
2、在 Style部分中,单击Customize checkout以打开主题编辑器。
3、在MAIN CONTENT AREA部分中,单击Form fields下拉列表以选择所需的颜色。
4、点击Save
iPhone&Android操作步骤:

1、在Shopify应用程序中,转到 Store > Settings

2、在Store settings下,点击Checkout

3、在 Style部分中,点击Customize checkout以打开主题编辑器。

4、在MAIN CONTENT AREA部分中,点击Form fields下拉列表以选择所需的颜色。

5、点击Save

在订单摘要中添加背景图像或颜色

当客户在结帐页面上点击Show order summary时,会显示他们购买的产品列表。可以在订单摘要中添加背景图像或颜色。请务必预览您的选择,以确保对订单摘要的显示方式感到满意。可以在主题编辑器中单击预览上的how order summary

Desktop操作步骤:

  1. Click Save.

1、在Shopify后台中,转到Settings > Checkout
2、在Style部分中,单击Customize checkout以打开主题编辑器。
3、在ORDER SUMMARY部分中,添加背景颜色或图像。

  • 如果要添加颜色,请单击Background color旁边的框打开颜色选择器,然后选择颜色或输入十六进制代码。
  • 如果要添加图像,请击 Upload image,或选择已上载到库中的图像。较小的图像将在背景上垂直和水平重复,如瓷砖。

4、点击Save
iPhone&Android操作步骤:

1、在Shopify应用程序中,转到 Store > Settings
2、在Store settings下,点击Checkout
3、在Style部分中,点击Customize checkout以打开主题编辑器。
4、在ORDER SUMMARY部分中,添加背景颜色或图像

  • 如果要添加颜色,点击Background color旁边的框打开颜色选择器,然后选择颜色或输入十六进制代码。
  • 如果要添加图像,点击Upload image,或选择已上载到库中的图像。较小的图像将在背景上垂直和水平重复。

5、点击Save



从结帐页面更改或删除图像

可以更改或删除添加到结帐页面的任何图像。

Desktop操作步骤:
1、在Shopify后台中,转到 Settings > Checkout
2、在Style部分中,点击 Customize checkout以打开主题编辑器。
3、在要替换的图像下,点击Update并上载图像或从库中选择一个图像。
4、点击Save
iPhone&Android操作步骤:

1、在Shopify应用程序中,转到Store > Settings
2、在Store settings下,点击Checkout
3、在Style部分中,点击Customize checkout以打开主题编辑器。
4、在要替换的图像下,点击Update并上传图像,或从库中选择一个图像。
5、点击Save
要删除图像,请单击图像下方的Remove。这不会从Shopify中删除图像。

添加图片替代文字

要想对结帐页面上的图片感到满意,最好添加图片替换文字。此文本有利于Shopify商店SEO优化。

步骤如下:

1、在图像下,点击Update,然后选择Edit image

2、输入图像的替代文字。为图像选择一个简短的描述性标题。

3、点击Save

更改结帐页面上的字体

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




Desktop操作步骤:

1、在Shopify后台中,转到Settings > Checkout

2、在Style部分中,点击Customize checkout以打开主题编辑器。

3、在TYPOGRAPHY部分中,单击Headings下拉列表或Body下拉列表,然后选择一种字体。

4、点击Save

iPhone&Android操作步骤:

1、在Shopify应用程序中,转到Store > Settings

2、在Store settings下,点击Checkout

3、在Style部分中,点击Customize checkout以打开主题编辑器。

4、在 TYPOGRAPHY 部分中,点击Headings下拉列表或Body下拉菜单,然后选择一种字体。

5、点击Save

在结帐页面上更改按钮和强调颜色

可以更改按钮、错误消息和着重符号的颜色,例如结帐页面上的链接。如果更改颜色,请确保根据主要内容区域和订单摘要的背景,可以清楚地阅读文本。

Desktop操作步骤:
1、在Shopify后台中,转到Settings > Checkout
2、在Style部分中,点击Customize checkout以打开主题编辑器。
3、在COLORS部分中,点击AccentsButtonsErrors旁边的颜色框以打开颜色选择器,然后选择颜色或输入十六进制代码。
4、点击Save
iPhone&Android操作步骤:
1、在Shopify应用程序中,转到Store > Settings
2、在Store settings下,点按Checkout
3、在 Style部分中,点击Customize checkout以打开主题编辑器。
4、在COLORS部分中,点击AccentsButtonsErrors旁边的颜色框以打开颜色选择器,然后选择颜色或输入十六进制代码。
5、点击Save