商品列表元件|Shopper App

您可以在 App 首页中加入「商品列表」元件,展示出您的主打商品,快速抓住顾客的目光。

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

 

步骤一

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

 

步骤二

点击「添加元件」,选择「商品列表」元件,拖拽至中间预览区提示可以放置元件的地方。

截圖 2025-10-07 下午2.08.22.png

 

步骤三

在右侧编辑区填写商品列表元件标题。

截圖 2025-10-07 下午2.11.17.png

 

步骤四

设定字体对齐方式和字体颜色。

截圖 2025-10-07 下午2.13.39.png

 

步骤五

若开启「展示按钮」开关,商品列表下方会显示「查看」按钮。无需设定跳转链接,顾客点击「查看」后可看进入原生商品列表页面浏览商品。

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


 

步骤六

选择商品,共有「选择商品」或「选择商品分类」两种选择。

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

 

1. 选择商品

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

*注意:若您于 Shopper App 平台版本 v1.15 前新增超过 50 款商品,系统将自动显示前 50 款商品。

 

2. 选择商品分类

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

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


步骤七

编辑商品列表相关样式设定。

1. 选择每行显示商品数

您可设定商品列表显示方式,共有「一行一个」及「一行两个」两种可供选择。

截圖 2025-10-07 下午2.25.29.png

 

2. 商品显示总行数

可设定为不限行数或者是固定行数,不限行数最多显示 50 行,超出部分将无法显示在 App 首页元件里,可以点击进入商品列表页查看。

截圖 2025-10-07 下午2.27.29.png

 

3. 显示资讯

勾选商品列表需要显示的资讯。

截圖 2025-10-07 下午2.29.37.png

 

4. 商品显示规则

选择是否显示售罄商品和隐藏商品。开启后,顾客可在前台页面看到隐藏商品。

截圖 2025-10-07 下午2.31.28.png

*注意:

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

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

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

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

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

 

步骤八

设定预约上架时间。此栏选填。

 

步骤九

完成元件的编辑后,再点击右上方的「储存」和「更新」。

 

 

 

 

 

 

 

 

 

还有其它问题?提交请求

评论