图文列表元件｜Shopper App

在编辑 App 首页时，您可以透过新增「图文列表元件」，在 App 首页加入欲推广的活动或精选目录，也可以调整元件的位置。

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

以下文章将分别介绍：

• 增加图文列表元件
• 编辑图文列表元件

一、 增加图文列表元件

步骤一

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

步骤二

点选「⊕ 添加元件」按钮（页面内共两处，详见下图）。

步骤三

选择「图文列表」元件，拖曳至中间预览区提示「将元件放置到此处」的蓝底区，待预览区出现「确认放置」即可新增成功。

二、 编辑图文列表元件

步骤一

设定元件标题，右侧「元件标题展示」预设为开启状态。开关开启时，可输入元件标题，而此标题将显示于元件顶部，如下图箭头处。

步骤二

设定展示按钮，功能开关状态预设为开启。

1. 输入「按钮文字」

输入「按钮文字」后，将显示于该元件右上方处。

2. 输入「跳转链接」

• 设定跳转链接，系统预设为「自订 URL」，目前仅支援输入「https://」或「http://」开头的链接。

  

• 若您点选「指定分类」，请点击「⊕ 选择商品分类」，于弹跳视窗里选择相应的分类后，点击「确定」。

  

• 若您点选「优惠活动」，请点击「⊕ 选择优惠活动」，于弹跳视窗里选择相应的分类后，点击「确定」。

  

步驟三

設定圖文列表的外顯圖片數量，預設顯示數量為 2 ，您可拉動滑桿修改圖片外顯數量，圖片可設定數量範圍為 1 至 2 張。

步骤四

设定是否展示图文列表的标题和说明文字，预设为展示状态。

标题和说明文字将分别显示于图片左下方。

步骤五

预约上架时间，此栏位非必填项目。点击「请选择日期」或栏位右方的「日历图标」可选择日期，完成后点击「确认」。

步骤六

点按左侧元件区已预设好的图片列表后，右侧编辑区会显示相对应的设定栏位，可于此区进行设定。

步骤七

点按下图红框内「添加图片」以上传图片，图片宽度为已自订的列表图片宽度。

步骤八

输入需显示的列表标题和说明文字；如上方「展示列表标题」和「展示说明文字」都关闭的话，则不会出现此栏位。

步骤九

设定跳转链接，方法同步骤二。

步骤十

App 预设为展示三张图，点击「⊕ 新增图文列表（X/20）」增加更多图文列表，最多可增至 20 张。

＊注意：App 上会预设展示「图文列表 1」和「图文列表 2」的图片，「图片列表 3」的图片仅呈现局部，顾客可向右滑动查看更多图片。

步骤十ㄧ

若您需要移动元件位置或删除元件，可于左侧元件列表区、中间预览区或右侧编辑区底部（如图里标示的 1 至 3）进行相关的操作。

步骤十二

完成设定后，可先点击「储存」储存元件变更，若您已完成 App 首页的所有编辑，点击「更新并使用」。