本篇内容整理自视频教程,详细讲解如何在 ShopAGG 中修改网站页眉(导航栏)、LOGO以及菜单结构,实现全站统一生效。
完成建站和收款配置之后,下一步就是对网站进行基础装修。其中最常修改的就是网站顶部区域,也就是页眉。
页眉可以理解为网站的“头部”,类似 Word 文档中的页眉。只要修改一次,整个网站所有页面都会同步更新。
首先登录网站后台,然后打开网站前台页面。登录管理员账号后,页面顶部会出现一条黑色控制栏,只有管理员账号才会显示该控制条。
将鼠标移动到顶部的“SHOPAGG”,点击“编辑当前页眉”,即可进入页眉编辑界面。
进入编辑器后,可以看到页眉主要由几个部分组成,包括:
- LOGO
- 主导航菜单
- 搜索功能
- 用户账户入口
- 购物车
这些内容在前台页面中是一一对应显示的。
首先修改LOGO。点击LOGO模块,选择上传图片,选择需要替换的品牌LOGO,点击保存即可。可以根据需要调整LOGO宽度,修改后点击保存并应用,整个网站顶部的LOGO都会同步更新。
修改完成后需要注意,编辑器内的修改只是预览效果,必须点击右下角保存按钮才会正式生效。
接下来是导航菜单的修改。
再次进入“编辑当前页眉”,选中“主菜单”,查看当前使用的菜单名称。记住这个菜单名称后,进入后台“外观”-“菜单”进行编辑。
在菜单管理页面,可以看到当前菜单结构与前台导航一一对应。支持拖拽调整顺序,也可以设置多级下拉菜单。
例如,将某个页面拖到另一个菜单下方,就可以形成子菜单。保存后刷新前台页面即可看到效果。
如果需要删除菜单项,可以点击对应菜单项下的“移除”,然后保存即可。
如果需要新增菜单项,可以在右侧选择添加:
- 页面
- 文章
- 产品
- 自定义链接
其中“自定义链接”非常重要,可以跳转到任意外部网址。例如添加亚马逊店铺、独立站或其他平台链接。
添加自定义链接时,需要注意:
- URL必须包含 http 或 https
- 不能只填写 www 开头的网址
填写完成后点击添加,再保存菜单即可生效。
对于带下拉内容的菜单,可以展开菜单项,点击“使用编辑器修改区块”,进入编辑页面,对下拉展示内容进行自定义修改。如果不需要显示区块,可以设置为 none 进行隐藏。
在前台刷新后,可以实时看到修改效果。
此外,网站导航支持自适应设计,在手机端和电脑端会自动切换显示方式。
在手机端,导航栏会折叠为菜单按钮(通常为三条横线),点击后展开。LOGO和购物车会单独显示。
如果需要修改手机端显示效果,可以在页眉编辑器中切换到“手机视图”,然后按照相同方式进行调整。
修改完成后点击保存,即可同步应用到移动端。
通过以上步骤,可以完成:
- LOGO替换
- 导航菜单调整
- 多级菜单设置
- 外部链接添加
- 手机端适配修改
所有修改均为全站生效,无需代码操作。
