装修编辑器使用指南

Genstore 提供可视化模板编辑器，支持商家、运营及设计人员对商店的页面结构、内容模块与整体视觉风格进行日常调整和个性化设置，无需编写代码即可完成操作。

模版编辑器分为两部分：

• 顶部工具栏：用于页面切换、设备预览、保存与退出等操作
• 左侧编辑栏：用于编辑页面结构、设置视觉样式与集成应用组件

顶部工具栏

位于模板编辑器上方，用于管理当前模板、页面预览、操作保存等。

功能名称	功能说明
模板名称	查看当前编辑的模板名称
模板状态	显示模板状态，已发布模板显示 实时视图，未发布模板显示 草稿
预览	可预览当前模版的实际展示效果
市场切换	切换适用的市场（适用于 多市场商店）
语言切换	预览不同语言环境下的页面效果（启用多语言时）
页面选择器	选择要编辑的页面类型，如首页、产品页、系列页、自定义页面等
模板切换	在当前页面下切换不同模板，或创建新模板
设备预览	切换预览设备：桌面、平板、手机
撤销/恢复	撤销或恢复当前会话中未保存的更改
保存	保存所有修改，建议每次编辑后及时保存，防止数据丢失
返回	返回模板管理首页，退出编辑器（未保存更改不会保留）

模版编辑器

选择页面或者页面下的模板后，可以在模板编辑器顶栏的页面选择器中访问所有模板。

操作步骤

1. 登录 Genstore 后台，进入：在线商店 -> 模板。
2. 点击目标模板后的 设计 按钮。
3. 点击顶部页面选择器的下拉页面类型（如主页、产品页、系列页）。
4. 在弹出的资源选择菜单中，选择具体资源（如具体的产品页或为该资源创建模版）。
5. 页面将自动刷新并呈现对应样式，您可继续编辑内容

TIP

撤销与恢复操作说明

• 编辑器支持实时撤销与恢复，帮助您快速还原误操作
• 功能仅适用于当前编辑会话中尚未保存的更改
• 无可操作时，按钮自动变为灰色不可点击

左侧边工具栏

左侧边栏是您编辑页面内容的核心区域，包含：

• 页面结构树
• 全局视觉设置
• 应用嵌入管理

页面结构树

在左侧编辑栏中，您可以查看并编辑当前模板的页面结构，包括页面的整体布局（分区）和每个分区内的内容模块（区块）。

Genstore 的页面结构默认由三个主要区域组成：

区域名称	内容说明
标头（Header）	Logo、导航菜单、公告栏、搜索框、购物车图标等。支持添加应用或 Liquid 内容
主体（Template）	页面主要内容区域，如产品、集合、图文模块、博客、自定义内容等
页脚（Footer）	版权信息、支付方式、社交图标、订阅表单等。支持添加应用或 Liquid 内容

TIP

所有页面模板共用相同的标头和页脚，在任一页面中修改后，其他页面将自动同步更新。

页面分区与块

在 Genstore 装修编辑器中，页面内容由多个 分区（Sections） 组成，每个分区下又可以包含一个或多个 区块（Blocks）。

• 分区 是页面的结构单元，用于承载完整功能区域，例如横幅、图文展示、产品推荐等。
• 区块 是分区中的内容组件，例如一张图片、一段文本、一个按钮等。部分分区支持添加多个区块，实现内容的灵活组合。

通过分区与区块的灵活组合，您可以自由排布页面结构，快速搭建出符合品牌风格的个性化页面。

分区设置功能

功能名称	功能说明
分区列表	显示页面上所有内容模块（如横幅、富文本、集合列表等）
添加分区	添加新的内容分区
拖动分区	拖动图标调整分区顺序
隐藏/显示	临时隐藏或展示某个分区
删除分区	从模板中移除该分区（需保存后生效）

区块

某些分区支持多个区块，用于灵活嵌套文本、图片、按钮等组件。

功能名称	功能说明
添加区块	向支持的分区中添加内容元素，如图文、按钮、媒体等
区块拖动	拖动区块调整顺序
删除区块	删除某一区块，不影响所在分区

管理分区与区块

拖动排序

1. 在左侧找到要移动的分区或区块。
2. 点击并按住左侧的拖动图柄。
3. 拖动至目标位置释放即可完成排序。

删除分区或区块

1. 点击目标模块，点击删除图标。
2. 点击顶部 保存 按钮，完成修改。

隐藏操作

1. 点击分区或块旁的 隐藏 按钮，可临时关闭该模块的前台展示。
2. 可在后续任意时间重新启用，无需重新添加内容。

全局设置

全局设置影响全站页面的整体视觉风格，包括颜色、字体、动画、社交链接等。

设置项	功能说明
颜色设置	设置网站主色、背景色、按钮色、链接色等
布局设置	设置页面内容区域的宽度与排列方式
动画设置	设置页面进入/滚动时的动效
图标设置	上传 Logo、Favicon 等图标资源
社交链接	添加 Facebook、Instagram、YouTube 等社交平台链接

应用嵌入

支持将 Genstore 或第三方开发的 应用 组件嵌入到页面特定区域，扩展页面功能。