登入
開始免費試用

上傳圖片

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

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

此頁面上

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

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

步驟如下：

電腦版

  1. 在 Shopify 管理介面中，前往「網路商店」>「佈景主題」。

  2. 在要上傳圖片的佈景主題按一下「自訂」。

  3. 選用：若您想在商店首頁以外的其他頁面新增圖片，請點按「首頁」下拉式選單，然後選取要編輯的範本。

  4. 在佈景主題編輯器側邊欄中，點按要新增圖片的區段或區塊。

  5. 在「圖片」欄位中，執行下列其中一個動作：

    • 若要從電腦上傳圖片，請完成下列步驟：

      1. 點按「選取圖片」>「新增圖片」。
      2. 在您的電腦上找到並開啟圖片。
      3. 按一下「完成」。

    • 若要使用 Burst 中的免費圖庫圖片，請完成下列步驟：

      1. 按一下「探索免費圖片」。
      2. 找到想要使用的圖片。
      3. 然後點擊「選取」。

  6. 按一下「儲存」。

iPhone

  1. 在 Shopify 應用程式中，點選「…」按鈕。

  2. 在「銷售管道」區段中，點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 在要上傳圖片的佈景主題點選「自訂」。

  5. 選用：若您想在商店首頁以外的其他頁面新增圖片，請點選「首頁」下拉式選單，然後選取要編輯的範本。

  6. 點選「區段」，然後點選要新增圖片的區段或區塊。

  7. 在「圖片」欄位中，執行下列其中一個動作：

    • 若要從裝置上傳圖片，請完成下列步驟：

      1. 點選「選取圖片」>「新增圖片」。
      2. 在您的裝置上找到並開啟圖片。
      3. 點選「完成」。

    • 若要使用 Burst 中的免費圖庫圖片，請完成下列步驟：

      1. 點選「探索免費圖片」。
      2. 找到想要使用的圖片。
      3. 點選「完成」。

  8. 點選「儲存」。

Android

  1. 在 Shopify 應用程式中，點選「☰」按鈕。

  2. 在「銷售管道」區段中，點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 在要上傳圖片的佈景主題點選「自訂」。

  5. 選用：若您想在商店首頁以外的其他頁面新增圖片，請點選「首頁」下拉式選單，然後選取要編輯的範本。

  6. 點選「區段」，然後點選要新增圖片的區段或區塊。

  7. 在「圖片」欄位中，執行下列其中一個動作：

    • 若要從裝置上傳圖片，請完成下列步驟：

      1. 點選「選取圖片」>「新增圖片」。
      2. 在您的裝置上找到並開啟圖片。
      3. 點選「完成」。

    • 若要使用 Burst 中的免費圖庫圖片，請完成下列步驟：

      1. 點選「探索免費圖片」。
      2. 找到想要使用的圖片。
      3. 點選「完成」。

  8. 點選「✓」。

使用中繼欄位新增圖片

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

設定圖片上的焦點

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

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

焦點與 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 版及更高版本

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

為圖片新增焦點

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

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

步驟如下：

  1. 在 Shopify 管理介面的以下任何位置點按圖片：

    • 在「內容」>「檔案」區段。
    • 在佈景主題編輯器中。
    • 於「多媒體檔案」區段 (位於「產品」區段的產品資訊中)。
    • 在 Shopify Email 編輯器中。
    • 在具有「檔案參考」類型中繼欄位 (用於新增圖片) 的任何資源的「中繼欄位」區段中。

  2. 若要在圖片中選取要設定焦點的部分，請點按圖片或拖曳藍色圓點。

  3. 按一下「儲存」。

移除圖片的焦點

步驟如下：

  1. 在 Shopify 管理介面的以下任何位置點按圖片：

    • 在「內容」>「檔案」區段。
    • 在佈景主題編輯器中。
    • 於「多媒體檔案」區段 (位於「產品」區段的產品資訊中)。
    • 在 Shopify Email 編輯器中。
    • 在具有「檔案參考」類型中繼欄位 (用於新增圖片) 的任何資源的「中繼欄位」區段中。

  2. 點擊「移除」。

  3. 點按「另存為新項目」。

圖片格式

支援以下圖片格式：

  • JPEG
  • 漸進式 JPEG
  • PNG
  • GIF
  • HEIC
  • WebP

使用 JPEG 圖片

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

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

使用 PNG 圖片

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

  • 商標
  • 圖示
  • 邊框和飾邊

自動壓縮圖片和選取格式

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

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

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

圖片上傳限制

上傳至 Shopify 的圖片，在百萬像素 (MP) 和檔案大小方面都有限制，檔案大小以 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 有時僅會顯示部分圖片，端視您使用的裝置而定。若您的圖片素材輪播包含許多大型圖片，您可能會注意到某些圖片並未顯示。

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

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

  • 您用於素材輪播或背景的圖片不應含有文字。如果文字是圖片本身的一部分，则可能會根據您的佈景主題移動、裁剪或調整。使用佈景主題編輯器將文字和連結新增至素材輪播和背景。

  • 針對您用於素材輪播或作為背景的圖片，請選擇簡單的圖片，以便閱讀疊加在上的文字。

長螢幕上的寬圖片

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

長螢幕上的寬圖片

寬螢幕上的長圖片

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

寬螢幕上的長圖片

沒有找到您需要的答案嗎？我們很樂意為您提供協助。