侧边栏设定|Shopper App

您可以将商店中的精选项目,例如:促销活动、商品分类、部落格文章,甚至其他外部连结设定在侧边栏中,提供顾客便利且快速的前往感兴趣的页面。

⚠️ 开始前请注意:此功能在香港地区仅支持 Shopper App Pro 版本。

 

此篇文章将分别介绍:

 

一、侧边栏整体设定

前往 SHOPLINE 后台 >「Shopper App 管理 > App 设计 > 目前版型」,点选「设定」进入 App 页面编辑器。

*注意:此项设定将在 Simple 版型及商店版型同时生效,建议选择「使用中」的版型设定。

截圖 2025-09-30 下午3.37.42.png

 

于页面左侧元件区块点选「侧边栏」进行以下设定。

截圖 2025-09-30 下午4.35.48.png

 

1. 显示侧边栏

点选左侧元件区块 openeye.png 按钮,可开启/关闭侧边栏,顾客可通过 App 左上角Screenshot 2024-10-23 at 6.57.27 PM.png按钮查看您在此设定的资讯。

*注意:侧边栏固定于顶部应用栏左侧,按钮颜色同步「主题设定 > 色彩 > 顶部应用栏」的字体颜色。

截圖 2025-09-30 下午4.44.25.png

 

2. 套用底部应用栏色彩设定

开启此选项,侧边栏将套用底部应用栏的背景颜色及字体颜色;关闭此选项,侧边栏预设为白色背景及黑色字体。

*注意:若您的 Shopper App 平台版本低于 1.13,侧边栏的字体颜色将同步顶部应用栏所设定的字体颜色;若您设定为亮色,因 App 端无法正常显示,系统将自动为您校正为黑色。

截圖 2025-09-30 下午4.49.50.png

 

3. 标题文字对齐方式

设定中间区块底部区块的标题文字对齐方式,可选择置左或置中。

截圖 2025-09-30 下午4.52.31.png

 

4. 预约上架时间(选填)

若您有设定上架日期,侧边栏将在指定时间于 App 中显示。

截圖 2025-09-30 下午4.20.57.png

 

 

二、侧边栏区块设定

1. 顶端区块

顶端区块展示品牌 LOGO、注册/登入按钮、系统预设/自订分页,且最多支援展示 4 个分页。

*注意:

  • 注册/登入按钮颜色同步「主题设定 > 色彩 > 按钮」的设定。
  • 若顾客已登入,则注册/登入按钮将隐藏。
截圖 2025-09-30 下午5.37.11.png

 

A. 系统预设分页

目前支援的 13 个分页分别为「优惠券、最新活动、我的订单、浏览记录、所有商品、领券中心、追踪清单、购物车、讯息、客服留言、门市资讯、精选优惠、人气排行榜」,预设开启前 4 个分页,您可以进行以下操作:

  • 点选功能右侧 closeeye.pngopeneye.png 按钮,设定开启或关闭。
  • 点选功能右侧Screenshot 2024-10-24 at 12.36.02 PM.png按钮,设定文字及图标图片。
  • 点选功能左侧Screenshot 2024-10-24 at 4.13.30 PM.png按钮,拖曳调整顺序。
截圖 2025-09-30 下午5.41.27.png

 

*注意:

  • 若您选择「最新活动」分页,需设定促销及分润活动,系统将自动显示商店最新建立且在促销活动期内的活动;您也可自行选择指定活动。
截圖 2025-09-30 下午5.45.08.png

 

B. 自订分页

点选「+ 自订」新增自订分页。

截圖 2025-09-30 下午5.50.31.png

 

您可以自行设定文字、图标图片及跳转连结。

截圖 2025-09-30 下午5.52.41.png

 

2. 中间区块

显示于顶端区块下方,支援选择「文字排列」或「图文排列」两种分组样式。

*注意:商品分类仅支援显示「文字排列」样式。

截圖 2025-09-30 下午5.55.22.png

 

A. 系统预设分组

预设显示「商品分类」,系统将自动存取网店已设定的商品分类内容。您可以进行以下操作:

  • 点选功能右侧 closeeye.pngopeneye.png 按钮,设定开启或关闭。
  • 点选功能右侧Screenshot 2024-10-24 at 12.36.02 PM.png按钮,编辑分组名称。
  • 点选功能左侧Screenshot 2024-10-24 at 4.13.30 PM.png按钮,拖曳调整顺序。
截圖 2025-09-30 下午6.00.37.png

 

B. 自订分组

点选「+ 自订分组」新增分组,目前支援的 15 个跳转页面分别为「所有商品、商品分类、指定分类、领券中心、 我的订单、讯息、客服留言、优惠活动、门市资讯、追踪清单、购物车、浏览记录、自订 URL、精选优惠、人气排行榜」。

*注意:最多可设定 5 个分组。

截圖 2025-09-30 下午6.02.14.png

 

您可以自订分组名称及跳转连结。

截圖 2025-09-30 下午6.03.57.png

 

点选「+ 新增内容」设定该分组下的内容名称及跳转连结。

*注意:每个分组下最多可设定 8 个内容。

截圖 2025-09-30 下午6.11.20.png

 

3. 底部区块

显示于中间区块下方,主要用于展示会员、App 设定相关内容,此区块不可隐藏或删除。

截圖 2025-09-30 下午6.13.53.png

 

A. 会员

支援「会员卡、会员资料、会员权益、推荐有礼」4 项内容,您可以进行以下操作:

  • 点选功能右侧 closeeye.png和  openeye.png 按钮,设定开启或关闭。
  • 点选功能右侧Screenshot 2024-10-24 at 12.36.02 PM.png按钮,编辑分组名称、开启或关闭分组下内容。
  • 点选功能左侧Screenshot 2024-10-24 at 4.13.30 PM.png按钮,拖曳调整顺序。

*注意:

  • 若您尚未开启任何会员权益选项,将不会显示「会员权益」内容。
  • 若您选择「推荐有礼」内容,需于 App 会员推荐奖赏新增活动。
截圖 2025-09-30 下午6.18.59.png

 

B. 关于

支援「条款与规则、隐私政策、目前版本」3 项内容,您可以进行以下操作:

  • 点选功能右侧 closeeye.png和  openeye.png 按钮,设定开启或关闭。
  • 点选功能右侧Screenshot 2024-10-24 at 12.36.02 PM.png按钮,编辑分组名称、开启或关闭分组下内容。
  • 点选功能左侧Screenshot 2024-10-24 at 4.13.30 PM.png按钮,拖曳调整顺序。
截圖 2025-09-30 下午6.22.46.png

 

C. 设定

支援「收货地址、语言设定、推播设定」3 项内容,您可以进行以下操作:

  • 点选功能右侧 closeeye.png和  openeye.png 按钮,设定开启或关闭。
  • 点选功能右侧Screenshot 2024-10-24 at 12.36.02 PM.png按钮,编辑分组名称、开启或关闭分组下内容。
  • 点选功能左侧Screenshot 2024-10-24 at 4.13.30 PM.png按钮,拖曳调整顺序。
截圖 2025-09-30 下午6.25.46.png

 

完成侧边栏设定后,点选页面右上角「储存」;确认内容无误后,点选「更新并使用」进行发布。

截圖 2025-09-30 下午6.27.26.png

 

 

 

 

 

 

 

 


 

还有其它问题?提交请求

评论