可按照您欲顯示的活動或特殊商品新增輪播圖元件，每組輪播圖最多顯示 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 嵌入連結
評論