Look, we've all been there—you upload a hero image to your Shopify store and it looks...off. Too stretched, too pixelated, or your text gets cropped on mobile. This guide will save you from all that headache. We'll cover exact dimensions for every major theme, optimization tricks that actually work, and how to make your hero images look incredible on both desktop and mobile. (And if you need help with other banner types, check out our Shopify banner size guide and slideshow image guide.)
Your hero image is literally the first thing someone sees when they land on your store. No pressure, right? But here's the thing—getting the dimensions right isn't just about looking pretty. It's about making sure your carefully crafted banner doesn't turn into a pixelated mess on a 4K monitor or a squished disaster on someone's iPhone.
Alternative sizes: 1920x800 (smaller file), 3000x1200 (ultra-wide)
Alternative sizes: 800x1200 (smaller file), 1080x1920 (full screen)
Here's where things get a bit annoying—each Shopify theme has its own little quirks when it comes to hero images. Dawn handles things differently than Prestige, which does its own thing compared to Brooklyn. So let's break down what you actually need for the most popular themes:
| Theme | Desktop Size | Mobile Size | Notes |
|---|---|---|---|
| Dawn | 1920 x 800 | 750 x 1000 | Default theme, full-width banner |
| Debut | 2048 x 768 | 800 x 1200 | Older theme, 8:3 aspect ratio |
| Brooklyn | 2400 x 1000 | 1200 x 1600 | Full-screen hero sections |
| Narrative | 2000 x 900 | 1000 x 1400 | Storytelling layout |
| Prestige | 2400 x 1200 | 1200 x 1800 | Luxury brands, tall hero |
| Impulse | 2048 x 820 | 800 x 1200 | Fashion-focused, shorter hero |
| Custom Themes | 2400 x 1000 | 1200 x 1600 | Universal safe size |
This is the dramatic, edge-to-edge look that most modern themes go for. Your image stretches all the way across the screen, no matter how wide the monitor is.
This style keeps your image within a set width (usually around 1200-1600px max), with a background color filling out the rest of the space on wider screens.
Okay, let's talk about something super important that gets overlooked all the time: above-the-fold visibility. This is just fancy marketing speak for "what people see without scrolling." And trust me, it matters. If someone lands on your site and doesn't immediately see something compelling, they're gone. Like, gone-in-3-seconds gone.
Visible area: Top 600-800 pixels
Visible area: Top 500-600 pixels
Visible area: Top 500-600 pixels
Here's a stat that should wake you up: over 70% of Shopify traffic comes from mobile devices. Seventy percent! So if your hero image looks terrible on phones, you're basically telling the majority of your potential customers to shop somewhere else. Not ideal. Let me show you how to actually nail mobile optimization:
This is probably the biggest mistake I see. People just slap the same desktop image on mobile and call it a day. Don't do this! Create a proper portrait-oriented version (3:4 ratio) with your text repositioned and font sizes bumped up to at least 40px. Your mobile visitors will thank you.
Real talk: people are shopping on patchy 4G connections while riding the subway. Every kilobyte counts. Keep your mobile heroes under 150 KB using WebP format with aggressive compression. Research shows that shaving just half a second off your load time can boost conversions by 7%. That's free money you're leaving on the table.
Between notches, camera cutouts, and rounded corners, modern phones are basically cropping machines. Keep your important stuff—headlines, CTAs, product shots—away from the edges. I'd say stay at least 10% in from the sides just to be safe.
Chrome DevTools is your best friend here. Pop open the device toolbar and actually check how your hero looks on different phones—older iPhones (375x667), newer ones (390x844, 428x926), and common Android sizes (360x640, 412x915). Takes five minutes and saves you from embarrassing layout disasters.
This is a little technical, but stick with me—srcset lets you serve different image sizes based on the device. So mobile users get the small, optimized version while desktop users get the big beautiful one. It looks like this: srcset="hero-mobile.jpg 800w, hero-desktop.jpg 2400w"
Use for: All new hero images (seriously, it's 2025—WebP is the way)
Use for: Fallback option if you're worried about ancient browsers
Use for: Only when you absolutely need transparency and can't use WebP
Think of this like cooking—you want to start with quality ingredients. Grab photos that are 4000+ pixels wide, whether from a professional photographer or a good stock site. You can always make images smaller without issues, but trying to enlarge a tiny photo? That's how you end up with blurry, pixelated messes.
Don't just upload your massive original file and hope Shopify handles it. Resize it yourself to exactly 2400x1000 for desktop and 1200x1600 for mobile. You can use our free resizer tool or Photoshop if you're feeling fancy.
This is where the magic happens. You want under 300 KB for desktop, under 150 KB for mobile. Sounds impossible? It's not. Tools like TinyPNG, Squoosh.app, or ImageOptim can work wonders. Set your quality to 80-85%—you honestly won't notice the difference, but your load times sure will.
WebP is like a cheat code for file size—you get about 30% smaller files with the same visual quality. Squoosh.app makes this dead simple (just drag and drop), or if you're comfortable with command line: cwebp hero.jpg -q 85 -o hero.webp
Please, please don't burn your text directly into the image file. Use Shopify's theme editor to add headlines and buttons as actual HTML text. Why? Because then you can change your messaging on a whim, Google can actually read it (hello, SEO), and if you ever need to translate your store, you won't want to cry into your keyboard.
Your main hero should load right away—no lazy loading there. But if you've got additional banner sections further down the page, add loading="lazy" to them. This tells the browser "hey, don't worry about these until the user scrolls down." Smart, right?
Your visitor's eye should know exactly where to look. Remember the rule of thirds from photography? Same deal here—put your product or main message about a third of the way in from the edge, not smack in the middle. It just looks more natural and engaging.
Nothing's worse than beautiful text that no one can actually read. White text needs a dark background, dark text needs light. Pro tip: throw a subtle gradient overlay (like black at 40% opacity) behind your text area. Instant legibility boost.
Here's a secret: more buttons doesn't mean more clicks. One clear, prominent call-to-action is way more effective than three competing ones. And make sure it's at least 44x44 pixels—that's the minimum size for someone to actually tap it on mobile without rage-quitting.
Your hero should scream "this is us!" not "we found this on Shutterstock at 2am." Use your brand colors, your fonts, your vibe. When someone lands on your site, they should immediately feel like they're in the right place.
You know those images with SO much going on that you don't know where to look? Yeah, don't do that. A cluttered background just fights with your message for attention. Keep it simple, or if you've got a busy scene, blur the background to make your subject pop.
We've all seen them—those impossibly happy people pointing at laptops, or the diverse team high-fiving in a conference room. These scream "generic business" and actually hurt your credibility. Invest in real product photography or use AI to generate something unique to your brand.
I see this all the time—someone uploads a square Instagram image as their hero and wonders why it looks weird. Desktop heroes need to be wide (think 2:1 or 3:1 ratio), while mobile needs portrait orientation (3:4). It's just how screens work, you know?
This is probably the #1 mistake I see from new store owners. They design this gorgeous image in Canva with all the text built in, then upload it as a JPG. Now every time you want to change your headline, you need to recreate the whole image. Use HTML overlays—trust me on this.
A 3 MB hero image is basically throwing money in the trash. For every extra second your page takes to load, you lose about 7% of potential conversions. Yeah, 7 percent! Get that desktop file under 300 KB and mobile under 150 KB. It's worth the effort.
Taking your beautiful 2400px wide desktop hero and shrinking it down for mobile is lazy and it shows. The text becomes microscopic, the composition is all wrong, and your visitors get a terrible first impression. Make a proper mobile version. Please.
Making your hero super tall might seem dramatic, but here's the problem: if people can't see that there's more content below without scrolling, they often just won't scroll. They'll assume that's all there is. Keep your heroes between 800-1000px max, so visitors can see a hint of what's coming next.
Look, if all this sounds like a lot of work, I get it. That's why we built AI tools that handle the heavy lifting for you—perfect dimensions, optimized file sizes, and designs that actually match your brand. No more spending hours in Photoshop.
AI generates 2400x1000 desktop and 1200x1600 mobile versions automatically
Under 300 KB desktop, under 150 KB mobile. WebP format with perfect compression
Your brand colors, style, and products. Not generic stock photos
Go with 2400 x 1000 pixels for desktop and 1200 x 1600 pixels for mobile. These sizes look crisp even on fancy retina displays, and when you optimize them properly (under 300 KB), they'll load fast too. It's the sweet spot.
Honestly? People use these terms pretty much interchangeably and it's kind of confusing. Generally, "hero image" means that big, dramatic banner at the top of your homepage, while "header image" could mean either the hero or just the logo area up top. In Shopify land, when someone says "hero," they're talking about that large featured banner section.
Yes! A thousand times yes. Mobile needs portrait-oriented images (3:4 ratio) with bigger text and elements positioned differently. Desktop wants those wide, sweeping landscape shots (2.4:1 ratio). The good news is that pretty much all modern Shopify themes let you upload separate images for each. Use that feature!
Four things you need to do: First, resize it to the exact dimensions you need—don't make Shopify deal with your 5000px monster file. Second, convert to WebP. Third, compress it down to under 300 KB. Fourth, use lazy loading for any additional images below the fold. Do all that and your hero will load in under a second, even on spotty 4G.
For desktop, you're looking at 2.4:1 (that's 2400x1000) or 2.67:1 (1920x720) for most themes. Mobile flips to portrait at 3:4 (1200x1600). Now, some themes like Prestige do their own thing with taller 2:1 ratios. Your best bet? Check your specific theme's docs for their recommendations.
Absolutely! Most modern themes support video heroes and they can be super effective—studies show they boost engagement by about 25%. Just keep it short (under 15 seconds), compress it down to under 5 MB, and always have a static image fallback for slow connections. Otherwise you're just frustrating people with slow load times.
One main hero at the top is the standard move. You can sprinkle in 2-3 more smaller banner sections as you go down the page for different collections or promos. But honestly, more than 3-4 total and your page starts feeling cluttered, plus you're adding unnecessary weight to your load time.
HTML text overlay, every single time. I can't stress this enough—never burn your text into the JPG file. HTML text loads instantly, Google can actually read it for SEO, you can A/B test different headlines without creating new images, and you can change your messaging whenever you want without opening Photoshop. It's just better in every way.
