Shopify 商店 AI 影像工作流
Shopify 前台會自動把圖片轉成 WebP。你要做的是上傳品質最高的母版。下面這條 AI 工作流,能把供應商圖秒變 Shopify 母版——快到每次上新都能跑一遍。
Shopify 圖片規範
Shopify 比 Amazon 寬鬆,但 PDP 想做出精緻感,尺寸還是要規範。
| PDP 主圖來源 | 2048 × 2048 px,建議方形 |
|---|---|
| Collection 卡片圖 | 用同一份 2048×2048 母版——Shopify 會依主題自動縮放 |
| 分發格式 | WebP,由 Shopify CDN 自動轉換(你只需要上傳 JPG/PNG 母版) |
| 透明度支援 | PNG 和帶 alpha 的 WebP 都支援——做變體疊加時很有用 |
| 最大檔案大小 | 單圖最大 20 MB,但壓縮到 ≤ 500 KB 更實際 |
| 長寬比 | 商品卡用方形;banner 區依主題各自規定 |
Shopify 圖片流水線
五個步驟,整店通用、可重複使用。
- 1
第 1 步 — 母版做到 2048×2048
永遠上傳合理範圍內最大的尺寸。Shopify 的 CDN 縮小做得很漂亮,但不會放大。小於 1500px 的原圖在視網膜螢幕 PDP 上看起來會發軟。
- 2
- 3
- 4
- 5
第 5 步 — 上傳母版,讓 Shopify CDN 分發
除非用 Shopify Headless,否則不要自己預先輸出 WebP。平台的 image_url Liquid filter 會自動生成響應式 WebP 版本。
本工作流用到的工具
每個工具在 Shopify 商店 的圖片處理流程裡都有專屬作用。
常見踩雷
Shopify 商店 賣家最常踩的幾個雷,以及怎麼提前避開。
上傳 800×800 的圖,指望 CDN 幫你救回來
Shopify 不會放大。小於 2048px 的圖在視網膜螢幕 PDP 和懸停縮放上都會發軟。上傳前永遠先放大到 2048×2048。
整店產品背景不一致
有的產品 #FFFFFF,有的 #FAFAFA,有的帶漸層。這是讓 Shopify 商店看起來業餘的頭號原因。挑一個背景,整店所有 SKU 都跑同一套流程。
變體圖一看就是修出來的
顧客一眼就能看出來換色是修出來的。用 Style Transfer 或直接生成 product shoot,做出真的看起來不同的變體。
Shopify 後台上傳時忘填 alt 文字
Shopify 商品圖的 alt 欄位是真正的 SEO 訊號。用類似「Navy linen blazer — front view on white background」這種描述性 alt,而不是檔案名。
為什麼 Shopify 商店的命脈是視覺一致性
在 Amazon 上,顧客拿你的 listing 和直接競品比較。在 Shopify 上,顧客是在 Collection 頁拿你自己的產品互相比較。這改變了「好圖」的定義。一個 Shopify 商品頁可以單獨看攝影很好,但如果 Collection 網格裡的 8 張圖視覺上不和諧——背景不一樣、留白不一樣、色溫不一樣、陰影不一樣——整體轉換就會掉。本指南的 AI 工作流解決一致性這個問題,方法是給每個 SKU 套用完全相同的處理。結果不一定比你手工修的更漂亮,但下一張、再下一張、200 張之後,全都看起來一模一樣。這種統一性才會讓顧客覺得這是個真正的品牌。
常見問題
Shopify 商品圖用多大尺寸?
至少 2048 × 2048 像素,方形。Shopify 的圖片 CDN 會自動生成響應式的小尺寸版本,並為前台轉成 WebP。小於 1500px 的原圖在視網膜螢幕和 PDP 縮放下看起來會發軟。
Shopify 會自動分發 WebP 嗎?
會。現代 Shopify 主題用 image_url Liquid filter,會為相容的瀏覽器生成 WebP 版本,並保留 JPG/PNG 後備。你上傳高品質的 JPG/PNG 母版,CDN 負責分發。
不重拍怎麼做變體圖?
同件衣服換顏色用 Style Transfer;要真正不同的場景用 AI Product Shoot。一看就是修出來的變體圖顧客一眼能看穿;AI 生成的變體看起來像分開拍的。
AI 影像工具能直接接 Shopify 嗎?
可以——ImageAI 提供 API,支援 Headless 和標準 Shopify 商店。新商品上傳時可以自動跑去背、增強、放大的流水線。需要對接請聯絡我們。
Shopify 母版用什麼格式最好?
不需要透明的產品圖用 JPG;需要在 banner 和生活情境裡複用的透明 cutout 用 PNG。Shopify 前台分發時兩者都會轉成 WebP,所以母版格式只影響你後續編輯的彈性。