Shopify image sizes
Shopify is unusual among the platforms on this site: it publishes almost no fixed image requirements. Themes are responsive and crop around a focal point you set, so the rendered result depends on the theme rather than on a platform-wide spec, and Shopify's help centre deliberately does not give a banner dimension at all.
What Shopify does publish is a set of recommendations on its own blog, reproduced below, plus firm limits in the help centre for product media. Treat the recommendations as sensible defaults rather than requirements — and if your theme documents its own dimensions, prefer those.
Quick reference
| Format | Dimensions | Ratio | Max size |
|---|---|---|---|
| Website Banner | 1200 × 400 px | 3:1 | 20MB |
| Hero Image | 1280 × 720 px | 16:9 | 20MB |
| Product Image | 2048 × 2048 px | 1:1 | 20MB |
| Store Logo | 400 × 100 px | 4:1 | — |
| Favicon | 48 × 48 px | 1:1 | — |
Hero Image1280×720px
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.
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.
Dimensions
1280×720
Aspect ratio
16:9
Max file size
20MB
Formats
JPG, PNG, GIF, HEIC, WebP
Best practices
- •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.
Product Image2048×2048px
Shopify states that 2048×2048 pixels usually displays best for square product images. Supply at least 800×800 for zoom to work well, and stay under the ceiling of 5000×5000 pixels and 20MB. Unlike banners, this one comes from Shopify's help centre rather than its blog.
Product images are the one Shopify image type with a firm published recommendation: 2048×2048 for square products. That size gives Shopify enough resolution to generate every thumbnail and zoom variant it needs from a single upload.
Dimensions
2048×2048
Aspect ratio
1:1
Max file size
20MB
Formats
JPG, PNG, GIF, HEIC, WebP
Best practices
- •Use one aspect ratio across the whole catalogue so collection grids stay even.
- •800×800 is the practical floor for usable zoom; 2048×2048 is the recommendation.
- •Shopify generates thumbnails around 150–300px, so keep subjects centred and simple.
Store Logo400×100px
Shopify's guidance recommends 400×100 pixels (4:1) for a rectangular logo and 100×100 (1:1) for a square one, dropping to 160×40 and 60×60 respectively on mobile. Use PNG so the logo can sit on any header background without a visible box.
Shopify recommends two logo shapes because themes use them in different places — a wide wordmark for the header, and a square mark for compact placements. Supplying both means the theme picks the right one rather than squeezing one shape into the other's slot.
Dimensions
400×100
Aspect ratio
4:1
Formats
PNG, JPG, WebP
Also supports
Best practices
- •Supply PNG with transparency — a JPEG logo carries a background the header may not match.
- •Provide both shapes: 400×100 rectangular and 100×100 square.
- •Check the theme editor's maximum logo width; it overrides these recommendations.
Favicon48×48px
Shopify recommends 48×48 pixels for a favicon — the small square icon that appears in a browser tab, a bookmark list and a browsing-history entry. It renders at roughly 16 pixels in most tabs, which makes it the smallest and least forgiving image in a Shopify store.
A favicon is displayed far smaller than it is supplied. Shopify's recommendation of 48×48 gives browsers a file to downscale from, but the working size in a tab is closer to 16×16 — so anything beyond a single letter, a simple symbol or a solid shape disappears.
Dimensions
48×48
Aspect ratio
1:1
Formats
PNG, JPG
Best practices
- •Design at 16px and scale up — that is the size it actually renders at.
- •One letter or one simple shape. Detail is lost entirely.
- •PNG with transparency, so it works on light and dark browser themes.
Design any of these with Moda
Start a canvas at the size you need and let AI generate your design.
Start designing →Frequently asked questions
What size should a Shopify banner be?
Shopify recommends 1200×400 pixels (3:1) for a website banner on desktop, and 360×120 for mobile. This is a recommendation from Shopify's own guidance, not a platform requirement — the help centre publishes no fixed banner dimension because themes crop responsively.
What size should Shopify product images be?
2048×2048 pixels usually displays best for square product images. The minimum for zoom to work well is 800×800, and the maximum is 5000×5000 at up to 20MB.
Why does Shopify not publish exact image sizes?
Shopify themes are responsive and crop images around a focal point, so the displayed dimensions vary by theme and by viewport. Shopify publishes recommendations rather than requirements for that reason.
What image formats does Shopify accept?
JPEG, Progressive JPEG, PNG, GIF, HEIC and WebP. PSD, TIFF and BMP are accepted but converted. Use JPEG for photography and PNG for logos or anything needing transparency.
Other platform guides
Sources
Guide last verified: August 28, 2026. This hub summarizes 5 formats and cites 6 sources across this page and the linked format pages.
← All sizes