Shopify Banner Image Size: Complete Guide (2026)

Do not index

You're staring at a blurry homepage banner that looks incredible on your laptop but gets cropped weirdly on mobile. Or maybe your hero image loads so slowly that visitors from Instagram bounce before they even see your products.

We get it. At LinkShop, we work with hundreds of Shopify merchants who drive traffic from social media, and banner image sizing is one of those things that seems simple until you actually try to do it right.

This guide will give you the exact pixel dimensions you need, explain why those numbers work, and show you how to create banners that look sharp on every device without killing your page speed.

No fluff. Just the practical stuff you can actually use today.

What Size Should Shopify Banners Be?

Let's start with the numbers you came here for. These recommendations are based on Shopify's official 2025 image guidelines and current best practices from theme developers.

Banner Type	Where It Appears	Desktop Size	Mobile Size	Aspect Ratio	Max File Size
Homepage hero banner	Top of homepage	1920 × 1080 px	800 × 1200 px	16:9 (desktop), 2:3 (mobile)	500 KB
Slideshow/carousel	Rotating banners	1920 × 1080 px	800 × 1200 px	16:9	500 KB
Promo strip	Announcement bar	1200 × 400 px	360 × 120 px	3:1	300 KB
Collection banner	Collection page header	1800 × 1000 px	800 × 1000 px	9:5	400 KB
Blog header	Featured image	1200 × 800 px	800 × 1000 px	3:2	400 KB

Performance baseline: Shopify recommends keeping banner images under 2 MB, but for the best experience (especially on mobile), aim for 300-500 KB per image.

If you're driving traffic through a link-in-bio tool like LinkShop, most of your visitors are coming from Instagram, TikTok, or Facebook on their phones. Fast-loading banners aren't optional. They're the difference between someone actually seeing your products and bouncing to a competitor.

When we talk about "image size," we're actually talking about four completely different things that most merchants conflate.

Pixel dimensions (width × height in pixels)

This is what you set when you export the image. For example, 1920 × 1080 px.

Aspect ratio (the shape of the image)

A 1920 × 1080 image has a 16:9 aspect ratio. A 1200 × 800 image has a 3:2 ratio. The ratio matters more than the exact pixel count because it determines how your image crops on different screens.

File size (how heavy the file is in KB or MB)

A 1920 × 1080 image could be 200 KB or 3 MB depending on how it's compressed. Smaller files load faster, which directly affects whether mobile visitors stick around (especially critical for merchants selling on Instagram with Shopify).

Displayed size (how the browser actually renders it): Your 2000 px wide image might only display at 1400 px on a laptop. Shopify automatically creates multiple versions of your images and serves the right size for each device.

Why this matters: If you only fix pixel dimensions but ignore file size, you'll still have slow pages. If you only optimize file size but use the wrong aspect ratio, your images will be cropped in weird ways on mobile.

You need to get all four of these right.

Before we get into the specifics, let's anchor on what Shopify itself says. According to Shopify's official image size guide:

Hero Images and Main Banners

Specification	Recommended Value
Width	1280-2500 px
Height	720-900 px
Aspect Ratio	16:9
Starting Point	1920 px wide

→ Desktop: 1200 × 400 px

→ Mobile: 360 × 120 px

→ Aspect ratio: 3:1

File Size Guidance

→ Try to keep images under 2 MB

→ Aim for around 500 KB where possible

→ Use JPEG or WebP for photographic banners

Shopify also notes that their themes will crop banners differently on mobile versus desktop. You should avoid putting critical text or faces in the image itself, because those elements might get cut off.

The Shopify Help Center provides detailed guidance on how themes handle responsive images and focal points—essential reading for anyone working with custom banners.

Your banner will be cropped differently on different devices.

A wide 16:9 banner that looks perfect on desktop might lose 40% of its width on a phone in portrait mode. If your product or the model's face is near the edge, it gets cut off.

The solution? Design with a safe zone.

How to Create a Safe Zone

In your design tool (Figma, Canva, Photoshop), create guides that mark the center 40-50% of your image width

Keep all important content (faces, products, logos, text) inside those guides

Use the outer edges for background texture or less critical elements

This way, even when Shopify crops your banner on a narrow mobile screen, the stuff that matters stays visible.

Bonus tip: Shopify's free themes like Dawn, Refresh, and Sense support focal points. You can set a focal point on your image in the Shopify admin (Content → Files → click image → set focal point), and the theme will try to keep that area in view when cropping.

This is incredibly powerful and most merchants don't even know it exists.

Let's break down each common banner type and explain why the recommended sizes work.

Purpose: This is the first thing visitors see when they land on your store. It needs to load fast, look crisp on big screens, and keep important content visible on phones.

Device	Size	Aspect Ratio
Desktop	1920 × 1080 px	16:9
Mobile	800 × 1200 px	2:3

Why these work:

The 1920 × 1080 desktop size sits right in Shopify's recommended range of 1280-2500 px width. It's wide enough to look sharp on 4K monitors but not so massive that it bloats file size. The 16:9 aspect ratio is widely supported by theme hero sections and matches how modern banner sections behave across contemporary Shopify themes.

For mobile, 800 × 1200 gives you a tall, immersive image that feels natural on phones. It mirrors the vertical format that Instagram and TikTok have trained users to expect, which is especially important if you're driving traffic through LinkShop from social platforms or setting up an Instagram Shop.

If your theme doesn't support separate mobile images:

Design a single 1920 × 1080 image but keep all critical content in the center 50%. The sides will get cropped on mobile, but the important stuff stays visible.

Slideshow and Carousel Banners

Purpose: Multiple rotating images that showcase different products, collections, or promotions.

→ Desktop: 1920 × 1080 px (16:9)

→ Mobile: 800 × 1200 px (2:3)

Critical rule: Use the same aspect ratio for every slide. If you mix a 1920 × 1080 slide with a 1600 × 500 slide, the slideshow will jump in height as it rotates, which looks broken and confuses visitors.

Modern Shopify themes and design best practices consistently recommend 1920 × 1080 at 16:9 for slideshow sections.

Purpose: Narrow strips that say things like "Free shipping over $50" or "Black Friday 30% off."

Device	Size	Aspect Ratio
Desktop	1200 × 400 px	3:1
Mobile	360 × 120 px	3:1

These are based on Shopify's own banner guidelines and what actually works in announcement bar sections.

Pro tip:

Don't put text directly in the image. Use a solid color or subtle gradient background, then add the text through your theme's settings. This makes it easier to update promotions without redesigning the entire banner.

Collection Page Banners

Purpose: Header images that set the mood for a specific collection (think: "Summer Collection" or "New Arrivals").

Desktop: 1800 × 1000 px (about 9:5 ratio) | Mobile: 800 × 1000 px

These don't need to be as tall as homepage heroes. They're more like visual dividers that reinforce the collection's vibe. Theme documentation often recommends this 1800 × 1000 size for collection headers and page banners.

Blog Header Images

Purpose: Featured images for blog posts that show up in your blog index and at the top of individual posts.

Desktop: 1200 × 800 px (3:2 ratio) | Mobile: 800 × 1000 px

Shopify's own blog and multiple ecommerce guides use 1200 × 800 as a sweet spot for blog featured images.

Consistency matters here. Pick one size and use it for every post so your blog index doesn't look like a chaotic collage of mismatched thumbnails.

Generic recommendations are great, but here's how to figure out what actually works for your specific theme.

Step 1: Check Your Theme's Documentation

Most reputable theme developers publish recommended image sizes. For example, some themes might specify:

Slideshow banner: 1600 × 500

General banners: 1800 × 1000

Background images: 1920 × 1080

Google "[your theme name] image sizes" and look for official docs from the developer, not random forums.

This is where you stop guessing and see what's actually happening.

On desktop:

Open your store in Chrome

Go to the page with the banner

Right-click the banner → "Inspect"

Hover over the <img> tag in the code

Chrome will show you the rendered size (like "1340 × 650")

This tells you what size the browser is actually displaying at that window size.

Now work backwards:

If rendered size is 1340 × 700, that's about 1.91:1 ratio (close to 16:9)

Scale up to 1920 width while keeping the same ratio

New dimensions: 1920 × 1005 (round to 1920 × 1000)

Step 3: Test on Extreme Viewports

Use Chrome DevTools (press F12, then Ctrl+Shift+M) to toggle between:

Viewport	Width
Wide desktop	1920 px
Standard laptop	1440 px
Small phone	360 px

Watch how your banner crops at each size. Are heads getting cut off? Is your call-to-action button buried below the fold? Adjust your safe zone accordingly.

Step 4: Use Shopify's Focal Point Feature

Instead of constantly re-cropping images, use focal points:

Go to Content → Files in Shopify admin

Click your banner image

Set a focal point on the most important part (face, product, logo)

Save

Shopify's modern themes like Dawn, Refresh, Sense, and Spotlight respect this focal point and keep it in view when cropping for different devices.

This is incredibly powerful and most merchants don't use it.

Sizing is pointless if your banners load slowly and kill conversion (a critical consideration for increasing Shopify sales).

File Size Guidelines

Based on Shopify's recommendations and real-world performance data:

Priority	File Size
Target	300-500 KB per banner
Maximum	Stay under 1 MB if possible
Format	Use JPEG or WebP for photos, PNG only if you need transparency

Why this matters: Mobile users often have slower connections than desktop users. A 3 MB banner might look amazing on your office WiFi but will cause bounces on mobile data (especially when you're promoting your Shopify store through social channels).

Compression Tips

Export at the right dimensions first.

Don't upload a 5000 × 3000 image and hope Shopify fixes it. Start with 1920 × 1080 or whatever size you actually need.

Use 70-85% JPEG quality.

Most design tools let you adjust this during export. Start at 75%, preview it, and adjust up or down.

Try WebP if your tool supports it.

WebP can be 25-35% smaller than JPEG at the same visual quality. Shopify will serve WebP to browsers that support it and fall back to JPEG for older browsers.

Compress before upload.

Tools like TinyPNG, Squoosh, or the export settings in Figma/Photoshop can dramatically reduce file size without visible quality loss.

Lazy Loading (Shopify Handles This Automatically)

Good news: Shopify uses responsive image techniques and lazy loading by default. Images below the fold won't load until the user scrolls down. You don't have to do anything extra for this.

Let's cover the usual failure modes we see with LinkShop merchants.

Mistake #1: Designing Only for Desktop

Symptoms:

Banner looks amazing on your 27-inch monitor

On mobile, the subject is cut in half and text is unreadable

Fix:

Start your design in a mobile frame (800 × 1200 or similar). Make sure it works on mobile first. Then expand to 1920 × 1080 for desktop.

Remember: if you're driving traffic from Instagram or TikTok through LinkShop, the majority of your visitors will never see the desktop version.

Mistake #2: Using Random Aspect Ratios

Are these problems showing up in your store?

☐ Each section looks slightly different in height

☐ Slideshow jumps around as slides change

☐ Mobile users see weird cropping

Pick a small set of aspect ratios and stick to them: 16:9 for heroes and slideshows, 3:1 for thin banners, 2:3 or 4:5 for mobile banners. Create templates in your design tool so you (or your team) can't accidentally mess this up.

If you're new to Shopify themes and customization, check out our guide on what Shopify is and how it works.

Mistake #3: Enormous File Sizes

The fix: Audit your banners (they're usually the heaviest assets). Re-export at 1920 × 1080 with 70-80% JPEG quality. Replace images in Shopify and retest.

For social-first stores using LinkShop, shaving even 200 KB per banner can measurably improve conversion.

Mistake #4: Text Baked Into Images

Symptoms: Sale banners still say "Black Friday" in March. Text is tiny or cropped on mobile. Updating promotions requires redesigning the whole banner.

Fix: Use the image for visual mood only. Add all text and call-to-action buttons through your theme's overlay settings. This makes updates instant and ensures text stays readable on every device.

Shopify's help docs are pretty clear on this: don't put text inside your slideshow or banner image if you can avoid it.

Mistake #5: Ignoring Theme Cropping Behavior

What's happening:

→ You keep changing image size but the same weird cropping happens

→ Different devices show completely different parts of the image

→ Your focal point isn't respected

The solution: Inspect how your theme crops (use the browser DevTools method above). Set a focal point in Shopify admin. Move important subjects into the safe zone.

How to Create Shopify Banners: Step-by-Step Workflow

Here's a process you can use for any banner, any theme, any time.

Decide the job of this banner

Is it meant to tell your brand story? Push a specific collection? Promote a short-lived sale? This affects how tall it should be and how much space you need for text.

Choose the aspect ratio

Use this checklist:

☐ Full hero or slideshow → 16:9

☐ Thin strip / announcement → 3:1

☐ Collection / page header → 9:5

☐ Mobile-specific hero → 2:3 or 4:5

Pick pixel dimensions

Start with these defaults: Desktop hero (1920 × 1080), Mobile hero (800 × 1200), Promo strip (1200 × 400), Collection header (1800 × 1000), Blog header (1200 × 800). Adjust based on your theme's docs, but keep the ratios.

Design with safe zones

In your design tool, add guides that mark the center 40-50%. Keep faces, products, and critical elements inside those guides. Use edges for background texture.

Export and compress

Export as JPEG at your chosen dimensions. Aim for 300-500 KB file size. Start with 75% quality and adjust.

Upload to Shopify and set focal points

Upload via Content → Files (so you can reuse images). Set a focal point on the main subject. Insert into your theme section or LinkShop block.

Test on real devices

Don't trust the emulator alone. Check on your actual phone in portrait, a laptop, and a larger external monitor if you have one. If you're using LinkShop, load the page through your actual link-in-bio flow so you see the full context of how social traffic experiences it.

Using Shopify Banners with Your LinkShop Bio Link

If you're using LinkShop to turn your Instagram or TikTok bio link into a shoppable storefront, your Shopify banners play a specific role.

They're the second impression after your LinkShop page.

Here's the typical flow: Someone sees your Reel or TikTok → Taps the link in your bio → Lands on your LinkShop page (mobile-optimized, fast-loading, product-focused) → Taps a product or collection → Lands on a Shopify product or collection page with your theme banners.

Your banners need to:

Match the visual language of your LinkShop page (same colors, fonts, photography style)

Load quickly on mobile so they don't undo the speed advantage of LinkShop

Use vertical or near-vertical ratios on mobile to feel native to Instagram/TikTok audiences

For more on optimizing this social-to-store funnel, check out our guides on link-in-bio templates, TikTok-specific link-in-bio tactics, and link-in-bio examples for design inspiration.

LinkShop's landing page emphasizes the core value proposition: turning your single bio link into a fully shoppable storefront that integrates seamlessly with your Shopify store's banners and checkout flow.

Here's a live example of a LinkShop storefront (desktop view). Notice how the banner images maintain visual consistency while the layout stays mobile-first—exactly what social traffic from Instagram and TikTok expects.

The same LinkShop page on mobile uses vertical banners (similar to Instagram Stories) so visitors feel right at home after tapping from their social feed. This is the mobile-first banner strategy in action.

Just for completeness, here are Shopify's hard limits:

Upload Limits

Limit Type	Value
Maximum file size	20 MB
Maximum resolution	20 megapixels (e.g., 5000 × 4000 px)
Product and collection images	up to 5000 × 5000 px but must stay under 20 MB

Source: Shopify Help Center

These are ceilings, not targets. You never want a 5000 px wide homepage banner. Stick to the recommendations in this guide.

Here's everything condensed into one reference table you can bookmark:

Banner Type	Desktop	Mobile	Ratio	Max File Size
Homepage hero	1920 × 1080	800 × 1200	16:9 / 2:3	500 KB
Slideshow	1920 × 1080	800 × 1200	16:9	500 KB
Promo strip	1200 × 400	360 × 120	3:1	300 KB
Collection header	1800 × 1000	800 × 1000	9:5	400 KB
Blog header	1200 × 800	800 × 1000	3:2	400 KB

Key principles:

Aspect ratio matters more than exact pixel count

Design mobile-first if most traffic comes from social

Use safe zones to protect important content from cropping

Keep file sizes under 500 KB for fast loading

Set focal points in Shopify admin

Use JPEG or WebP, not PNG (unless you need transparency)

Let your theme handle text overlays (don't bake text into images)

For most Shopify stores, the best banner size is 1920 × 1080 pixels for desktop and 800 × 1200 pixels for mobile. This gives you a 16:9 aspect ratio on desktop (which most modern themes support) and a vertical 2:3 ratio on mobile that works well with social traffic.

What aspect ratio should I use for Shopify hero banners?

16:9 is the most widely supported aspect ratio for hero banners and slideshows in modern Shopify themes. Examples include 1920 × 1080, 1600 × 900, or 1280 × 720. For mobile-specific banners, use 2:3 (like 800 × 1200) or 4:5 (like 1080 × 1350).

Use the "safe zone" approach: design your banner so that all important content (faces, products, logos, text) stays within the center 40-50% of the image width. Also, set a focal point in Shopify admin (Content → Files → click image → set focal point) so the theme knows which part to keep in view when cropping.

Should I use PNG or JPEG for Shopify banners?

Use JPEG or WebP for photographic banners. These formats compress much better than PNG, which keeps your file sizes small and your pages fast. Only use PNG if you absolutely need transparency (like for logo overlays). Shopify recommends JPEG for slideshow and banner images.

What file size should my Shopify banners be?

Aim for 300-500 KB per banner image. Shopify's official guidance says to stay under 2 MB, but for the best mobile performance (especially for social traffic), smaller is better. If you're driving visitors through LinkShop from Instagram or TikTok, fast load times directly impact conversion.

Yes, many modern Shopify themes let you upload separate images for desktop and mobile in hero and slideshow sections. This is the best approach because you can use a wide 16:9 image on desktop and a tall 2:3 image on mobile without compromising either experience. Check your theme's section settings to see if this option is available.

Shopify recommends banners be around 1920 pixels wide for desktop. This is wide enough to look sharp on most monitors without creating unnecessarily large files. The official guidance says hero images should be between 1280-2500 px wide, so 1920 sits comfortably in that range. Source: Shopify image size guide

Yes, absolutely. While Shopify will create multiple versions of your images for responsive loading, you should still upload optimized files. Start with the right pixel dimensions (like 1920 × 1080), then compress to around 300-500 KB using tools like TinyPNG, Squoosh, or your design software's export settings.

If your banner file is too large (multiple megabytes), it will slow down your page load speed, especially on mobile. This can cause visitors to bounce before the page even finishes loading. Shopify's hard limits are 20 MB and 20 megapixels, but for banners, you should never come close to those limits. Stick to the 300-500 KB target for best performance.

Should I put text directly on my banner image?

No, avoid baking text into your banner images. Shopify's documentation specifically recommends using text overlays through your theme settings instead of putting text in the image itself. This makes it easier to update promotions, ensures text stays readable on all devices, and helps with SEO since search engines can't read text that's part of an image.

Ready to turn your link in bio into a high-converting storefront? Try LinkShop free for 7 days and see how a Shopify-native link-in-bio solution works with your store's banners, products, and checkout to create a seamless mobile shopping experience.

Shopify Banner Image Size: Complete Guide (2026)

What Size Should Shopify Banners Be?

Why Shopify Banner Size Matters for Mobile Sales

Shopify's Official Banner Size Guidelines (2025)

Hero Images and Main Banners

Website Banner Images (Announcement Strips)

File Size Guidance

How to Fix the Banner Safe Zone Problem

How to Create a Safe Zone

Shopify Banner Sizes by Type: Complete Breakdown

Homepage Hero Banner

Slideshow and Carousel Banners

Thin Promo Banners (Announcement Strips)

Collection Page Banners

Blog Header Images

How to Find the Right Banner Size for Your Shopify Theme

Step 1: Check Your Theme's Documentation

Step 1: Check Your Theme's Documentation

Step 2: Inspect Your Banner in the Browser

Step 3: Test on Extreme Viewports

Step 4: Use Shopify's Focal Point Feature

How to Optimize Shopify Banner Speed and Performance

File Size Guidelines

Compression Tips

Lazy Loading (Shopify Handles This Automatically)

7 Common Shopify Banner Mistakes and How to Fix Them

Mistake #1: Designing Only for Desktop

Mistake #2: Using Random Aspect Ratios

Mistake #3: Enormous File Sizes

Mistake #4: Text Baked Into Images

Mistake #5: Ignoring Theme Cropping Behavior

How to Create Shopify Banners: Step-by-Step Workflow

Using Shopify Banners with Your LinkShop Bio Link

What Are Shopify's Banner Size and Upload Limits?

Upload Limits

Shopify Banner Size Cheat Sheet: Quick Reference

Shopify Banner Size FAQs

Shopify Banner Size FAQs

What is the best size for a Shopify banner image?

What aspect ratio should I use for Shopify hero banners?

How do I prevent my banner from being cropped on mobile?

Should I use PNG or JPEG for Shopify banners?

What file size should my Shopify banners be?

Can I use different banner images for desktop and mobile?

How wide should my Shopify homepage banner be?

Do I need to compress my banner images before uploading to Shopify?

What happens if my banner image is too large?

Should I put text directly on my banner image?

Create your LinkShop today!