上傳圖片

您可以使用不同類型的圖片，例如公司標誌、產品圖片、素材輪播、橫幅和網誌文章圖片。您還可以透過裁剪和調整大小的動作來轉換圖片，並在佈景主題中自訂多媒體檔案設定，以變更所有多媒體檔案在商店顯示時的邊框或陰影。

要讓網路商店中的圖片完全照自己的需求顯示，您必須使用正確的圖片寬高比。請使用 Shopify 內容傳送網路 (CDN) 自動最佳化您店面的圖片。

此頁面上

在佈景主題編輯器中上傳圖片

您可以在佈景主題編輯器中將圖片新增至佈景主題，或是從 Shopify 管理介面的「內容」>「檔案」區段上傳圖片。若要瞭解詳情，請參閱「上傳和管理檔案」。

步驟：

電腦版

在 Shopify 管理介面中，前往「線上商店」>「佈景主題」。
在要上傳圖片的佈景主題按一下「自訂」。
選用：若您想在商店首頁以外的其他頁面新增圖片，請點按「首頁」下拉式選單，然後選取要編輯的範本。
在佈景主題編輯器側邊欄中，點按要新增圖片的區段或區塊。
在「圖片」欄位中，執行下列其中一個動作：
- 若要從電腦上傳圖片，請完成下列步驟：
  1. 點按「選取圖片」>「新增圖片」。
  2. 在您的電腦上找到並開啟圖片。
  3. 點擊「完成」。

- 若要使用 Burst 中的免費圖庫圖片，請完成下列步驟： 1. 按一下「探索免費圖片」。 2. 找到想要使用的圖片。 3. 然後點擊「選取」。

點擊「儲存」。

iPhone

在 Shopify 應用程式中，點選「…」按鈕。
在「銷售管道」區段中，點選「網路商店」。
點選「管理所有佈景主題」。
在要上傳圖片的佈景主題點選「自訂」。
選用：若您想在商店首頁以外的其他頁面新增圖片，請點選「首頁」下拉式選單，然後選取要編輯的範本。
點選「區段」，然後點選要新增圖片的區段或區塊。
在「圖片」欄位中，執行下列其中一個動作：
- 若要從裝置上傳圖片，請完成下列步驟：
  1. 點選「選取圖片」>「新增圖片」。
  2. 在您的裝置上找到並開啟圖片。
  3. 點選「完成」。

- 若要使用 Burst 中的免費圖庫圖片，請完成下列步驟： 1. 點選「探索免費圖片」。 2. 找到想要使用的圖片。 3. 點選「完成」。

點選「儲存」。

Android

在 Shopify 應用程式中，點選「☰」按鈕。
在「銷售管道」區段中，點選「網路商店」。
點選「管理所有佈景主題」。
在要上傳圖片的佈景主題點選「自訂」。
選用：若您想在商店首頁以外的其他頁面新增圖片，請點選「首頁」下拉式選單，然後選取要編輯的範本。
點選「區段」，然後點選要新增圖片的區段或區塊。
在「圖片」欄位中，執行下列其中一個動作：
- 若要從裝置上傳圖片，請完成下列步驟：
  1. 點選「選取圖片」>「新增圖片」。
  2. 在您的裝置上找到並開啟圖片。
  3. 點選「完成」。

- 若要使用 Burst 中的免費圖庫圖片，請完成下列步驟： 1. 點選「探索免費圖片」。 2. 找到想要使用的圖片。 3. 點選「完成」。

點選「✓」。

使用中繼欄位新增圖片

如果您為圖片設定了中繼欄位，即可使用動態來源選擇器將圖片新增至網路商店。若要進一步瞭解中繼欄位和支援的圖片格式，請參閱「在中繼欄位新增值」。

設定圖片上的焦點

您可以使用焦點來定義網路商店圖片最重要的部分。設定圖片焦點時，就是將該區域設為焦點區域。焦點會一律顯示在框架中，即使佈景主題會裁剪圖片以配合版面配置也是如此。在圖片顯示於不同螢幕尺寸以及佈景主題使用不同寬高比的情況下，焦點讓您更能掌控圖片的顯示方式。

每張圖片只能有一個焦點，但您隨時都可以變更或移除焦點。

焦點與 Shopify 免費佈景主題的相容性

您可以對下列版本的 Shopify 免費佈景主題設定焦點：

Colorblock 3.0.0 版及更高版本
Craft 5.0.0 版及更高版本
Crave 5.0.0 版及更高版本
Dawn 7.0.0 版及更高版本
Origin 1.0.0 版及更高版本
Publisher 1.0.0 版及更高版本
Refresh 2.0.0 版及更高版本
Ride 3.0.0 版及更高版本
Rise 1.0.0 版及更高版本
Sense 5.0.0 版及更高版本
Spotlight 0.0.1 版及更高版本
Studio 4.0.0 版及更高版本
Taste 4.0.0 版及更高版本
Trade 1.0.0 版及更高版本

如果您使用第三方佈景主題，請查看佈景主題說明文件，瞭解您的佈景主題是否支援使用焦點。

為圖片新增焦點

如果您在圖片新增焦點，然後在網路商店的多個位置使用該圖片，則無論使用圖片的位置為何，所有位置均適用相同焦點。

視佈景主題圖片的裁切方式和大小而定，焦點可能不會一直位於視覺要素的中間。

步驟：

在 Shopify 管理介面的以下任何位置點按圖片：
- 在「內容」>「檔案」區段。
- 在佈景主題編輯器中。
- 於「多媒體檔案」區段 (位於「產品」區段的產品資訊中)。
- 在 Shopify Email 編輯器中。
- 在具有「檔案參考」類型中繼欄位 (用於新增圖片) 的任何資源的「中繼欄位」區段中。
若要在圖片中選取要設定焦點的部分，請點按圖片或拖曳藍色圓點。
點擊「儲存」。

移除圖片的焦點

步驟：

在 Shopify 管理介面的以下任何位置點按圖片：
- 在「內容」>「檔案」區段。
- 在佈景主題編輯器中。
- 於「多媒體檔案」區段 (位於「產品」區段的產品資訊中)。
- 在 Shopify Email 編輯器中。
- 在具有「檔案參考」類型中繼欄位 (用於新增圖片) 的任何資源的「中繼欄位」區段中。
點擊「移除」。
點按「另存為新項目」。

圖片格式

支援以下圖片格式：

JPEG
漸進式 JPEG
PNG
GIF
HEIC
WebP
AVIF

使用 JPEG 圖片

JPEG 圖片適合攝影和其他色彩繽紛的靜態圖片。JPEG 格式具有數百萬種顏色的調色板。JPEG 還具有破壞性壓縮功能，有助於保持載入頁面的速度，而不會明顯降低圖片品質。使用 JPEG 格式處理下列類型的圖片：

產品
橫幅或素材輪播
頁面和部落格文章

使用 PNG 圖片

PNG 圖片非常適合不含漸層的單色圖像和圖示。PNG 格式也支援圖片的透明度。使用 PNG 格式處理下列類型的圖片：

商標
圖示
邊框和飾邊

自動壓縮圖片和選取格式

為了保持頁面快速載入，Shopify 會自動壓縮顯示在網路商店的圖片。壓縮圖片可以減少檔案大小，加快頁面載入的速度。

此外，Shopify 會在傳送圖片時自動決定適用的最佳檔案格式。舉例來說，當偵測到顧客的網頁瀏覽器支援 WebP 和 AV1 圖片檔案格式 (AVIF) 等新型圖片格式，系統就會使用該種格式傳送您的圖片。

為了透過縮小檔案大小來改善成效，GIF 會自動轉換為動畫 WebP 格式。

圖片上傳限制

上傳至 Shopify 的圖片，在百萬像素和檔案大小方面都有限制，檔案大小以 MB 為單位。百萬像素用於表示有多少百萬像素構成圖片。MB 用於表示圖片佔用了多少百萬位元組的記憶體或磁碟空間。

上傳至 Shopify 的圖片不可超過下列任一限制：

20 百萬像素
20 MB

若要找出圖片的百萬畫素值，您可以使用下列算式：

(pixel width x pixel height)/1,000,000

例如，解析度為 4900 像素乘以 6930 像素的圖片，依算式得出為 33.9 百萬像素：(4900x6930)/1,000,000 = 33.9 MP。

圖片顏色設定檔

在網路商店檢視圖片時，圖片的顏色可能會與上傳到 Shopify 的原始圖片顏色有所不同。當圖片包含色彩設定檔時就可能發生此問題；顏色設定檔指的是以 .ICC 或 .ICM 副檔名儲存的一組資料。

色彩設定檔通常會嵌入圖片，讓顏色在不同裝置上顯示的方式標準化。圖片在您的線上商店中顯示時，將會移除色彩設定檔。

系統會因以下原因移除顏色設定檔：

某些裝置無法讀取 .ICC 或 .ICM 色彩設定檔，因此保留設定檔可能會導致各裝置上的圖片色彩不一致。
上傳的圖片不含色彩設定檔時，網頁瀏覽器會採用 sRGB，這是網頁顯示圖片最常用的色彩設定檔。這可確保您的圖片在所有主要網頁瀏覽器和裝置的顯示效果相同。
色彩設定檔可能占用大量磁碟空間，這會導致頁面載入時間更長。

移除圖片的色彩設定檔

將圖片上傳至 Shopify 之前，您可以儲存不含色彩設定檔的圖片，將色彩設定檔從圖片移除。此程序會因您的圖片編輯程式而有所不同。

請參閱 Adobe 文件，瞭解如何指派或移除顏色設定檔 (Illustrator、Photoshop)，以及指派或移除顏色設定檔 (InDesign)。

許多 Shopify 佈景主題都提供大型圖片或素材輪播，可放大至瀏覽器高度或調整至螢幕尺寸。

如果您使用其中一個佈景主題或擁有大型素材輪播或背景圖片，您需瞭解哪種類型的圖片的顯示效果最佳。

由於大型圖片無法配合所有裝置，因此 Shopify 有時僅會顯示部分圖片，端視您使用的裝置而定。若您的圖片素材輪播包含許多大型圖片，您可能會注意到某些圖片並未顯示。

使用圖片做為素材輪播或圖片橫幅時的考量事項

為確保您的圖片能與佈景主題完美搭配，請留意以下事項：

您用於素材輪播或背景的圖片不應含有文字。如果文字是圖片本身的一部分，则可能會根據您的佈景主題移動、裁剪或調整。使用佈景主題編輯器將文字和連結新增至素材輪播和背景。
針對您用於素材輪播或作為背景的圖片，請選擇簡單的圖片，以便閱讀疊加在上的文字。

長螢幕上的寬圖片

若查看圖片所使用的裝置螢幕較長 (例如以直向模式查看手機或平板電腦)，則寬圖片的左右兩側可能會遭到裁剪。在下面的範例中，如果人物是圖片最重要的部分，可以將焦點放在圖片右側。

寬螢幕上的長圖片

若用於檢視圖片的裝置是寬螢幕 (如筆記型電腦或桌上型電腦的螢幕)，則長圖片的上下兩端可能會遭到裁剪。在下面的範例中，如果鞋子是圖片最重要的部分，可以將焦點放在圖片底部。