装修编辑器使用指南
Genstore 提供可视化模版编辑器，支持商家、运营及设计人员对商店的页面结构、内容与整体视觉风格进行日常调整和个性化设置，无需编写代码即可完成操作。
如何访问
- 登录 Genstore 后台，进入：在线商店 -> 模版。
- 点击目标模版后的 设计 按钮。
- 点击顶部页面选择器的下拉按钮，选择页面类型（如主页、产品页、系列页）。
- 对于部分页面，您可进一步选择具体模版（如具体的产品页或为该资源创建模版）。
- 页面将自动刷新并呈现对应样式，您可继续编辑内容。
模版编辑器分为两部分：
顶部工具栏
位于模版编辑器上方，用于切换不同页面模版、预览、操作保存等。
| 功能名称 | 功能说明 |
|---|---|
| 模版名称 | 查看当前编辑的模版名称 |
| 模版状态 | 显示模版状态 - 🟢 实时视图：表示模版已发布 - ⚪ 草稿：表示模版尚未发布 |
| 页面选择器 | 选择要编辑的页面类型，如首页、产品页、系列页、自定义页面等。部分页面（如产品页）支持进一步选择具体页面模版 |
| 模版切换 | 在当前页面下切换不同模版，或创建新模版 |
| 市场切换 | 切换适用市场（适用于 多市场商店） |
| 预览 | 可预览当前模版的实际展示效果 |
| 保存 | 保存所有修改，建议每次编辑后及时保存，防止数据丢失 |
| 发布 | 进针对草稿模版，可直接点击发布并设为店铺模版 |
底部悬浮工具栏
位于页面底部，可用于切换设备视图、控制显示比例、进入代码模式等操作。
| 功能名称 | 功能说明 |
|---|---|
| 撤销/恢复 | 撤销或恢复当前会话中未保存的更改 - 功能仅适用于当前编辑会话中尚未保存的更改 - 无可操作时，按钮自动变为灰色不可点击 |
| 设备预览 | 切换预览设备：桌面、手机、全屏，以查看不同设备下的展示效果 |
| 显示比例 | 调整预览区域的缩放比例，支持从 50% 到 100%，便于精细设计与布局校对 |
| 切换代码编辑器 | 进入源码编辑模式，适用于具备前端开发能力的用户，可直接编辑 Liquid、json 等模版文件 |
编辑区域
编辑区域包括三部分：
| 区域名称 | 功能说明 |
|---|---|
| 功能导航栏 | 位于页面最左侧，提供页面管理、页面设计、样式设置、主题设计与应用嵌入等功能入口 |
| 侧边操作面板 | 根据所选功能动态显示页面结构、模块内容或样式配置项 |
| 实时预览区 | 右侧为所选页面的实时展示区域，支持语言、市场、终端切换 |
功能导航栏
功能导航栏位于页面最左侧，垂直排列的五个图标分别代表不同的编辑功能模块：
- 页面管理：用于集中管理各类页面模版的创建与绑定操作，支持模糊搜索未分配页面、快速切换产品、页面、博客等模版，提升页面配置效率。
- 页面设计：用于管理和编辑具体页面的结构与内容，例如首页、产品页、系列页等。在该区域，你可以添加、删除或调整页面中的各个分区和模块。
- 样式设置：全局设置影响全站页面的整体视觉风格，包括颜色、字体、动画等。
- 主题设计：用于配置网站的全局视觉样式，包括 Logo、品牌信息、社交媒体、购物车样式、自定义 CSS 等，统一塑造品牌形象。
- 应用嵌入：用于在页面中集成来自 Genstore 或第三方的应用组件，实现营销、推荐、表单等高级功能。
侧边操作面板
侧边操作面板位于编辑器主区域左侧，会根据功能导航栏中选中的模块动态变化，显示对应的配置项与内容结构：
- 页面管理：展示所有支持模版编辑的页面类型，如主页、产品页、系列页、博客等，可创建新模版、查看当前分配状态，并支持快速切换与模糊搜索。
- 页面设计：显示当前选中页面的模块结构与分区设置，支持添加模块、排序、删除或编辑模块内容。
- 样式设置：提供颜色、字体、按钮样式、动画效果等全局视觉风格的配置项，统一控制页面整体风格。
- 主题设计：显示 Logo 设置、网站图标、品牌信息、购物车行为、货币格式、自定义 CSS 等整体主题样式配置。
- 应用嵌入：列出可插入页面的应用组件（如倒计时、推荐模块、弹窗等），并提供相应的样式与行为设置。
实时预览区
右侧区域为实时预览区，显示当前模版在不同终端和语言下的页面效果。
- 市场/币种切换：如启用了多市场功能，可切换地区和货币
- 语言切换：可点击语言下拉菜单，查看当前页面在不同语言下的展示情况
- 切换语言后，页面预览区域将显示对应语言下的产品标题、标签、价格格式等内容。
- 系统字段：如“售罄”“加入购物车”等，由平台提供多语言默认翻译。
- 商户自定义内容：如产品标题、描述，需通过翻译编辑器 完成各语言版本的填写。
- 未填写翻译的字段将显示默认语言内容。
- 实时展示：支持响应式布局和实时刷新，方便查看配置效果
页面管理
当选择 页面管理 时，您可在侧边操作面板中查看当前主题支持的所有页面类型，并管理每个页面的模版配置与分配关系。
Genstore 的页面管理区域主要由以下部分组成：
- 页面类型列表：以分组方式展示所有支持模版的页面类型，如主页、产品、产品系列、博客、搜索、404 等。部分类型（如产品、页面、博客文章）支持展开查看已分配页面及模版详情。
- 模版创建与切换：支持为页面类型创建多个模版，点击 创建模版 可新增模版并绑定至指定页面，实现差异化内容展示。
- 模版分配状态：可查看每个模版下已绑定的页面数量，支持点击跳转进行快速预览或编辑。
- 搜索与筛选：通过顶部的搜索框可模糊查找模版名称、页面名称或未分配页面，提升模版管理效率。
页面设计
当选择 页面设计 时，您可在侧边操作面板查看并编辑当前模版的页面结构，包括页面的分区（Sections）和每个分区内的区块（Blocks）。
页面结构区域
Genstore 的页面结构默认由三个主要区域组成：
| 区域名称 | 内容说明 |
|---|---|
| 标头（Header） | Logo、导航菜单、公告栏、搜索框、购物车图标等。支持添加应用或 Liquid 内容 |
| 主体（Template） | 页面主要内容区域，如产品、集合、图文模块、博客、自定义内容等 |
| 页脚（Footer） | 版权信息、支付方式、社交图标、订阅表单等 |
页面分区与块
在 Genstore 装修编辑器中，页面内容由多个 分区（Sections） 组成，每个分区下又可以包含一个或多个 区块（Blocks）。
- 分区 是页面的结构单元，用于承载完整功能区域，例如横幅、图文展示、产品推荐等。
- 区块 是分区中的内容组件，例如一张图片、一段文本、一个按钮等。部分分区支持添加多个区块，实现内容的灵活组合。
通过分区与区块的灵活组合，您可以自由排布页面结构，快速搭建出符合品牌风格的个性化页面。
分区功能
| 功能名称 | 功能说明 |
|---|---|
| 分区列表 | 显示页面上所有分区（如横幅、富文本、集合列表等） |
| 添加分区 | 添加新的内容分区 |
| 拖动分区 | 拖动图标调整分区顺序 |
| 隐藏/显示 | 临时隐藏或展示某个分区 |
| 删除分区 | 从模版中移除该分区（需保存后生效） |
区块功能
某些分区支持多个区块，用于灵活嵌套文本、图片、按钮等组件。
| 功能名称 | 功能说明 |
|---|---|
| 添加区块 | 向支持的分区中添加内容元素，如图文、按钮、媒体等 |
| 区块拖动 | 拖动区块调整顺序 |
| 删除区块 | 删除某一区块，不影响所在分区 |
样式设计
当选择 样式设计 时，您可以为全站页面设置统一的视觉样式，包括颜色方案、字体字号、按钮样式、页面布局等，确保品牌风格一致性。
主要包含以下配置项：
- 配色方案：支持浅色与深色模式切换，并可分别设置主色、辅助色、点缀色、中性色与背景色。
- 字体设置：可调整标题与正文的字号、字重与字间距，确保文字层级清晰、易读。
- 视觉元素样式：包含图标、按钮、输入框、卡片（产品卡、系列卡、博客卡）等组件的样式配置。
- 页面布局：提供整体排版与间距设置，适配不同屏幕设备。
- 动效与交互：可设置页面滚动、按钮悬停、抽屉弹窗等元素的动画与视觉反馈效果。
所有设置项将应用于整个店铺主题，并实时反映在页面预览中，方便您快速评估视觉效果。
主题设计
当选择 主题设计 时，您可以配置网站的全局视觉与行为样式，涵盖 Logo 设置、品牌信息、购物体验与自定义样式等关键元素，统一塑造店铺形象。
主要包含以下配置项：
- Logo 与网站图标：上传店铺 Logo 和浏览器图标，并可自定义台式设备上的 Logo 宽度。
- 品牌信息：填写品牌名称、品牌描述等，用于支持主题内各模块调用展示。
- 社交媒体：配置店铺所使用的社交平台链接，如 Instagram、Facebook 等，可在页脚或指定组件中展示图标跳转。
- 搜索行为：设置搜索栏行为与展示逻辑，例如自动补全、搜索来源等。
- 货币格式：选择默认币种显示规则、货币符号位置、小数位数等，提升价格展示一致性。
- 购物车：配置购物车按钮样式、商品展示方式与交互行为等。
- 自定义 CSS：添加全局自定义样式代码，用于进一步个性化页面视觉，满足品牌特殊设计需求。
应用嵌入
点击最左侧功能导航栏的第三个图标，可进入应用嵌入设置。支持将 Genstore 或第三方开发的 应用 组件嵌入到页面特定区域，扩展页面功能。