精选分类元件|Shopper App

您可透过精选分类元件,将想展示的商品分类按圆形图或者方形图呈现在 App 首页,方便顾客查看分类下的商品,促进购买转化。

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

 

本篇文章将分别介绍:

 

一、设定精选分类元件

步骤一

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

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

 

步骤二

点击「添加元件」,选择「精选分类」元件,拖曳至中间预览区提示可以放置元件的地方。

截圖 2025-09-26 下午3.07.10.png
截圖 2025-09-26 下午4.18.31.png

 

步骤三

于右侧编辑区进行以下设定。

1. 分类图显示

  • 圆形图
截圖 2025-09-26 下午4.22.03.png
  • 方形图
截圖 2025-09-26 下午4.23.19.png

 

2. 分类图尺寸

截圖 2025-09-26 下午4.22.03.png
截圖 2025-09-26 下午4.27.03.png
截圖 2025-09-26 下午4.28.47.png

 

3. 每行显示分类数

您可以设定 2 至 8 个分类。

截圖 2025-09-26 下午4.30.26.png

 

4. 标题

输入精选分类标题,最多 100 个字元。

截圖 2025-09-26 下午4.32.23.png

 

5. 显示按钮

预设开启,您可以修改按钮显示文字,最少输入一种语言,且每种语言最多输入 20 个字元。

截圖 2025-09-26 下午4.34.31.png

 

6. 文字对齐

设定该元件标题对齐方式。

截圖 2025-09-26 下午4.36.27.png

 

7. 预约上架时间

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

截圖 2025-09-26 下午3.55.37.png

 

 

二、选择商品分类

步骤一

于左侧区块新增商品分类,最多新增 24 个分类;您也可以在此处开启/关闭/删除精选分类元件。

截圖 2025-09-26 下午4.51.23.png

 

步骤二

于右侧编辑区块,点选「选择商品分类」。

截圖 2025-09-26 下午4.53.06.png

 

步骤三

选择商品分类后,您可以点选「新增图片」自订该分类显示的图片。

*注意:若您未自订图片,系统将自动使用该分类下的商品图片作为分类图片。

截圖 2025-09-26 下午4.54.57.png
截圖 2025-09-26 下午4.57.04.png

 

 

三、App 端显示效果

若每行分类数量超出荧幕可显示的数量,支援以左右滑动的方式查看。

*注意:按钮将套用您于「主题设定 > 色彩 > 按钮」所设定的颜色。

未命名設計 (1).gif

 

 

 

 

 

 

 

还有其它问题?提交请求

评论