在主题编辑器中设计页头与页脚(OS 3.0)
页头与页脚是 SHOPLINE 网店的共享页面元素,这意味着您在主题编辑器中对它们所做的任何更改都会应用于店铺的每个页面。与独立的页面 section 不同,页头和页脚为全局配置,始终对顾客可见。
本文将介绍如何在主题编辑器中找到页头与页脚的设置,以及各 section 和 block 支持自定义的内容。
开始之前:确认您使用的工具 本文所述设置仅适用于主题编辑器(OS 3.0),与 Shopper App 的显示设置相互独立。 |
在主题编辑器中找到页头与页脚
如需在主题编辑器中打开页头或页脚设置,请按以下步骤操作:
- 在【管理后台】中,前往【网店】>【设计】。
- 找到当前使用的主题,点击【设计】进入主题编辑器。
- 找在左侧边栏中,点击【Header】(第一项)或【Footer】(最后一项)展开相应设置。
Header
【Header】是主题编辑器左侧面板的第一项,包含两个默认 section:【公告栏】和【页头】。
公告栏
公告栏用于在页头上方展示横幅信息。您可以配置以下设置:
- 展示位置:选择公告栏在页面上的显示位置。
- 多公告展示样式:设置多条公告的轮播或展示方式。
- 切换间隔:控制每条公告展示的时长。
- 桌面端显示社交媒体图标:控制桌面端是否显示社交媒体图标。
- 布局:调整公告栏的整体布局。
- Custom CSS:为公告栏添加自定义样式。
公告栏 section 包含一个默认 block:公告,用于输入每条公告的文字内容与链接。
页头
页头 section 控制店铺的主导航区域。您可以配置以下设置:
- 颜色:设置页头的配色方案。
- 全屏宽度:开启后,页头将延伸至浏览器全宽。
- 页头下方显示分隔线:控制页头与页面内容之间是否显示分隔线。
- 显示语言选择器:控制是否向顾客显示语言切换选项。
- 显示国家/地区选择器:控制是否向顾客显示国家或地区切换选项。
- Logo:上传并配置店铺 Logo。
- 透明页头:设置页头以透明方式叠加在页面内容上方。
- 菜单栏:配置主导航菜单,包含以下置顶菜单设置:
- 页头懸浮置顶方式:设置页头的置顶行为,选项为:不置顶、始终置顶、仅向上滑动时置顶。
- 移动端置顶菜单:为移动端访客启用置顶菜单。
- 置顶菜单仅显示在首页:将置顶菜单限制为仅在首页显示。
- 置顶菜单跟随页头置顶:控制移动端置顶菜单是否跟随页头的置顶行为,或随页面内容正常滚动。
【置顶菜单跟随页头置顶】 开关与【页头悬浮置顶方式】设置的交互逻辑如下:
| 页头悬浮置顶方式 | 置顶菜单跟随页头置顶:开启(默认) | 置顶菜单跟随页头置顶:关闭 |
| 不置顶 | 菜单随页面滚动 | 菜单随页面滚动 |
| 始终置顶 | 菜单始终置顶显示 | 菜单随页面滚动 |
| 仅向上滑动时置顶 | 向上滑动时菜单随页头置顶显示;向下滑动时隐藏 | 菜单随页面滚动 |
注意:
|
- 精选内容:在页头添加精选链接或推广内容。
- 布局:调整页头的整体布局。
- Custom CSS:为页头添加自定义样式。
您也可以点击【+ 添加内容】向【Header】 section 添加内容 block,例如菜单图片或超级菜单。
Footer
【Footer】是主题编辑器左侧面板的最后一项,包含一个默认 section:【页脚】,其中包括以下 block:
页脚信息
- 标题字体:自定义页脚各 section 标题的字体样式。
- 布局:调整该 block 的布局。
联系我们
- 排列方式:设置联系信息在该 block 中的排列方式。
- 布局:调整该 block 的布局。
附加内容
- 排列方式:设置附加内容项目的排列方式。
- 布局:调整该 block 的布局。
| 注意:如需在【Footer】section 中添加更多 block,可点击主题编辑器中页脚上方的【+ 添加组件】。 |