网站商城导航适合商品分类较多的网站使用。商家可以把商品分类集中展示在网站中，方便访客快速找到所需商品。网站商品三级分类并支持电脑、平板和手机访问。在雨科建站后台搭建自适应网站可使用该模块控件。
操作步骤
STEP1 添加商城导航
进入雨科后台的网站设计页面，在功能面板中找到「基础－商城导航」，将模块添加到页面中。
网站顶部只能添加一个商城导航，页面其他位置可根据需要添加。
打开网易新闻 查看精彩图片
STEP2 选择要展示的分类
打开商城导航设置，点击「管理产品分类」，选择需要展示的分类。
如果还没有产品分类，请先进入产品管理创建分类。
- 支持选择全部或部分分类。
- 最多展示三级分类。
- “未分类”不会显示。
打开网易新闻 查看精彩图片
STEP3 选择展示样式
商城导航提供3种电脑端样式，可根据网站风格和分类数量选择。
打开网易新闻 查看精彩图片
- 样式1：分类逐级展开。
打开网易新闻 查看精彩图片
- 样式2：在右侧集中展示下级分类。
打开网易新闻 查看精彩图片
- 样式3：使用较宽的区域展示分类。
打开网易新闻 查看精彩图片
手机端使用统一的移动端样式，暂不支持单独选择。
STEP4 设置分类图片
分类图片默认不显示。如需展示，可以开启分类图片，并为对应分类上传图片。
如果没有上传图片，该分类会以无图方式显示。
STEP5 设置导航位置
导航位置支持以下两种方式：
- 悬浮：展开后显示在页面内容上方，不会挤开下方内容。
- 占位：一级分类会直接显示在页面中，下方内容会自动向下移动。
可根据商城导航所在位置和页面布局选择。
STEP6 设置展开方式
电脑端支持以下两种展开方式：
- 鼠标悬停展开：鼠标移到商城导航按钮上时自动展开，移开后自动收起。
- 点击展开：点击商城导航按钮后展开，再次点击按钮或点击其他位置时关闭。
手机端统一使用点击展开。
STEP7 设置分类点击方式
开启「有下级菜单时不可点击」后，带有下级分类的分类名称只用于展开下一层。顾客点击最后一级分类后，进入对应的商品列表。
建议分类较多的网站开启此选项，方便顾客逐级选择。
STEP8 设置文字和外观
可以根据网站风格调整商城导航的显示效果，包括：
- 导航按钮文字；
- 分类文字大小和颜色；
- 背景颜色；
- 边框、圆角和阴影；
- 模块大小和位置。
不同样式支持的设置可能略有不同，请以页面显示的选项为准。
STEP9 设置打开方式并发布
设置顾客点击分类后的打开方式：
- 新窗口打开；
- 当前窗口打开。
完成设置后，请分别预览电脑、平板和手机效果，确认无误后保存并发布网站。
四、注意事项
- 商城导航使用网站已有的产品分类。修改产品分类后，导航内容也会随之更新。
- 商城导航最多展示三级分类，第四级及更深层级不会显示。
- “未分类”不会显示在商城导航中。
- 如需展示分类图片，请先为分类上传图片。
- 选择占位方式后，下方内容会自动向下移动，请注意检查页面布局。
- 手机端只能通过点击展开，不支持鼠标悬停。
- 发布前建议分别检查电脑、平板和手机效果，并测试分类跳转是否正确。
热门跟贴