装修编辑器使用指南
Genstore 提供可视化模板编辑器，支持商家、运营及设计人员对商店的页面结构、内容模块与整体视觉风格进行日常调整和个性化设置，无需编写代码即可完成操作。
如何访问
- 登录 Genstore 后台，进入：在线商店 -> 模板。
- 点击目标模板后的 设计 按钮。
- 点击顶部页面选择器的下拉按钮，选择页面类型（如主页、产品页、系列页）。
- 对于部分页面，您可进一步选择具体模版（如具体的产品页或为该资源创建模版）。
- 页面将自动刷新并呈现对应样式，您可继续编辑内容。
模版编辑器分为两部分：
顶部工具栏
位于模板编辑器上方，用于管理当前模板、页面预览、操作保存等。
| 功能名称 | 功能说明 |
|---|---|
| 模板名称 | 查看当前编辑的模板名称 |
| 模板状态 | 显示模板状态，已发布模板显示 实时视图，未发布模板显示 草稿 |
| 预览 | 可预览当前模版的实际展示效果 |
| 市场切换 | 切换适用的市场（适用于 多市场商店） |
| 页面选择器 | 选择要编辑的页面类型，如首页、产品页、系列页、自定义页面等 |
| 模板切换 | 选择页面后，可进一步在当前页面下切换不同模板，或创建新模板 |
| 设备预览 | 切换预览设备：桌面、平板、手机 |
| 撤销/恢复 | 撤销或恢复当前会话中未保存的更改 - 功能仅适用于当前编辑会话中尚未保存的更改 - 无可操作时，按钮自动变为灰色不可点击 |
| 保存 | 保存所有修改，建议每次编辑后及时保存，防止数据丢失 |
| 返回 | 返回模板管理首页，退出编辑器（未保存更改不会保留） |
TIP
对于多语言店铺，您可点击实时预览区域的语言切换按钮查看店铺在各个语言下的配置，如希望调整文案，可通过翻译编辑器完成。
主工作区
主工作区包括三部分：
- 功能导航栏用于切换编辑模式
- 侧边操作面板则根据所选功能显示页面结构、主题样式或应用设置内容
- 实时预览区：所有变更将同步反映在右侧的实时预览区中。
功能导航栏
功能导航栏位于页面最左侧，垂直排列的三个图标分别代表不同的编辑功能模块：
- 页面设计（第一个图标）：用于管理和编辑具体页面的结构与内容模块，例如首页、产品页、系列页等。在该区域，你可以添加、删除或调整页面中的各个分区和模块。
- 主题设置（第二个图标）：全局设置影响全站页面的整体视觉风格，包括颜色、字体、动画、社交链接等。
- 应用嵌入（第三个图标）：用于在页面中集成来自 Genstore 或第三方的应用组件，实现营销、推荐、表单等高级功能。
侧边操作面板
该区域的内容会根据左侧选中的功能模块动态变化：
- 当选择第一个图标（页面设计）时，此处显示的是当前页面的模块结构和各分区设置，可进行模块的添加、删除、排序与内容编辑。
- 当选择第二个图标（主题设置）时，此处显示的是主题的视觉样式设置项，例如字体类型、主色调、按钮样式等。
- 当选择第三个图标（应用嵌入）时，此处显示可嵌入的应用组件和配置选项。
实时预览区
显示当前页面的可视化预览效果。所有在中间区域所做的修改都会即时反映在此区域中，支持在桌面、平板和手机视图间切换，帮助你实时查看不同设备下的展示效果。
页面模版
当选择第一个图标（页面设计）时，您可在侧边操作面板查看并编辑当前模板的页面结构，包括页面的整体布局（分区）和每个分区内的内容模块（区块）。
Genstore 的页面结构默认由三个主要区域组成：
| 区域名称 | 内容说明 |
|---|---|
| 标头（Header） | Logo、导航菜单、公告栏、搜索框、购物车图标等。支持添加应用或 Liquid 内容 |
| 主体（Template） | 页面主要内容区域，如产品、集合、图文模块、博客、自定义内容等 |
| 页脚（Footer） | 版权信息、支付方式、社交图标、订阅表单等。支持添加应用或 Liquid 内容 |
TIP
所有页面模板共用相同的标头和页脚，在任一页面中修改后，其他页面将自动同步更新。
页面分区与块
在 Genstore 装修编辑器中，页面内容由多个 分区（Sections） 组成，每个分区下又可以包含一个或多个 区块（Blocks）。
- 分区 是页面的结构单元，用于承载完整功能区域，例如横幅、图文展示、产品推荐等。
- 区块 是分区中的内容组件，例如一张图片、一段文本、一个按钮等。部分分区支持添加多个区块，实现内容的灵活组合。
通过分区与区块的灵活组合，您可以自由排布页面结构，快速搭建出符合品牌风格的个性化页面。
分区功能
| 功能名称 | 功能说明 |
|---|---|
| 分区列表 | 显示页面上所有内容模块（如横幅、富文本、集合列表等） |
| 添加分区 | 添加新的内容分区 |
| 拖动分区 | 拖动图标调整分区顺序 |
| 隐藏/显示 | 临时隐藏或展示某个分区 |
| 删除分区 | 从模板中移除该分区（需保存后生效） |
区块功能
某些分区支持多个区块，用于灵活嵌套文本、图片、按钮等组件。
| 功能名称 | 功能说明 |
|---|---|
| 添加区块 | 向支持的分区中添加内容元素，如图文、按钮、媒体等 |
| 区块拖动 | 拖动区块调整顺序 |
| 删除区块 | 删除某一区块，不影响所在分区 |
主题设置
点击最左侧功能导航栏的第二个图标，可进入主题设置，您可在此调整全站页面的整体视觉风格，包括颜色、字体、动画、社交链接等。
| 设置项 | 功能说明 |
|---|---|
| 颜色设置 | 设置网站主色、背景色、按钮色、链接色等 |
| 布局设置 | 设置页面内容区域的宽度与排列方式 |
| 动画设置 | 设置页面进入/滚动时的动效 |
| 图标设置 | 上传 Logo、Favicon 等图标资源 |
| 社交链接 | 添加 Facebook、Instagram、YouTube 等社交平台链接 |
应用嵌入
点击最左侧功能导航栏的第三个图标，可进入应用嵌入设置。支持将 Genstore 或第三方开发的 应用 组件嵌入到页面特定区域，扩展页面功能。