商品轮播列表元件|Shopper App

您可以在编辑 App 首页时加入「商品轮播列表」元件,往右滑动查看更多商品,不仅让您拥有简洁俐落的版面,还能让顾客自由浏览商品,增加互动感。

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

 

步骤一

前往「商店后台 > Shopper App 管理 > App 设计 > 目前版型 > Simple 版型」,点按「设定」编辑商品列表元件。

截圖 2025-10-03 上午10.31.12.png

 

步骤二

点按「⊕ 添加元件 > 商品列表」,拖曳至中间预览区提示放置元件的区域。

截圖 2025-10-07 上午10.45.23.png
截圖 2025-10-07 上午10.46.34.png

 

步骤三

在右侧编辑区填写元件标题。

截圖 2026-03-09 下午3.44.26.png


步骤四

设定字体颜色。

截圖 2025-10-07 上午10.54.46.png

 

步骤五

若开启「展示按钮」开关,需填写商品轮播右上角的按钮文字。无需设定跳转链接,顾客点按「查看更多」即可进入原生商品列表浏览商品。

截圖 2026-03-09 下午3.46.44.png

 

步骤六

可透过「选择商品」或「选择商品分类」新增要加入的商品。

截圖 2025-12-15 下午5.03.11.png

 

1. 选择商品

勾选您想新增的商品,点按「确认」,最多可新增 50 款商品。

*注意:

  • 无论新增多少商品,轮播元件展示上限最多 10 款,其余商品需要点按「更多」进入商品列表查看。
  • 若您于 Shopper App 平台版本 v1.15 前新增超过 50 款商品,系统将自动展示前 50 款商品。
截圖 2025-10-07 上午11.28.55.png

 

2. 选择商品分类

勾选您想新增的商品类别,点按「确认」。

如果您想新增子分类,可以点按类别名称前方的三角形按钮,下拉子分类列表并勾选。

*注意:只能新增一个类别。

截圖 2025-10-07 上午11.31.46.png

 

步骤七

编辑商品轮播样式设定。

1. 显示资讯

勾选您想在商品列表展示的信息。

截圖 2026-03-09 下午3.48.35.png

 

2. 商品显示规则

选择是否在商店前台显示售罄商品、隐藏商品。

截圖 2025-10-07 上午11.36.58.png

*注意:

  • 此功能仅适用于「选择商品」设定项;若您勾选「选择商品分类」,系统将默认显示售罄商品,不显示隐藏商品。

  • 已下架的商品会自动过滤。

  • 此处设定的显示规则会同步到「更多」按钮跳转进入的商品列表。

  • 如果选择不显示售罄商品,无限库存的商品也会同时被过滤掉。

  • 若商品排序为自订排序,将固定为「显示售罄商品」,并「不显示隐藏商品」,与您于此之设定无关。

 

步骤八

选填预约上架时间。

截圖 2025-10-07 上午11.39.18.png

 

步骤九

完成元件编辑后,点按「储存」。确认可发布后,即可点击右上角「更新并使用」。

截圖 2026-03-09 下午3.50.07.png

 

 

 

延伸阅读

 

 

 

 

 

 


 

还有其它问题?提交请求

评论