网站商城导航适合商品分类较多的网站使用。商家可以把商品分类集中展示在网站中,方便访客快速找到所需商品。网站商品三级分类并支持电脑、平板和手机访问。在雨科建站后台搭建自适应网站可使用该模块控件。
操作步骤
STEP1 添加商城导航
进入雨科后台的网站设计页面,在功能面板中找到「基础-商城导航」,将模块添加到页面中。
网站顶部只能添加一个商城导航,页面其他位置可根据需要添加。
![]()
网站商城导航模块
STEP2 选择要展示的分类
打开商城导航设置,点击「管理产品分类」,选择需要展示的分类。
如果还没有产品分类,请先进入产品管理创建分类。
- 支持选择全部或部分分类。
- 最多展示三级分类。
- “未分类”不会显示。
![]()
STEP3 选择展示样式
商城导航提供3种电脑端样式,可根据网站风格和分类数量选择。
![]()
- 样式1:分类逐级展开。
![]()
- 样式2:在右侧集中展示下级分类。
![]()
- 样式3:使用较宽的区域展示分类。
![]()
手机端使用统一的移动端样式,暂不支持单独选择。
STEP4 设置分类图片
分类图片默认不显示。如需展示,可以开启分类图片,并为对应分类上传图片。
如果没有上传图片,该分类会以无图方式显示。
STEP5 设置导航位置
导航位置支持以下两种方式:
- 悬浮:展开后显示在页面内容上方,不会挤开下方内容。
- 占位:一级分类会直接显示在页面中,下方内容会自动向下移动。
可根据商城导航所在位置和页面布局选择。
STEP6 设置展开方式
电脑端支持以下两种展开方式:
- 鼠标悬停展开:鼠标移到商城导航按钮上时自动展开,移开后自动收起。
- 点击展开:点击商城导航按钮后展开,再次点击按钮或点击其他位置时关闭。
手机端统一使用点击展开。
STEP7 设置分类点击方式
开启「有下级菜单时不可点击」后,带有下级分类的分类名称只用于展开下一层。顾客点击最后一级分类后,进入对应的商品列表。
建议分类较多的网站开启此选项,方便顾客逐级选择。
STEP8 设置文字和外观
可以根据网站风格调整商城导航的显示效果,包括:
- 导航按钮文字;
- 分类文字大小和颜色;
- 背景颜色;
- 边框、圆角和阴影;
- 模块大小和位置。
不同样式支持的设置可能略有不同,请以页面显示的选项为准。
STEP9 设置打开方式并发布
设置顾客点击分类后的打开方式:
- 新窗口打开;
- 当前窗口打开。
完成设置后,请分别预览电脑、平板和手机效果,确认无误后保存并发布网站。
四、注意事项
- 商城导航使用网站已有的产品分类。修改产品分类后,导航内容也会随之更新。
- 商城导航最多展示三级分类,第四级及更深层级不会显示。
- “未分类”不会显示在商城导航中。
- 如需展示分类图片,请先为分类上传图片。
- 选择占位方式后,下方内容会自动向下移动,请注意检查页面布局。
- 手机端只能通过点击展开,不支持鼠标悬停。
- 发布前建议分别检查电脑、平板和手机效果,并测试分类跳转是否正确。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.