上傳圖片
您可以在網路商店中使用許多不同類型的圖片,包括公司商標、商品圖片、素材輪播、橫幅和網誌文章圖片。Shopify 除了會自動確保網路商店使用最佳格式的圖片外,還能讓您透過裁剪和調整大小等操作來靈活改造圖片。
在佈景主題編輯器中上傳圖片
您可以在佈景主題編輯器中將圖片新增至佈景主題,也可以從 Shopify 管理介面的「檔案」頁面上傳圖片。若要瞭解詳情,請參閱「將檔案上傳至網站」。
步驟:
- 在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
- 在您要自訂的佈景主題旁邊點擊「自訂」。
- 使用下拉式選單選取您要編輯的範本。
- 在佈景主題編輯器側邊欄中,點擊欲新增圖片的區段。
-
點擊選取圖片,然後執行下列其中一項操作:
- 若要從電腦上傳圖片,請點擊「上傳」。
- 若要使用 Burst 中的免費圖庫圖片,請點擊「瀏覽免費圖片」。
按一下圖片以預覽圖片在您佈景主題中如何顯示。在您找到所需圖片之後,請按一下「選擇」。
點擊「儲存」。
使用中繼欄位新增圖片
如果您為圖片設定了中繼欄位,您可以使用動態來源選擇器來新增圖片。若要更多有關中繼欄位和支援圖片格式的資訊,請參閱中繼欄位內容類型和值。
圖片橫幅
您可以建立包含以下元素的圖片橫幅:
- 一或兩張圖片
- 文字
- 動作按鈕
在桌上型電腦中,橫幅圖片會並排顯示。由於此格式並不適合行動裝置使用,因此您可以在圖片橫幅佈景主題設定中選取「在行動裝置上堆疊圖片」選項,藉此堆疊圖片橫幅的相片。如需圖片橫幅和素材輪播的更多資訊,請參閱「素材輪播和圖片橫幅的最佳做法」。
設定佈景主題圖片的焦點
您可以使用焦點來定義網路商店佈景主題圖片最重要的部分。設定圖片焦點時,就是將該區域設為焦點區域。 焦點會一律顯示在框架中,即使佈景主題會裁剪圖片以配合版面配置也是如此。 在佈景主題使用不同寬高比和不同螢幕尺寸時,焦點可讓您加強掌控圖片的顯示方式。
每張圖片只能有一個焦點,但您隨時都可以變更或移除焦點。
下列版本的 Shopify 免費佈景主題可設定焦點:
- Craft 版本 5.0.0 或更新版本
- Crave 版本 5.0.0 或更新版本
- Colorblock 版本 3.0.0 或更新版本
- Dawn 版本 7.0.0 或更新版本
- Refresh 版本 2.0.0 或更新版本
- Ride 版本 3.0.0 或更新版本
- Sense 版本 5.0.0 或更新版本
- Studio 版本 4.0.0 或更新版本
- Taste 版本 4.0.0 或更新版本
若您使用第三方佈景主題,請查看佈景主題說明文件,以確認您的主題是否支援使用焦點。
為圖片新增焦點
您可以在「檔案」區段和佈景主題編輯器中為圖片新增焦點。如果您為圖片新增焦點,然後在多個位置使用該圖片,則所有位置都會使用相同焦點。
您僅能將焦點新增至佈景主題圖片。 您無法為商品、網誌或商品系列圖片新增焦點。
步驟:
- 在佈景主題編輯器中,點擊包含圖片的區段或區塊。
- 點擊圖片上的「編輯」。
- 點擊「新增焦點」。
- 點擊並拖曳藍色圈圈,或點擊圖片最重要的部分以設定焦點。
- 點擊「完成」。
步驟:
- 在佈景主題編輯器中,點選或封鎖有圖片的區段。
- 點選圖片上的「編輯」。
- 點選「新增焦點」。
- 點選圖片最重要的部分以設定焦點。
- 點選「完成」。
步驟:
- 在佈景主題編輯器中,點選或封鎖有圖片的區段。
- 點選圖片上的「編輯」。
- 點選「新增焦點」。
- 點選圖片最重要的部分以設定焦點。
- 點選「完成」。
移除焦點
步驟:
- 在佈景主題編輯器中,點擊包含圖片的區段或區塊。
- 點選圖片上的「編輯」。
- 點擊「移除焦點」。
- 點擊「完成」。
步驟:
- 在佈景主題編輯器中,點選或封鎖有圖片的區段。
- 點選圖片上的「編輯」。
- 點選「移除焦點」。
- 點選「完成」。
步驟:
- 在佈景主題編輯器中,點選或封鎖有圖片的區段。
- 點選圖片上的「編輯」。
- 點選「移除焦點」。
- 點選「完成」。
圖片格式
Shopify 支援下列圖片格式:
- JPEG
- 漸進式 JPEG
- PNG
- GIF
- HEIC
- WebP
- AVIF
使用 JPEG 圖片的時機
JPEG 圖片適合攝影和其他色彩繽紛的靜態圖片。JPEG 格式具有數百萬種顏色的調色板。JPEG 還具有破壞性壓縮功能,有助於保持載入頁面的速度,而不會明顯降低圖片品質。
針對下列圖片類型使用 JPEG 格式:
- 產品
- 橫幅或素材輪播
- 頁面和部落格文章
使用 PNG 圖片的時機
PNG 圖片適合不含漸層的單色圖像和圖示。PNG 格式也可支援透明度。
針對下列圖片類型使用 PNG 格式:
- 商標
- 圖示
- 邊框和飾邊
自動壓縮圖片和選取格式
圖片在網路商店中顯示時,Shopify 會自動壓縮圖片以保持快速載入。壓縮圖片可以減少檔案大小,加快頁面載入的速度。
此外,Shopify 會在傳送圖片時自動決定可用的最佳檔案格式。舉例來說,一旦偵測到買家的網頁瀏覽器支援 WebP 和 AV1 圖片檔案格式 (AVIF) 等新型圖片格式,Shopify 便會以該種格式傳送您的圖片。
為了透過縮小檔案大小來改善成效,GIF 會自動轉換為動畫 WebP 格式。
上傳限制
上傳到 Shopify 的圖片,在百萬像素和檔案大小方面都有限制 (以 MB 為單位)。百萬像素用於表示有多少百萬像素構成圖片。MB 用於表示圖片使用了多少百萬位元組的記憶體或磁碟空間。
上傳至 Shopify 的圖片不可超過下列任一限制:
- 2500 萬像素
- 20 MB
若要尋找圖片的百萬像素,您可以使用下列算式:(pixel width x pixel height)/1,000,000
。例如解析度為 4900x6930 的圖片,依算式得出為 33.9 百萬像素:(4900x6930)/1,000,000 = 33.9 MP
。
色彩設定檔
當您在線上商店中檢視圖片時,圖片的顏色可能與您上傳到 Shopify 的原始顏色不同。當圖片包含色彩設定檔時就可能發生此問題,顏色設定檔指的是以 .ICC
或 .ICM
副檔名儲存的一組資料。色彩設定檔通常會嵌入圖片,以協助在不同裝置上標準化色彩顯示的方式。圖片在您的線上商店中顯示時,將會移除色彩設定檔。
移除色彩設定檔的理由如下:
- 某些裝置無法讀取
.ICC
或.ICM
色彩設定檔,因此保留設定檔可能會導致各裝置上的圖片色彩不一致。 - 當上傳的圖片不含色彩設定檔時,Web 瀏覽器會採用 sRGB (用於顯示網上圖片的最常用色彩設定檔)。這可確保您的圖片在所有主要 Web 瀏覽器和裝置上看起來都相同。
- 色彩設定檔可能占用許多磁碟空間,這會導致載入時間冗長。
移除圖片的色彩設定檔
將圖片上傳至 Shopify 之前,您可以儲存不含色彩設定檔的圖片,將色彩設定檔從圖片移除。此程序會因您的圖片編輯程式而有所不同。
使用 Adobe Illustrator 或 Adobe Photoshop 移除色彩設定檔。
若要使用 Adobe Illustrator 或 Adobe Photoshop 移除色彩設定檔:
依序按一下「編輯 > 指派設定檔」。
選擇「不要對此文件進行色彩管理」。
按一下「確定」。
使用 Adobe InDesign 移除色彩設定檔
若要使用 Adobe InDesign 移除色彩設定檔:
依序按一下「編輯 > 指派設定檔」。
針對 RGB 設定檔和 CMYK 設定檔,請選擇「捨棄 (使用目前的工作空間)」。
按一下「確定」。
如需詳細資訊,您可以檢視 Adobe 色彩設定檔說明文件。
素材輪播、圖片橫幅和全寬度圖片的最佳做法
許多 Shopify 佈景主題都提供大型圖片或素材輪播,可放大至瀏覽器高度或調整至螢幕尺寸。
如果您使用其中一個佈景主題或擁有大型投影片輪播或背景圖片,那麼瞭解哪種類型的圖片看起來最佳非常重要。
由於大型圖片無法配合所有裝置,因此 Shopify 有時僅會顯示部分圖片,端視您使用的裝置而定。若您的圖片素材輪播包含許多大型圖片,您可能會注意到某些圖片並未顯示。
推薦
為確保您的圖片與佈景主題能配合良好,請留意以下事項:
您用於素材輪播或背景的圖片不應含有文字。如果文字是圖片本身的一部分,那麼它可能會根據您的佈景主題移動、裁剪或調整。使用佈景主題編輯器將文字和連結新增至您的素材輪播內容。
針對您用於素材輪播或作為背景的圖片,請選擇簡單的圖片,以便閱讀疊加在上的文字。
長螢幕上的寬圖片
若查看圖片所使用的裝置螢幕較長 (如手機或平板電腦),寬圖片的左側和右側可能會遭到裁剪。在下面的範例中,如果人是圖片最重要的部分,您就可以將焦點放在圖片右側:
寬螢幕上的長圖片
若查看圖片所使用的裝置是寬螢幕 (如手機或平板電腦),長圖片的頂部和底部可能會遭到裁剪。在下面的範例中,如果鞋子是圖片最重要的部分,您就可以將焦點放在圖片底部,以免遭到裁剪: