在編輯 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 首頁的所有編輯，點擊「更新並使用」。
評論