How-to's · Shopify · 3 min read
Shopify Banner Sizes: An Easy Guide for Desktop and Mobile
Short answer
There is no single correct Shopify banner size because each theme and section setting crops differently. A safe approach is to upload wide images around 1920 to 2400 pixels across, keep important content in the center, check the theme's own recommendation and set a separate mobile image if your theme allows it.
Banner images are the first thing many visitors see, and they are also the thing most likely to look wrong on a phone. The confusion usually comes from expecting one magic pixel size. Shopify themes do not work that way. Understanding how they crop makes the problem easy.
Why there is no single size
Modern Shopify themes, including the Horizon family and older Online Store 2.0 themes like Dawn, let you choose a banner height (small, medium, large, adapt to image, or full screen, depending on the theme). The theme then fills that space with your image, usually by cropping. A screen that is 1440 pixels wide and one that is 390 pixels wide will show very different parts of the same file.
So the real questions are:
- How wide should the file be so it stays sharp?
- Where should the important content sit so it is not cropped?
Practical size guidelines
| Use | Suggested width | Notes |
|---|---|---|
| Full-width hero banner | 1920 to 2400 px | Height depends on theme setting; wide aspect like 16:9 or 3:1 works well |
| Slideshow slides | Same as hero | Keep all slides the same dimensions |
| Mobile-specific banner | About 750 to 1080 px wide | Taller aspect such as 4:5 or 1:1 |
| Image-with-text section | 1200 to 1500 px | Often shown at half width on desktop |
| Collection banner | 1920 px | Often short in height |
These are starting points used widely by merchants and theme developers, not official Shopify requirements. Always check your theme's documentation, which sometimes lists recommended sizes per section.
The safe zone rule
Assume the outer edges of your banner may be cropped. Keep faces, products and anything important inside the central area. Leave breathing room at the top and bottom for when the theme uses a shorter height.
If your theme offers an "Adapt to image" height option, the banner will display at the image's own aspect ratio, which avoids cropping but can make banners very tall on mobile.
Use a separate mobile image when possible
Many themes let you upload a different image for mobile. Use it. A wide lifestyle shot that looks great on desktop often becomes an unreadable strip on a phone. A tighter, taller crop of the same scene works much better.
If your theme does not offer a mobile image field, choose banner photos with a strong central subject.
Keep text out of the image
It is tempting to design a banner in Canva with the headline baked in. Problems:
- Text shrinks to an unreadable size on mobile
- Cropping can cut words in half
- Search engines and screen readers cannot read it
- You have to redesign the image to change a single word
Use the theme's heading, subheading and button settings instead. Adjust the overlay opacity so text stays readable over busy photos.
File format and weight
- JPG or WebP for photos. Shopify converts and serves optimized formats automatically to supported browsers.
- PNG only for graphics needing transparency.
- Aim to keep originals reasonably light. Very large files slow down the theme editor and can delay the first paint on slow connections.
- Name files descriptively and add alt text describing the image.
Quick checklist before publishing
- Upload at 1920 px or wider for full-width sections.
- Preview desktop, tablet and mobile in the theme editor.
- Check that no important content is cropped.
- Add a mobile image if supported.
- Use theme text fields rather than text in the image.
- Add alt text.
For slideshow specifics, see the best Shopify slideshow dimensions. If you are still choosing a theme, our list of free Shopify themes and how to change themes on Shopify will help.
Frequently asked questions
What is the best Shopify banner size?
Many merchants use images about 1920 to 2400 pixels wide for full-width banners. The height depends on your theme's banner height setting, so check the theme documentation and preview on mobile.
Why does my Shopify banner get cut off?
Themes usually fill the section by cropping the image to fit the screen. On narrow mobile screens, the sides of a wide image get cropped. Keep key content centered or use a separate mobile image.
Should I put text inside the banner image?
It is better to add text using the theme's heading and button fields. Text baked into images does not resize well, is hard to read on mobile and is invisible to search engines and screen readers.
Platform features, prices and policies change. Check the official help pages linked above before you act on a detail that matters to your store.