Shopify Banner Size Tool
Crop a hero or slideshow photo for desktop and mobile at once, with a safe area that works on both.
How it works
Shopify themes don't have one fixed banner size: your theme's section settings decide the shape. Set your desktop and mobile shapes here (measure your live theme's banner if you're not sure), click the photo to set a focal point, and the tool crops both sizes from the same source photo.
The green safe area overlay is where the desktop and mobile crops overlap. Keep your headline, logo or the product itself inside it, and it stays visible whichever shape your theme actually renders.
Shopify's upload limits for theme images
| Value | |
|---|---|
| Maximum size | 20 megapixels (about 4472 × 4472 px if square) |
| Maximum file size | 20 MB |
| Formats | JPEG, PNG, GIF, HEIC and WebP |
Finding your theme's banner shape
- 01
Check your live banner
Right-click the banner image on your published store and open it in a new tab, or check its width and height in your browser's inspector, and divide width by height to get the ratio.
- 02
Match it here
Pick the closest preset, or enter a custom aspect ratio in the desktop and mobile shape fields.
- 03
Upload both sizes
Most themes take one image and crop it with CSS for mobile, so check whether your theme has a separate mobile image setting before uploading two different files.
Questions people ask
What size is a Shopify banner?
There's no single answer: it's set by your theme's section settings. A common desktop shape is 16:9, with something taller like 4:5 for mobile, but always check your own theme rather than assuming.
What's the largest image Shopify's theme editor accepts?
20 megapixels (about 4472 x 4472 px for a square image) and 20 MB, according to Shopify's help center. That's a lower megapixel cap than product images, which allow up to 25 MP.
Why does my banner look different on mobile than desktop?
Most Shopify themes crop the same image to a different shape on phones. The safe area on this tool shows what's visible in both crops, so you can keep the important part of the photo inside it.
Should I upload a separate photo for mobile?
Only if your theme has a distinct mobile image setting. Otherwise, one wide photo with the subject inside the safe area works for both.
Related tools
Want this builtinto your store?
I'm Emmanuel, a Shopify and WooCommerce developer. If this tool pointed at something you'd rather have fixed for you (a faster store, cleaner product data, a migration, a custom feature), send me a note.
Emmanuel Asika
Shopify & WooCommerce developer, Dublin
I build and fix online stores: new builds, migrations, speed, SEO and the custom bits apps can't do.
Last reviewed 30 September 2026.
Sources: Shopify Help Center: Uploading images (theme, blog and file uploads)