Hero banner (practical start)
Recommended2048×1024 2:1
Useful 2:1 master for many homepage / slideshow heroes. Always re-check inside your theme—ratios vary by section settings.
Use in toolShopify · Image size
Shopify Hero Banner Size
Shopify heroes are theme-dependent. Start with a 2048×1024 (2:1) master, keep type in the center band, then preview in your theme before you publish.
Browser crop · stays on your device
Crop your Shopify hero banner
2048 × 1024
Add a photo to crop
Upload a wide photo or graphic—or try the sample—then keep headlines inside the center band before you download.
Size specs
Themes and section settings control the live frame. Treat 2048×1024 as a sharp starting master, not a guarantee every theme will show the full 2:1.
Publish
Export this for Shopify upload.
| Asset | Pixels | Ratio | Notes | Action |
|---|---|---|---|---|
| Hero banner (practical start) Recommended | 2048×1024 | 2:1 | Useful 2:1 master for many homepage / slideshow heroes. Always re-check inside your theme—ratios vary by section settings. | Use in tool |
Hero banners brand the page—themes own the final crop
Shopify does not lock every storefront to one hero pixel size. Dawn, vintage themes, and custom sections expose different heights, focal-point tools, and mobile crops. A practical starting master is 2048×1024 (2:1).
Keep headlines and CTAs in the center safe band. Themes often crop more from the top/bottom on mobile or reframe with a focal point—edge-glued slogans disappear first.
This is not a product image. Product media wants a 2048×2048 SKU master. Stretching a hero into the product gallery looks like a homepage screenshot, not catalog photography.
Collection images (1024×1024) label category tiles. Reuse photography if you want—export each ratio separately and always preview the live theme section after upload.
Good vs weak crop
Same short banner strip—quiet lower-left for the avatar, subject in the open mid/right band.
Reads after the theme crops
- Type in the center band
- True 2048×1024 master
- Previewed in the live theme
Edge slogan or wrong slot
- Only slogan on the far rim
- Product square stretched wide
- Published without a mobile check
Before you upload
Tick these off against your crop preview—nothing is saved.
Related surfaces compared
Similar-looking slots often use different ratios—do not reuse one export for all of them.
Hero banner
2048 × 1024
This page. Practical 2:1 start—theme may crop.
Product image
2048 × 2048
SKU master—different job.
Collection image
1024 × 1024
Category tile—separate export.
| Surface | Typical size | Note |
|---|---|---|
| Hero banner | 2048 × 1024 | This page. Practical 2:1 start—theme may crop. |
| Product image | 2048 × 2048 | SKU master—different job. |
| Collection image | 1024 × 1024 | Category tile—separate export. |
Why Shopify heroes are theme-dependent
Section height, mobile behavior, and overlay chrome differ by theme and by the settings you pick (full bleed, contain, focal point). 2048×1024 is a sharp, flexible start—not a substitute for the theme preview.
- Always judge the live customize preview—not only the file pixels.
- If your theme documents a specific ratio, match that after this starting crop.
- Keep critical type away from corners phones may clip.
Hero vs product vs collection
Heroes sell the mood of a page. Product images sell one SKU. Collection images label a category. Mixing them without a fresh crop is how soft and letterboxed storefronts happen.
- Product image size — 2048 × 2048 SKU master
- Collection image size — 1024 × 1024 tile
File requirements
JPG for photographic heroes. PNG for hard-edged graphics. Prefer sRGB. A sharp 2048×1024 usually beats an enormous noisy master the CDN will recompress.
- Practical hero start
- 2048 × 1024 px (2:1)
- Important
- Final crop is theme-dependent
- Formats
- JPG or PNG (sRGB)
- Not this slot
- 2048×2048 products, 1024×1024 collections
Common mistakes
- Assuming every Shopify theme shows a perfect 2:1 frame.
- Putting the only CTA on the extreme edge.
- Uploading a product square stretched into a hero.
- Skipping the mobile customize preview.
How to use the crop tool
Upload a wide photo, choose Hero banner (2048×1024), drag until the headline clears the side and vertical risk, then download. Processing stays in the browser.
- Use the center safe band as a hard keep-in.
- After upload, adjust focal point in the theme if available.
- Re-check phone and desktop before you publish.
After you download
From this download to a live upload in a few minutes.
- 1
Download the 2048×1024 JPG (photos) or PNG (graphics) from the tool.
- 2
In Shopify admin, open Online Store → Themes → Customize and upload the image to the hero / slideshow / image banner section.
- 3
Set focal point if the theme offers it, then check phone and desktop.
- 4
If the theme crops too hard, re-crop with more center margin and replace the file.
Frequently asked questions
What size is a Shopify hero banner in 2026?
A practical starting size is 2048×1024 (2:1). The live crop depends on your theme and section settings—always preview in Customize.
Why do you say theme-dependent?
Shopify themes set different heights, mobile crops, and focal-point tools. Pixels alone do not guarantee the on-page frame.
Is the hero the same as a product image?
No. Product images are usually square SKU masters (2048×2048). Heroes are wide section banners—export separately.
JPG or PNG for a Shopify hero?
JPG for photographs, PNG for hard-edged graphics. Export sRGB.
Can I crop Shopify heroes in the browser?
Yes. This guide includes an in-browser crop—files stay on your device until you download and upload to Shopify yourself.