影片元件｜Shopper App

在編輯 App 首頁時，您可以透過新增「影片元件」，在 App 首頁加入 Youtube 或是 Vimeo 影片，並且可調整影片的位置。

⚠️ 開始前請注意：此功能於香港地區僅支援 Shopper App Pro 版本。

本篇文章將介紹：

• 增加影片元件
• 編輯影片元件

一、 增加影片元件

步驟一

前往 SHOPLINE 後台 >「Shopper App 管理 > App 設計 > 目前版型」，點選「設定」進入 App 頁面編輯器。

步驟二

點選「新增元件」按鈕。

步驟三

選擇影片元件，拖曳至中間預覽區提示可以放置的位置處，預覽區出現影片元件即代表新增成功。

二、 編輯影片元件

步驟一

在欄位中輸入 YouTube、Facebook 或 Vimeo 影片網址。

＊注意：Facebook 影片網址僅支援 videos 或 watch 格式，例如：

• https://www.facebook.com/Creator/videos/01234567890
• https://www.facebook.com/watch?v=0123456789

 步驟二

開啟此選項，影片顯示時會延伸至螢幕左右兩側，不留空白。

步驟三

點選「新增圖片」上傳影片封面圖，支援 JPG/PNG/JPEG/GIF 檔案，大小不超過 2MB。

＊注意：

• 封面圖可依需求選擇是否上傳，但若您設定 Facebook 影片，為避免模糊封面，建議上傳清晰的封面圖。
• 上傳封面圖後，Facebook 影片將無法在預覽區播放，但不影響顧客在 App 中觀看。

步驟四

在影片連結的下方，可選擇「圖片（影片）比例」。您可依據您影片的比例決定採用橫式或直式的前台呈現方式。

• 橫式比例為 16:9。
  
   
• 直式比例為 9:16。
  

步驟五

設定標題，標題預設為關閉狀態。開啟開關顯示標題，注意標題內容不能超過 30 個字元。

步驟六

設定說明文字，開關預設為關閉狀態。開啟開關顯示說明文字，不能超過 50 個字元。

步驟七

設定預約上架時間。點擊起訖時間欄位右側的「月曆」圖標選擇日期時間，或勾選下方「永不過期」。

若點擊圖標選擇日期時間，會跳出彈窗（如下圖），設定完成後點按「確定」即可。

步驟八

若需移動元件位置或刪除元件，可於左側元件列表區（➊）、中間預覽區（➋）或右側元件底部（➌）進行相關操作。

步驟九

確認完成設定後，可先點按「儲存」保存元件變更。若已完成影片元件的所有編輯，可點擊「更新並使用」。