跳至主要內容

桌面版、行動版,以及兩者之間的變化

Shopify 橫幅尺寸與行動版裁切指南

檢查佈景主題如何裁切橫幅,再選擇桌面版畫布;如果佈景主題支援,也為行動版安排獨立構圖。

看看行動版有哪些變化

比較置中裁切與專門為行動版設計的構圖。

窄畫框可能裁掉寬幅圖片的兩側。僅增加像素無法修正構圖。

用作橫幅構圖參考的 AI 概念陶器系列。
用作橫幅構圖參考的 AI 概念陶器系列。
置中裁切

示意版面中的 AI 生成構圖範例。最終裁切效果由你的 Shopify 佈景主題決定。

01

桌面版起始畫布

2400 × 1000 px

這是規劃範例,並非必要尺寸或保證的輸出尺寸。

02

行動版起始畫布

1200 × 1500 px

適用於提供行動版圖片欄位之佈景主題的規劃範例。

03

佈景主題上傳限制

20 MP / 20 MB

Shopify 分別限制像素總量和檔案大小。

先確定區塊,再選擇尺寸

佈景主題、區塊高度和螢幕形狀決定橫幅的顯示方式。表格分別列出畫布範例與 Shopify 上傳限制。

先確定區塊,再選擇尺寸
位置或要求畫布或上傳限制檢查事項
桌面版寬幅橫幅2400 × 1000 px — 12:5這是我們建議的起始尺寸。為標題留出空間,並讓主體遠離容易被裁掉的邊緣。
行動版直式橫幅1200 × 1500 px — 4:5如果佈景主題提供獨立的行動版圖片,可參考這個建議尺寸。配合較窄的螢幕重新構圖。
兩種螢幕共用一張圖符合區塊的長寬比將重要主體放在兩種預覽中都可見的區域內,並檢查是否支援焦點設定。
佈景主題圖片上傳最高 20 MP 和 20 MB佈景主題圖片的上傳限制與商品媒體的限制不同。

桌面版和行動版畫布僅作為規劃範例,並非 Shopify 的要求、PagePop 保證的輸出尺寸,也不是這裡所示概念圖的實際尺寸。請檢查下載檔案;如果佈景主題要求其他尺寸,再調整檔案尺寸。

規格核對日期: 2026-10-14Shopify 佈景主題圖片與裁切說明

在佈景主題中檢查橫幅

  • 確定實際使用的區塊,以及桌面版和行動版的高度設定。
  • 盡可能使用佈景主題的標題和按鈕欄位,並在圖片對應位置留出清楚的空間。
  • 發佈前,在桌面版和行動版預覽主體和文字。
  • 如果主體被裁切,請檢查區塊高度、圖片比例和圖片焦點。
  • 只有佈景主題支援行動版圖片欄位時,才使用獨立的行動版構圖。

為你的區塊生成橫幅

向橫幅製作工具提供商品參考圖、區塊形狀和行動版選項。

生成橫幅

開始前,你可能想了解

Shopify 橫幅有標準尺寸嗎?

合適的橫幅尺寸取決於佈景主題和區塊。我們的規劃範例為 2400 × 1000 px 的桌面版寬幅畫布,以及 1200 × 1500 px 的行動版直式畫布。這些範例並非 Shopify 要求或 PagePop 保證的輸出尺寸。上傳前,請確認佈景主題要求並檢查實際檔案。

為什麼 Shopify 橫幅在行動版會被裁切?

寬幅圖片與較高的行動版圖片區域比例不同。為了填滿該區域,佈景主題可能會隱藏圖片兩側的一部分。僅增加解析度不會改變裁切方式。

如何減少橫幅中不想要的裁切?

檢查區塊高度或配合圖片調整的選項。在佈景主題支援的情況下,設定焦點、使用更接近區塊的圖片比例,或上傳獨立的行動版構圖。每次修改後都在實際佈景主題中預覽。

所有 Shopify 佈景主題都能使用獨立的行動版橫幅嗎?

只有部分佈景主題和區塊提供獨立的行動版圖片欄位。請查看佈景主題設定和文件。如果沒有行動版圖片欄位,請使用同一張圖片,並在桌面版和行動版寬度下預覽構圖。

Shopify 佈景主題橫幅圖片有哪些檔案限制?

佈景主題圖片上傳文件列出的上限為 20 MP 和 20 MB。像素總量與檔案大小是兩項獨立限制。商品媒體的限制有所不同,請以實際上傳位置的要求為準。

橫幅圖片裡應該包含文字嗎?

盡可能使用佈景主題中的標題、說明和按鈕欄位。嵌入圖片的文字在行動版可能被裁切,或變得太小。留有清楚空間的背景,更方便放置易讀的可編輯內容。