這篇完成:為商品加上封面與商品頁圖庫(圖片或影片),並正確排序。
圖片選擇器的通用操作見 上傳與從圖庫選圖。
前提
- 已開啟該商品的編輯頁(如何上架商品)。
- 擁有者/編輯者可上傳;檢視者通常只能選圖庫裡已有的圖。
路徑
電商 → 商品管理 → 開啟商品 → 上方頁籤 媒體。
說明文字為:「第一則為封面,其餘為商品頁圖庫;可加入圖片或影片,並拖曳調整順序。」
逐步操作
- 切到 媒體。若尚無媒體,會看到「尚未加入媒體;可從圖庫選取、上傳圖片,或新增影片。」
- 用工具列擇一:
- 從圖庫新增:開選擇器「圖庫」分頁,可複選多張,確認後加入。
- 上傳圖片:開選擇器「上傳」分頁,可一次選多張。
- 新增影片:填入 YouTube、Vimeo 或直連 MP4/WebM 網址;可再選一張封面圖(列表與輪播縮圖用)。YouTube 未設封面時會用官方縮圖。
- 加入後,用左上角拖曳把手調整順序。
- 需要時為每則填 替代文字(選填)(無障礙與 SEO)。
- 用底部工具列 儲存草稿 或 發布。成功時提示「已儲存商品媒體」。
新增商品時,媒體會與基本資料一次建立;之後編輯也是同一條工具列存檔。
封面規則
- 排序第一則會同時當作:
- 商店列表封面
- 商品頁主圖
- SEO/社群分享圖(未另設時)
- 第一則縮圖上會有 封面 標示。
- 若第一則是影片,列表與分享圖用該則的封面圖(YouTube 可自動用官方縮圖;Vimeo/MP4 請自行選封面)。
- 前台以裁切方式顯示,重要主體請放在畫面中央,不要把文字或 Logo 貼齊邊緣。
前台放大檢視
顧客在商品頁點左側主圖(或影片播放圖示)會開全螢幕媒體輪播,可用左右鍵切換圖片與影片。
建議尺寸與格式
圖片後台提示:1200×900 px(4:3),寬度至少 1200px。格式 JPG 或 WebP。
與消息列表封面建議相同,方便同一套攝影規格。更多全站規則見 資料夾、尺寸與格式。
則數上限
同一商品最多 20 則(圖片+影片合計)。工具列會顯示「目前則數 / 20 則」。
讓規格切換商品圖
若顏色、款式等選項要對應不同實拍或影片:
- 先在本分頁加入媒體並儲存。
- 再到 定價與規格:
- 規格欄位(下拉/單選)展開該選項 → 綁定商品圖片,從本商品媒體挑一則。
- 資料表查價可在「規格值綁定商品圖片」為每個規格值挑選(例如顏色)。
- 前台顧客選該選項時,商品頁左側輪播會切過去。尺寸、數量等沒綁定的選項不會改掉已切換的媒體。
不要為選項另外上傳第二份檔;請一律從商品媒體挑選。
圖會進哪個資料夾?
從此分頁上傳(以及商品內文貼圖、規格相關示意、影片封面)會歸在圖庫資料夾 「商品管理」。之後可在選擇器依資料夾篩選。改商品名稱不會回溯已上傳圖的資料夾。
移除媒體
點該則的移除控制即可從這個商品拿掉。
這不一定會從全站圖庫刪檔;其他頁面或商品仍可能在用同一張。要刪檔請走圖庫刪除流程,見 刪除與引用檢查。
怎麼驗
- 媒體分頁第一則為你要的封面,則數與順序正確。
- 前台
/shop卡片封面正確(影片應看到封面圖,不是破圖)。 - 商品詳情主圖與輪播順序與後台一致。點主圖會開放大輪播;影片可播放。選了有綁定媒體的規格時,左側輪播會切到該則。
- 用社群預覽或 SEO 工具看分享圖是否為第一則的圖/影片封面(若未另設 SEO 圖)。
常見卡住
| 狀況 | 怎麼辦 |
|---|---|
| 上傳按鈕沒有 | 帳號是檢視者,或權限被縮限。 |
| 圖已傳但商品頁沒有 | 是否按了底部儲存?是否還在草稿、前台預覽用錯狀態? |
| 列表封面不是我想要的那張 | 把正確的圖(或有封面的影片)拖到第一位再儲存。 |
| 影片沒有縮圖 | Vimeo/直連 MP4 請在該則選封面圖;YouTube 通常會自動有縮圖。 |
| 畫面被裁切切到重點 | 重拍或重裁,主體置中;比例對齊 4:3。 |
| 圖庫找不到剛傳的檔 | 資料夾選「商品管理」或清空篩選;搜尋檔名。見 上傳與從圖庫選圖。 |