可按照您欲展示的活动或特殊商品新增轮播图元件，每组轮播图最多展示 10 张图片或影片。Shopper App 支持编辑元件的位置及展示内容。
⚠️ 开始前请注意：此功能在香港地区仅支持 Shopper App Pro 版本。
步骤一
前往 SHOPLINE 后台 >「Shopper App 管理 > App 设计 > 目前版型」，点选「设定」进入 App 页面编辑器。
或前往「Shopper App 管理 > App 设计 > 会员中心」，点选「设定」进入会员中心页面编辑器。
步骤二
点击「添加元件」。
选择「轮播图」元件后，拖拽至中间预览区提示可放置元件处。
步骤三
在右侧编辑区进行轮播图展示相关设定。
1. 自动轮播时间间隔
点击「自动轮播时间间隔」的下拉式选单，有「3S」和「5S」两种选择。
2. 与页面同宽
开启此选项，图片／影片展示时会延伸至荧幕左右两侧，不留空白。
3. 图片比例
您可依轮播图片于前台展示的效果，选择「横式、直式、原图比例」三种不同设置。
- 横式比例为 16:9。
- 直式比例为 9:16。
- 原图比例完整呈现原本图片全貌。
4. 预约上架时间
此项目为选填。点击栏位右侧的「日历」图标可选择起迄日期。
步骤四
在左侧元件库区域点击「⊕ 新增（X/10）」可新增图片或影片。最多可以新增 10 张图片或影片；新增轮播图时会默认 1 张图片。
步骤五
选择新增「图片」，在右侧编辑区进行相关设置。
1. 添加图片
点击添加图片。
2. 选择遮罩比例
默认为 20%，可点击下拉式选单选择需要的遮罩比例，共「0%、20%、40%、60%、80%」五种供选择。
3. 填写标题和内容
元件的语言展示会按「英文、繁体中文、简体中文」的顺序，即若三者皆填写，介面会展示英文。
4. 设定展示按钮
开启「展示按钮」开关后，输入按钮名称，按钮将展示于轮播图元件中央。
5. 选择跳转连接
A. 原生页面
勾选「优惠活动／指定分类／商品详情页」者，点击「⊕ 选择优惠活动／商品分类／商品」后，在弹窗里选择后点击「确认」。
勾选「人气排行榜」者，下拉选单选择已建立页面。
B. 自订 URL
勾选「自订 URL」者，请于栏位内输入连结。注意输入之连结必须以「https://」或「http://」开头。
6. 设置字体对齐方式和字体颜色
步骤六
选择新增「影片」者，请于右侧编辑区进行相关设置。
1. 输入 Youtube 或 Vimeo 嵌入连结
2. 选择遮罩比例
说明大致与上述图片遮罩比例相同。
3. 填写标题和内容
请参考上述步骤五第 3. 点。
4. 设置字体对齐方式和字体颜色
请参考上述步骤五第 6. 点。
步骤七
完成所有设置后，点击右上角的「储存」保存现阶段的设定。确认完全编辑完成后，点击「更新并使用」已发布您的设定。
评论