使用 Checkout Blocks 中的品牌营销编辑器
您可以使用 Checkout Blocks 中的品牌营销编 辑器(由 Checkout Branding API 提供技术支持)自定义结账页面和账户页面的外观,无需修改任何代码。
您可以使用品牌营销编辑器编辑任何结账配置的颜色和结账元素。使用品牌营销编辑器对结账设计所做的更改将应用于结账的所有页面,包括感谢页面、订单状态页面和新客户账户页面。
若要在 Shopify 后台启用品牌营销编辑器,请点击应用>Checkout Blocks,然后点击品牌营销编辑器。
自定义结账页面颜色
在颜色部分,您可以自定义结账页面的基本颜色。如果您想对设计进行更细致的编辑,还可以自定义最多 4 种应用于各个部分的配色方案。您可以编辑颜色类型,包括主题色(用于链接等交互式元素)和品牌颜色(用于主要按钮和辅助按钮等元素)。
步骤:
Customize global colors
- 通过 Shopify 后台前往应用>Checkout Blocks。
- 点击品牌营销编辑器。
- 在颜色部分,点击全局颜色。
-
若要覆盖任何现有的结账页面颜色,在全局颜色部分,点击 ⊕ 图标,然后通过执行以下任一操作来选择您想要的颜色:
- 使用颜色选择器选择颜色。
- 在可用字段中键入十六进制颜色代码。
点击保存。
Customize color schemes
- 通过 Shopify 后台前往应用>Checkout Blocks。
- 点击品牌营销编辑器。
- 在颜色部分,点击方案 1、方案 2、方案 3 或方案 4 自定义特定配色方案。
-
选择要自定义的任何以下组件:
- 主要颜色
- 表单控件
- 主要按钮
- 辅助按钮
-
在基本部分,点击要自定义的颜色类型旁边的 ⊕ 图标,然后通过执行以下任一操作来选择您想要的颜色:
- 使用颜色选择器选择颜色。
- 在可用字段中键入十六进制颜色代码。
-
可选:如果您要编辑表单控件、主要按钮或辅助按钮的方案,则您还可以自定义选择时或悬停时交互行为的颜色。点击要自定义的颜色类型旁边的 ⊕ 图标,然后通过执行以下任一操作来选择您想要的颜色:
- 使用颜色选择器选择颜色。
- 在可用字段中键入十六进制颜色代码。
点击保存。
自定义结账元素
在品牌营销编辑器的自定义部分,您可以编辑结账页面的以下元素:
- 网站图标:选择在结账期间在浏览器标签页中向客户显示的图标。
- 全局:调整所有元素(表单输入、按钮和卡片)的圆角半径。
- 标头和 logo:在结账页面中选择标头位置,以及是否显示页面路径、购物车链接和 logo。
- 主要:将设计方案应用于结账页面的主要内容区域,包括背景图片、边框宽度和配色方案。
- 订单摘要:将设计方案应用于包含客户订单摘要的结账 页面侧边栏,包括背景图片、边框宽度和配色方案。
- 页脚:在结账页面中选择页脚宽度,以及是否显示商店政策。
- 版式:最多可为 3 个级别的标头选择字体大小、字体系列和字体重量、大小、字间距和字母大小写。
- 按钮:选择主要按钮和辅助按钮的填充、边框和样式。
- 表单:自定义结账表单输入的样式,例如复选框、文本字段和列表中选择的选项。
- 产品缩略图:调整结账页面中产品图片的边框和圆角半径样式。
步骤:
- 通过 Shopify 后台前往应用>Checkout Blocks。
- 点击品牌营销编辑器。
- 在自定义部分,点击要自定义的任何元素,例如标头和 logo。
- 使用可用的自定义选项,根据偏好调整结账元素。
- 点击保存。
切换结账配置
打开品牌营销编辑器时,您将默认编辑当前的实时结账配置。但是,您可以使用品牌营销编辑器更改要编辑的结账配置,也可以创建新的结账配置。
详细了解如何管理实时和草稿结账配置。
步骤:
- 通过 Shopify 后台前往应用>Checkout Blocks。
- 点击品牌营销编辑器。
- 点击当前结账配置的名称打开一个下拉菜单,其中包含实时配置和任何草稿配置的列表,然后选择要自定义的结账配置:
- 选择要编辑的现有配置。
- 点击 ⊕ 创建新配置重定向到 Shopify 后台的结账设置。
预览结账
您随时可以预览在品牌营销编辑器中所做的更改:选择要预览的结账配置,然后点击预览。应用了所有更改的结账和账户编辑器在单独的标签页中启动,因此您可以预览它们在结账页面中的显示方式。
步骤:
- 通过 Shopify 后台前往应用>Checkout Blocks。
- 点击品牌营销编辑器。
- 对要调整的结账配置颜色或结账元素进行任何自定义。
- 点击预览。
导出和导入结账配置
您可以使用 JSON 文件导出和导入结账配置。
导出结账配置:
- 通过 Shopify 后台前往应用>Checkout Blocks。
- 点击品牌营销编辑器。
- 使用品牌营销编辑 器选择已应用自定义的结账配置。
- 点击更多操作 > 导出配置。
结账配置会以 .json
格式下载到本地设备。
导入结账配置:
- 通过 Shopify 后台前往应用>Checkout Blocks。
- 点击品牌营销编辑器。
- 选择要应用导入的品牌营销配置文件的结账配置。
- 点击更多操作 > 导入配置。
-
在导入结账品牌营销对话框中,上传品牌营销 JSON 文件:
- 点击添加文件。
- 从设备中选择相应的 JSON 文件。
- 点击导入并继续。
查看预加载的自定义配置。请根据需要修改。
点击保存。
将结账样式重置为默认值
使用品牌营销编辑器编辑颜色或结账元素时,您可以点击已更改颜色或元素旁边的重置将特定值重置为默认值。
您随时都可以将整个结账配置品牌营销重置为 Shopify 默认值。重置结账配置会清除品牌营销编辑器所有页面的所有自定义。此操作无法撤销。
步骤:
- 通过 Shopify 后台前往应用>Checkout Blocks。
- 点击品牌营销编辑器。
- 选择要重置的结账配置。
- 点击重置为默认值。
- 在重置为默认样式? 对话框中,点击继续。