构建器是什么
店面构建器是一个可视化编辑器,让你无需编写代码就能设计商店的每个页面。改动会在屏幕中央实时预览。在你点击发布之前,任何内容都不会触达买家。
构建器布局
构建器有三个区域:
- 左侧栏:五个选项卡以图标形式沿左边缘竖排。从上到下依次是市场(国家旗帜)、页面、区块、设置(齿轮),以及固定在最底部的 AI 助手(Amed)。
- 控制面板:当你选中某个区块或块时打开,显示它的每一项设置。
- 预览窗格:你的商店的实时视图,与买家看到的完全一致。
切换页面和市场
打开页面选项卡,在你可以编辑的页面之间切换:首页、产品页、落地页、合集页、购物车、结账页、感谢页、搜索页、政策页、联系页和 404 页。各页面的说明请参阅你可以编辑的页面。打开市场选项卡(第一个,旗帜图标)在你的市场之间切换。每个市场都有自己的模板,每个页面也有各自的撤销历史,因此在一个市场中的编辑绝不会影响另一个。
预览、视口和检查器
视口切换让你用全屏、桌面和移动按钮在不同宽度下预览。该切换只显示适合你当前窗口的选项,因此在窄屏上某些按钮会消失。顶部栏还有一个预览按钮(眼睛图标),可在新的浏览器标签页中打开你的正式商店,以及一个退出构建器按钮。
检查器模式默认开启(顶部栏中的光标图标处于高亮状态)。开启时,点击预览中的任意元素都会立即选中那个区块或块,并在控制面板中打开它,这是无需滚动侧边栏就能跳转到目标的最快方式。点击检查器按钮可将其关闭。
添加区块
- 打开当前页面的区块选项卡。
- 点击列表中的添加区块按钮(加号圆圈图标),或打开某个区块的菜单并选择在前面添加区块或在后面添加区块。
- 会打开一个选择器,列出你在此页面上仍可添加的每种区块类型。点击其中一种即可添加。
每种区块类型都有每页上限。一旦某种类型达到上限,它就会从选择器中消失;当某个位置已满时,添加区块按钮会被禁用,并带有一个提示,说明已达到上限。区块类型也是按页面区分的(例如英雄区或邮件订阅仅限首页)。完整的类型目录及其上限见区块与块。
在区块内添加块
选中一个区块,然后在其控制面板中点击添加块。块是区块内部的组成部件:文本、图片、按钮、布局组、分隔线等等。可用的块类型,以及每种你能添加多少个,因区块而异。
区块菜单(复制、克隆等)
要获取某个区块的全部操作,选中它并点击控制面板顶部的菜单图标,或在侧边栏右键点击该区块。菜单包含:
- 复制:复制整个区块(内容和样式)。
- 仅复制样式:只复制视觉样式。
- 粘贴:粘贴已复制的区块。提示会显示它将落在何处(后面、内部或覆盖)。当没有复制任何内容、已达上限,或该类型不被允许放在那个位置时,它会被禁用并附上原因。
- 仅粘贴样式:将已复制的样式应用到所选区块。类型不匹配或未复制任何内容时会被禁用。
- 克隆:在原件正下方放置一个副本,仅限当前页面。当区块的每页上限已达到时会被禁用。
- 隐藏 / 显示:切换可见性。隐藏的区块仍保留在你的模板中,但不向买家显示。
- 删除:移除区块。撤销可将其找回。
侧边栏行还直接带有一个眼睛图标(隐藏/显示)和一个垃圾桶图标(删除)。必需的区块不能被隐藏或删除,因此产品页上的产品信息和落地页上的落地页信息没有垃圾桶图标。
重排区块和块
在区块列表中,向上或向下拖动某个区块行,以更改它在页面上的位置。预览会立即更新。块也用同样的方式,在控制面板内拖动来重排。
将区块应用到所有页面
页眉、页脚、公告栏和自定义代码出现在每个页面上。要把一个编辑过的副本推送到各处,打开该区块的菜单并选择应用到所有页面。这会覆盖当前市场中每个已经包含它的页面上的对应区块(没有它的页面会被跳过)。它会直接写入你的正式商店,因此无法撤销。构建器会先请你确认。AI 助手也可以为你执行此操作,详见AI 构建器操作。
撤销、重做和保存
顶部栏有撤销和重做按钮。历史记录按市场和页面划分范围,因此在首页撤销不会影响产品页。键盘快捷键:Cmd/Ctrl + Z 撤销,Cmd/Ctrl + Shift + Z 或 Cmd/Ctrl + Y 重做,以及 Cmd/Ctrl + S 发布。
点击发布(右上角)将你的改动推送上线。当没有未保存的改动时,该按钮会被禁用。发布是按市场和页面进行的,因此发布首页不会发布产品页。
发布前要检查什么
- 切换到移动视图并滚动整个页面,因为大多数买家都在用手机。
- 检查文字与每个区块背景颜色的对比度。
- 确保每个图片块都选好了媒体文件,因为空的图片占位符在正式商店上会显示为一片空白。
- 确认按钮和菜单项链接到正确的目的地。
要让 AI 助手为你构建和编辑区块,请参阅使用 AI 助手构建。