Shopify hero image size
The recommended Shopify hero image size is 1280 × 720 pixels (16:9 aspect ratio).
Last updated:
Specifications
| Spec | Value |
|---|---|
| Dimensions (px) | 1280 × 720 px |
| Aspect ratio | 16:9 |
| Max file size | 20MB |
| Supported formats | JPG, PNG, GIF, HEIC, WebP |
| Minimum resolution | 360x200 |
| Color mode | sRGB |
Design at this size with Moda
Start with a canvas pre-set to 1280×720px and let AI generate your design.
Create a Shopify hero image →Design tips
Shopify's guidance recommends 1280×720 pixels (16:9) for a hero image, with 360×200 on mobile. A hero is the large image at the top of a page — taller than a banner and shorter than a full-bleed background, which Shopify sizes separately at 2560×1400.
- •Set a focal point — full-height hero sections crop 16:9 images hard.
- •Use JPEG for photography; reserve PNG for logos and transparency.
- •A full-bleed background is a different size again: 2560×1400.
What you need to know
Shopify's own recommendation table distinguishes three large-image roles that people often conflate: a website banner at 1200×400 (3:1), a hero image at 1280×720 (16:9), and a full-screen background at 2560×1400. They differ in how much vertical space the section gives them.
As with everything on Shopify, these are recommendations rather than requirements — the actual crop is decided by the theme and by the focal point you set. Sections that stretch a hero to full viewport height will crop a 16:9 image aggressively at the top and bottom.
Use JPEG for hero photography. Shopify's guidance is explicit that JPEG suits photographic content and PNG suits logos, icons and anything requiring transparency.
How to create a Shopify hero image at the right size
- 1Open Moda and create a new canvas at 1280×720 pixels.
- 2Design your Shopify hero image using AI generation or start from a blank canvas.
- 3Export as JPG and upload to Shopify.
Frequently asked questions
What size is a Shopify hero image?
Shopify recommends 1280×720 pixels (16:9) for desktop and 360×200 for mobile.
Is a hero image the same as a banner on Shopify?
No. Shopify's guidance gives a website banner as 1200×400 (3:1) and a hero image as 1280×720 (16:9).
Specs last verified: August 28, 2026. Dimensions may change as platforms update their requirements.