Shopify banner size for desktop and mobile (free crop checker)
Pick a Shopify theme, upload a banner and watch it on real screen widths, using each theme’s real banner sizes. Mark the part that must stay visible and we’ll tell you where it gets cut.
- 1Pick your theme
- 2Upload your banner
- 3Check each screen
Every screen, side by side
Point at a screen to see its visible area on your banner.
Phones
Under 600 px wide
Tablets and desktops
600 px and wider
Why your Shopify banner is cropped on mobile
Shopify themes give a banner a set height and stretch it to the full width of the screen. The image then fills that box and anything that doesn’t fit is trimmed off. A phone is narrow but the banner stays tall, so a wide desktop banner loses most of its left and right sides.
For example, a 2400 × 1000 px banner on Dawn’s Large setting shows about 83% of its width on a 1440 px laptop, but only about 42% on an iPhone 16. Text or a product placed near the edges is the first thing to disappear. You can check this with your own image in the simulator above.
How to fix a cropped banner on mobile
- Use a separate mobile image if your theme has one. Some sections in Broadcast, Prestige and Impulse have a mobile image field. Dawn and Horizon’s banners don’t, so one image has to work on every screen. The note under the preview tells you which case you’re in.
- Keep what matters in the middle. Draw a box around your headline, button or product in the simulator. If it’s cut off, move it toward the centre of the image, or set the focal point on it. Dawn and Horizon use the focal point you set in Shopify admin to decide which part stays.
- Pick a height that suits your image. Dawn offers Small, Medium, Large and Adapt to image. Adapt to image never crops, but the banner gets short on phones, so overlay text may not fit.
- Don’t bake text into the image. Use the theme’s own heading and button settings so the text stays readable and isn’t trimmed with the picture.
- Upload a crop made for phones. Use “Download mobile crop” to get a version cut to a phone-shaped box around your important area, then use it as the mobile image where your theme allows.
If your theme has no mobile image field and you want a different banner layout on phones, an app like Slider Revolution lets you lay out each slide for desktop, tablet and mobile separately.
How to check your banner on mobile
- Choose your theme and the section that holds your banner.
- Upload your banner, then drag a box around the text or product that must stay visible.
- Look at the four phone previews. Any “Area cut” label means that part is lost on that phone.
- Adjust the focal point or download the mobile crop, and check again.
How the banner is sized
See the sizes at each screen width
| Screen width | Banner box | Shape |
|---|
Want the full size reference for every banner type? Read our Shopify image banner size guide, or see the best image sizes for Shopify banners, products and sliders.
Frequently asked questions (FAQ)
What size is a Shopify banner on mobile?
It depends on your theme. On a phone the banner is as wide as the screen (360 to 440 px on most phones) and a fixed height. With default settings, that height is 280, 340 or 390 px on Dawn (Small, Medium or Large), 340 px on Horizon’s hero, 796 px on Impulse’s slideshow and 1,064 px on Broadcast’s slideshow. About 1,200 px wide is enough for a sharp image on a phone. Larger screens need more, so use the “Size to upload” figure for your theme.
Why is my Shopify banner cropped on mobile?
The theme fixes the banner’s height but not its width. Phones are narrow, so the image is scaled to fill a tall, narrow box and the left and right sides are trimmed. Upload your banner above to see exactly what each phone shows.
Can I upload a separate mobile banner on Shopify?
It depends on the theme and the section. Broadcast’s slideshow, Impulse’s shoppable hero and several Prestige banners have a separate mobile image field. Dawn’s image banner and Horizon’s hero don’t. The note under the theme picker tells you which applies. If yours doesn’t have one, keep your key content in the centre and set the focal point.
What size should my Shopify slideshow image be?
Slides in a slideshow share one box, so use the same dimensions for every slide. With default settings, that box is 900 px tall on desktop and 1,064 px on phones in Broadcast, 1,224 px tall on desktop and 796 px on phones in Impulse, and 1,000 px tall on tablets and desktops in Prestige. Choose your theme and its slideshow section above, then upload your image to test it.
How do I stop text being cut off on my banner?
Draw a box around the text in the simulator. Any phone marked “Area cut” loses part of it. Move the text toward the centre of the image, set the focal point on it, or use the theme’s own heading and button settings instead of putting the text in the picture.
