Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesFor a narrow Shopify website banner, start with 1200 × 400 px for desktop and 360 × 120 px for mobile—both are 3:1. For a large homepage hero, Shopify’s guidance instead lists 1600 × 500 px for desktop and 800 × 1200 px for mobile. Choose based on the section and your theme: its height, crop, and mobile-image settings determine what visitors actually see.
Which Shopify banner dimensions should you use?
Shopify’s image-size guide recommends a 3:1 image for a shallow promotional banner. Its hero guidance describes a different job: a larger, prominent section that may need a portrait mobile composition. These dimensions are starting points, not guarantees of an identical result across themes.
| Use | Desktop image | Mobile image | How to choose |
|---|---|---|---|
| Narrow website banner | 1200 × 400 px | 360 × 120 px | Use for a shallow promotional strip or banner; both are 3:1. Shopify’s image-size guide. |
| Full hero or image-banner section | 1600 × 500 px | 800 × 1200 px | Use for a prominent section with room for a heading or call to action. The mobile version is portrait, so it calls for a different composition. Shopify’s hero guidance. |
| Maximum source upload | Up to 5000 × 5000 px and 20 MB | This is Shopify’s stated upload ceiling, not a recommended size to serve to every visitor. Shopify’s image-size guide. | |
Do not treat 1200 × 400 and 1600 × 500 as competing answers to the same question. The former suits a narrow banner; the latter is guidance for a more substantial hero. Start by identifying the actual theme section, then prepare artwork for its layout.
Why your theme and section settings matter
An uploaded image is not necessarily displayed at its original dimensions or full aspect ratio. A section may crop it to fill a set height, adapt its height to the image, or position text over part of the artwork. The image you upload is the source; the visible area is determined by the theme’s layout and display behavior.
Free tools Windows power users keep installed
One-click scans. No signup required.
What to check in the theme editor
- Confirm which section you are editing—such as a narrow banner or an image banner—and inspect its image-height and crop settings.
- Look for a setting that lets the section adapt its height to the image ratio. If the height is fixed, expect the theme to crop images that do not match the resulting frame.
- Check whether the section supports a separate mobile image, mobile stacking, or a focal-point control.
- Preview the live section at desktop and phone widths. Verify that the important subject, text, and call to action remain visible.
Shopify’s open-source Dawn theme illustrates why the section matters: its image-banner implementation switches behavior around a 750 px breakpoint, generates candidate image widths, and supports a second image for mobile stacking or art direction. Its responsive section padding can also derive from the uploaded image’s ratio. Theme code and settings can change over time, so use the behavior of your active theme rather than assuming every Shopify storefront works like Dawn. See the Dawn theme source.
Should you make a separate mobile banner?
Make one when the desktop composition cannot survive the mobile frame. Shopify’s hero guidance pairs a landscape desktop image with an 800 × 1200 px mobile image, which signals that the two placements may call for different art rather than a simple scaled-down desktop file. A phone crop may need a repositioned subject, fewer decorative details, or a different background so the message remains legible.
If the subject and text can remain clear in both layouts, one well-composed source may be enough. If the theme offers a dedicated mobile image and the desktop artwork would be cut off or cramped, supply a separate mobile crop. The useful test is the rendered section, not whether the two files share dimensions.
Protect the safe area
- Keep logos, headings, and calls to action near the visual center or in an area that survives both the desktop and mobile crops.
- Do not bake text close to an edge if the theme may crop the image or overlay its own text and buttons.
- Use the theme’s focal-point control when available to keep the important subject in view.
- Preview both layouts after uploading; a correct source size cannot prevent a poor crop caused by section settings.
How to prepare and check the banner
- Choose the section. In your Shopify theme editor, open the relevant page and identify whether the design uses a narrow banner or a full hero/image-banner section.
- Check its display controls. Note the selected height, crop or image-ratio behavior, focal point, and whether a mobile image can be selected.
- Export for the intended composition. Use 1200 × 400 px and 360 × 120 px as starting sizes for a narrow banner. For a full hero, use 1600 × 500 px and, if the theme supports it, an art-directed 800 × 1200 px mobile image.
- Keep important content inside the safe area. Position the focal subject and any image-baked text so they remain visible in the crops you intend to use.
- Upload and preview at both widths. Check the live section on desktop and mobile, including the position of any overlaid heading and button. Adjust the crop, focal point, or mobile image if needed.
- Compress and verify the result. Keep the file below Shopify’s stated 20 MB upload ceiling, but do not mistake the maximum for an efficient target. Check that the image loads at the size appropriate to the device.
Responsive delivery and image performance
A large source can be useful for a high-resolution display, but visitors on smaller screens should not have to download an unnecessarily large hero image. Shopify’s developer documentation recommends using image_tag, which can generate responsive srcset, sizes, and intrinsic dimensions so the browser can select an appropriate asset. See Shopify’s image_tag documentation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
For art-directed layouts, Shopify documents using the picture and source pattern to pair a desktop landscape image with a tighter or portrait mobile crop. This lets the browser choose the appropriate composition and can help avoid layout shift or downloading two hero-sized images unnecessarily. See Shopify’s theme performance guidance.
Shopify’s stated ceiling is 5000 × 5000 px and 20 MB; that is an upload limit, not a delivery recommendation. Use an appropriately compressed image and responsive delivery rather than sending the maximum-sized file to every device.
Preview the banner in a real browser
After you adjust the theme, inspect the actual storefront at desktop and mobile widths. Confirm the banner’s crop, text placement, and load behavior on the page where customers will see it. If you automate browser captures for review, a screenshot can make before-and-after checks easier. ScreenshotNeo is a website screenshot API and MCP server for developers.
Or skip the browser setup
One GET request can capture the storefront as an image. Replace the example URL with your store’s public page and use your API key; the ScreenshotNeo documentation describes the API.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpCookie banners and consent notices, newsletter popups, and chat widgets are removed before capture by default, and each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the page verdict and billing status. An MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month with no card.
Common banner problems and fixes
The image is cropped on mobile
Cause: The section is using a desktop-shaped image in a narrow or portrait frame, or its fixed height requires a crop. Fix: Check the image-height and crop settings, adjust the focal point, or provide a separate mobile image if the section supports one.
Rank #3
The banner looks too short or too tall
Cause: The section height or its aspect-ratio behavior does not match the source image. Fix: Inspect the active theme’s section controls. If the section adapts height to the image, confirm that the source ratio is the one you intended; if the height is fixed, compose for the crop.
The heading or call to action is hard to read
Cause: Important details in the image compete with overlaid theme text, or the text is baked into the image and cropped at a breakpoint. Fix: Leave clear space for overlaid content, keep image-baked text in the safe area, and check the mobile crop separately.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →The file is rejected or is slow to load
Cause: It may exceed Shopify’s stated 20 MB upload ceiling, or it may be much larger than the page needs to deliver. Fix: Keep the upload within the stated 5000 × 5000 px and 20 MB limits, compress the artwork, and use responsive image delivery so smaller screens can receive suitable variants.
The desktop banner looks fine, but the phone version does not
Cause: A single landscape composition does not suit both placements. Fix: Use a separate mobile crop if the theme provides a mobile-image setting, and preview the resulting section rather than relying on the source file alone.
Quick Recap
Best Value
Frequently asked questions
Is 1200 × 400 px the best size for every Shopify banner?
No. It is Shopify’s starting point for a narrow banner, while a full hero has different guidance and may use separate desktop and mobile compositions.
Can I upload a 5000 × 5000 px banner?
Shopify states an upload ceiling of 5000 × 5000 px and 20 MB. That ceiling does not mean a square, maximum-sized image is appropriate for a banner or should be served to every screen.
Recommended Free Tools
Why does the same image look different in Dawn?
Dawn’s image-banner behavior responds to the section layout and image ratio, and can use a separate mobile image. Check the section’s settings and the theme’s current implementation.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
