Skip to content

庄朋龙的博客

有志者自有千方万计,无志者只感千难万难。

Menu
  • 首页
  • 生活
  • 创业
  • 编程
  • 运维
  • 视频课程
    • 跨境独立站
    • Shopee跨境电商
    • TEMU跨境电商
  • 资源分享
    • 网站推荐
    • 开源推荐
    • 可商用字体
    • 书籍分享
Menu

第4课:如何修改网站页眉和页脚(跨境电商独立站实操教程)

Posted on 2026年4月23日2026年4月23日 by 庄朋龙

本篇内容整理自视频教程,详细讲解如何在 ShopAGG 中修改网站页眉(导航栏)、LOGO以及菜单结构,实现全站统一生效。

完成建站和收款配置之后,下一步就是对网站进行基础装修。其中最常修改的就是网站顶部区域,也就是页眉。

页眉可以理解为网站的“头部”,类似 Word 文档中的页眉。只要修改一次,整个网站所有页面都会同步更新。

首先登录网站后台,然后打开网站前台页面。登录管理员账号后,页面顶部会出现一条黑色控制栏,只有管理员账号才会显示该控制条。

将鼠标移动到顶部的“SHOPAGG”,点击“编辑当前页眉”,即可进入页眉编辑界面。

进入编辑器后,可以看到页眉主要由几个部分组成,包括:

  • LOGO
  • 主导航菜单
  • 搜索功能
  • 用户账户入口
  • 购物车

这些内容在前台页面中是一一对应显示的。

首先修改LOGO。点击LOGO模块,选择上传图片,选择需要替换的品牌LOGO,点击保存即可。可以根据需要调整LOGO宽度,修改后点击保存并应用,整个网站顶部的LOGO都会同步更新。

修改完成后需要注意,编辑器内的修改只是预览效果,必须点击右下角保存按钮才会正式生效。

接下来是导航菜单的修改。

再次进入“编辑当前页眉”,选中“主菜单”,查看当前使用的菜单名称。记住这个菜单名称后,进入后台“外观”-“菜单”进行编辑。

在菜单管理页面,可以看到当前菜单结构与前台导航一一对应。支持拖拽调整顺序,也可以设置多级下拉菜单。

例如,将某个页面拖到另一个菜单下方,就可以形成子菜单。保存后刷新前台页面即可看到效果。

如果需要删除菜单项,可以点击对应菜单项下的“移除”,然后保存即可。

如果需要新增菜单项,可以在右侧选择添加:

  • 页面
  • 文章
  • 产品
  • 自定义链接

其中“自定义链接”非常重要,可以跳转到任意外部网址。例如添加亚马逊店铺、独立站或其他平台链接。

添加自定义链接时,需要注意:

  • URL必须包含 http 或 https
  • 不能只填写 www 开头的网址

填写完成后点击添加,再保存菜单即可生效。

对于带下拉内容的菜单,可以展开菜单项,点击“使用编辑器修改区块”,进入编辑页面,对下拉展示内容进行自定义修改。如果不需要显示区块,可以设置为 none 进行隐藏。

在前台刷新后,可以实时看到修改效果。

此外,网站导航支持自适应设计,在手机端和电脑端会自动切换显示方式。

在手机端,导航栏会折叠为菜单按钮(通常为三条横线),点击后展开。LOGO和购物车会单独显示。

如果需要修改手机端显示效果,可以在页眉编辑器中切换到“手机视图”,然后按照相同方式进行调整。

修改完成后点击保存,即可同步应用到移动端。

通过以上步骤,可以完成:

  • LOGO替换
  • 导航菜单调整
  • 多级菜单设置
  • 外部链接添加
  • 手机端适配修改

所有修改均为全站生效,无需代码操作。

Category: 跨境独立站

全栈开发者×创业偏执狂

相信代码能改变命运,也相信凌晨四点的服务器警报里有真实的人生。

我的创业项目:
SHOPAGG / SmallShop / DigitShops / 文硕阁

© 2026 庄朋龙的博客 | Powered by Minimalist Blog WordPress Theme