Shopify Banner Image Size

Why Shopify Banner Image Size Matters

Getting your banner image dimensions right affects three things that matter to your store: how it looks, how fast it loads, and how it performs in search results. An image that is too small will stretch and blur on large monitors. An image that is too large will slow your page down, which hurts both the shopping experience and your Google rankings.

Shopify's CDN (content delivery network) resizes images automatically when it serves them, but it can only scale images down, not up. If you upload a 600px-wide banner and a visitor views your store on a 1920px-wide monitor, Shopify will serve the 600px image stretched across that full width. The result is a blurry, pixelated banner that looks unprofessional and can erode trust with new visitors.

Page speed is the other side of the equation. A banner image saved at 5MB will take several seconds to load on a mobile connection. Google measures page speed as part of its Core Web Vitals ranking signals, specifically the Largest Contentful Paint (LCP) metric, which often triggers on the hero banner. A banner that loads slowly pushes your LCP score down and can hurt your store's position in search results.

The goal is to find the right balance: large enough to look sharp on every screen, small enough to load in under a second.

Shopify Banner Image Size: Recommended Dimensions

Before committing to specific pixel dimensions, it helps to understand how Shopify handles banner images behind the scenes. The dimensions you upload are not always the dimensions your visitors see.

Understanding Responsive Design

Shopify themes use responsive design, which means the layout adjusts automatically to fit the device your customer is using. A banner that displays at 1800px wide on a desktop monitor might display at 750px wide on a phone. You can check your screen resolution to see which display size your own device falls into. The theme handles this resizing automatically using CSS and Shopify's image CDN.

When you upload a banner, Shopify stores the original and generates multiple sizes on the fly. This means you can upload a single large image and trust that Shopify will serve the right size to each device. Your job is to make sure the original image is large enough and well-composed enough to look good at every size it might be displayed at.

One practical implication: because banners often crop on smaller screens rather than shrinking proportionally, keep your most important visual content (faces, logos, call-to-action text) centered horizontally and vertically. Content near the edges may get cropped on mobile.

Recommended Dimensions by Device

These are the standard recommended dimensions that work well across most Shopify themes:

Device	Recommended Size	Aspect Ratio	Notes
Desktop	1800x1000px	16:9 (approx.)	Covers most monitors; scale up to 2000px for full-bleed themes
Tablet	1024x576px	16:9	Shopify resizes from your desktop version automatically
Mobile	750x938px	4:5 (portrait)	Some themes let you set a separate mobile hero image

The mobile row uses a portrait aspect ratio because phones display banners taller than wide. If your theme supports separate mobile hero images (Dawn does), design a dedicated mobile version rather than relying on the cropped desktop image. This gives you full control over what appears in the mobile frame.

Banner Image Sizes for Popular Shopify Themes

Each Shopify theme handles banner images differently. The theme controls the container width, the aspect ratio at which it crops the image, and whether it uses full-bleed or constrained-width layouts. Here are the specific recommendations for the most widely used themes:

Dawn

Dawn is Shopify's current default theme and uses a full-bleed hero section. The recommended width for Dawn is at least 2000px wide, with no fixed height requirement because the section height is configurable in the theme editor. A 2000x1000px image gives a solid 2:1 ratio that works well at the default section height. See the dedicated Dawn section below for more detail on height settings and mobile behavior.

Debut

Debut (a legacy theme, but still widely used) displays its homepage banner at a fixed 1600x500px in a wide, shallow format. The short height means faces and tall objects get cropped heavily. Design your Debut banner with a horizontal composition and keep text or focal points in the center third of the image to avoid losing them to the top and bottom crop.

Brooklyn

Brooklyn uses a wide, medium-height hero that works best at 1200x600px. Brooklyn's banner has a 2:1 aspect ratio and centers the image, so compositions with centered subjects work best. This theme also tends to overlay text on the banner, so choose images with enough negative space for readable text without a heavy color overlay.

Impulse

Impulse is a premium theme built for larger catalogs and visual brands. Its hero section uses a 1920x1080px (16:9) ratio, the same as an HD video frame. This wide-format hero works especially well with lifestyle photography. Impulse also includes a slideshow option, so each slide in the slider should be the same dimensions to avoid layout jumps between slides.

Motion

Motion pairs images with video and uses a 2000x875px banner (roughly 2.3:1). This very wide, relatively short format suits landscape photography. Motion can autoplay videos behind text, and when you use a static image instead of a video, the same wide crop applies. Keep facial expressions and key visual elements in the center band of your image, away from the left and right edges.

Shopify 2.0 Theme Banner Sizes (2025-2026)

Most banner size guides focus on Dawn, Debut, and a handful of premium themes. But Shopify has released several Online Store 2.0 themes in 2024 and 2025 that have their own hero behavior, aspect ratios, and section types. If you are running one of these newer themes, the legacy recommendations may not match what you see on screen. Here is what each one actually needs.

Sense

Sense is a clean, full-bleed theme that works well for beauty, wellness, and lifestyle brands. Its image banner section fills the full viewport width and uses CSS object-fit: cover to fill the container without distortion. The recommended upload size for Sense is 2200x1000px. Because the cover crop scales to fill, images with centered subjects work better than ones with important content near the edges. Sense does not constrain the image to a fixed aspect ratio the way older themes do, so the visible area shifts slightly depending on screen width.

Origin

Origin uses full-width headers at 2000px wide, similar to Dawn. Where Origin differs is in its split-image sections: a two-column layout that places an image on the left and text on the right. For these split sections, portrait-oriented images at 800x1000px work better than landscape images. Using a landscape image in a split section will crop heavily on the vertical axis, often cutting off faces or products. Keep a separate portrait crop ready if you plan to use Origin's split-image layout.

Studio

Studio is built for visual-heavy brands: photography, art, and high-end retail. Its Hero section works best at 2000x1125px, a standard 16:9 HD ratio. One feature that separates Studio from most themes is native video background support in the hero: you can upload an MP4 directly and Studio will play it on loop behind your headline text. If you use a static image as a fallback for the video hero, use the same 2000x1125px dimensions so the image and video frame match exactly and there is no layout shift when the video loads.

Refresh

Refresh takes a minimalist approach with a deliberately thinner hero section than most themes. The hero banner in Refresh works best at 1800x700px, a wider and shorter ratio than the standard 16:9. This shorter format suits stores that want a banner as a supporting visual element rather than a full-screen takeover. If you upload a taller image (like 1800x1000px), Refresh will center-crop it to fit the thin hero container. Plan your compositions with the center band in mind.

Highlight

Highlight uses a 3:2 aspect ratio for its feature image sections, making 1800x1200px the right size. This taller-than-16:9 format is closer to standard camera proportions, which means you can often upload photos directly from your camera or photographer without cropping. Highlight suits product-focused stores where showing the item in context matters more than a wide lifestyle shot.

Dawn Theme Banner Size: Shopify's Default Theme

Dawn is the default theme for all new Shopify stores, so it gets its own section. The Dawn hero section (called "Image banner" in the theme editor) is a full-bleed section that stretches the image to fill the entire browser window width. At a 1920px-wide monitor, the image renders at 1920px. At 2560px (common on 27-inch iMacs and many Windows monitors), it renders at 2560px.

This means the standard 1800px recommendation falls short on large monitors. For Dawn, upload at 2000px wide minimum. If Retina sharpness matters to you (see the Retina section below), go to 3840px wide.

Dawn's image banner has a configurable height. The default is a percentage of the viewport height, which you can adjust in the theme editor. Here are practical dimensions for each height setting:

• Small: 2000x1000px works well for the compressed header look
• Medium: 2000x800px gives the section room to breathe without dominating the page
• Large: Use 2000x600px as a minimum; Dawn's "large" height setting makes the section take more vertical space, so a taller source image is needed to avoid pixelation on tall screens

Dawn also supports a separate mobile banner image per section. If you toggle on the mobile image option in the theme editor, you can upload a portrait-orientation image (750x938px recommended) specifically for phones. This prevents Dawn from center-cropping your wide desktop image into an awkward mobile frame where your subject may be off-center.

The Dawn image banner section also accepts a headline and button overlay. When you plan to overlay text, choose banner images with a relatively plain or blurred area where the text will sit. High-contrast busy backgrounds make text hard to read regardless of font color or size.

How to Add a Banner Image in Shopify

1. From your Shopify admin, go to Online Store, then Themes.
2. Click Customize next to your active theme to open the theme editor.
3. In the left sidebar, find the Image banner or Hero section. The section name varies by theme. In Dawn it is called "Image banner." In older themes it may be labeled "Slideshow" or "Hero."
4. Click on the section to open its settings in the left panel.
5. Click Select image under the image field. A media picker will open showing your existing uploaded images.
6. Click Upload to add a new image from your computer. Choose your prepared banner file at the dimensions specified for your theme.
7. After upload, select the image to apply it to the section.
8. Check the preview in the theme editor. Switch between desktop and mobile views using the icons at the bottom of the editor to confirm the image looks correct on both screen sizes.
9. If your theme supports a separate mobile image, upload a portrait-orientation version (750x938px) in the mobile image field below the desktop image field.
10. Click Save in the top-right corner. The banner goes live on your store immediately.

Before saving, check the overlay text (if any) for readability against the background image. If the text is hard to read, most themes offer an overlay color and opacity setting within the section panel that adds contrast without replacing the image.

What File Format Should I Use for Shopify Banner Images?

File Format and Size Considerations

Shopify supports JPEG, PNG, GIF, and WebP. For banner images, the practical choice comes down to JPEG versus WebP:

• JPEG: The most widely compatible format. JPEG compression handles photographic images well and produces small files. At 80-85% quality in most export tools, a 1800x1000px JPEG will typically be 150-250KB, which is a solid target.
• WebP: A modern format that produces files roughly 25-35% smaller than JPEG at equivalent visual quality. Shopify's CDN can serve WebP automatically to browsers that support it (most modern browsers do). If you upload a JPEG, Shopify converts and serves WebP where supported. You do not need to convert to WebP yourself before uploading.
• PNG: Use PNG only when your banner has text, logos, or other graphics with sharp edges or transparency. PNG files for photographic banners are typically 2-5x larger than JPEG at the same dimensions, which hurts load times without providing visible quality benefits.
• GIF: Limited to 256 colors and produces large files for anything beyond simple animations. Avoid for banner images unless you specifically need a looping animation and your theme supports it.

For most stores: use JPEG for photographic banners and PNG only when transparency is required.

Compression Before Upload

Even a well-sized JPEG can be bloated if it comes directly from a camera or design tool without compression. Raw exports from Photoshop or Canva at 100% quality can produce files over 1MB at 1800x1000px. That is too large for a banner image.

Target file sizes before uploading:

• Under 200KB for standard desktop banners
• Under 300KB for full-bleed or Retina-optimized banners (2000px or wider)
• Under 100KB for mobile-specific banner images

Tools that compress images effectively before upload:

• TinyPNG (tinypng.com): Free, web-based. Compresses PNG and JPEG. Very effective on photographic images. Use the batch upload to compress multiple sizes at once.
• Squoosh (squoosh.app): Google's free browser-based tool. Gives you side-by-side before/after comparison and precise control over quality settings. Good for finding the lowest quality setting where degradation becomes visible.
• ImageOptim (Mac desktop app): Drag-and-drop compression that works without an upload limit. Useful if you are preparing many images at once.

Compress every banner before uploading, not after. Once Shopify stores your image, it caches the original. Re-uploading a compressed version later means the cache needs to clear before the smaller file appears on your store, which can take time and may not clear on all edge nodes at once.

Retina Display and 4K Considerations

Modern MacBooks, iPhones, iPads, and many Windows laptops use high-density "Retina" or HiDPI screens. These screens pack two or three physical pixels into every logical CSS pixel. A screen described as 1920px wide actually has 3840 physical pixels on a 2x Retina display.

When a browser renders an image on a Retina screen, it needs twice as many pixels as the CSS display width to show a sharp image. If your banner is displayed at 1920px wide on screen and you uploaded a 1920px image, a Retina viewer sees it at half resolution. The image technically fills the container, but it looks soft compared to native Retina content on the same screen.

Here is the practical rule: upload your banner at twice the CSS display width for Retina sharpness.

• If Dawn displays at 1920px wide, upload at 3840px wide for sharp Retina rendering
• If your theme displays at 1200px, upload at 2400px wide
• For Debut at 1600px, upload at 3200px wide

The immediate question is whether this creates a file size problem. It does not, because of compression. TinyPNG will compress a high-quality 3840px JPEG to under 300KB in most cases. That is only slightly larger than a 1800px JPEG at the same compression level, but it looks noticeably sharper on Retina screens.

This is also why the standard recommendation for Dawn is 2000px rather than exactly 1920px. The 2000px size comfortably covers a 1x screen at 1920px wide while the 3840px upload covers Retina at the same width. If you only want to upload one version, 2000px is the practical minimum; 3840px is the sharpest option.

Shopify's CDN uses srcset to serve appropriately sized images to each device. When you upload a 3840px source image, Shopify generates smaller sizes for mobile and tablet automatically. Uploading a larger image does not mean mobile visitors download a 3840px file. They get a resized version appropriate for their screen and connection speed.

How to Create Shopify Banner Images in Canva

Canva is the most accessible design tool for creating Shopify banners without a graphic design background. Here is a workflow that produces properly sized, well-composed banners ready for upload:

Start with the right canvas size. In Canva, click "Create a design," then "Custom size." Enter 2000x1000px for a standard Dawn or full-bleed banner. For theme-specific sizes, use the dimensions from the table in this guide.

Use a product or lifestyle photo as your background. Upload your product photo or a royalty-free image from a stock library. In Canva, drag the image to fill the background layer. Right-click and choose "Set image as background" to ensure it fills the canvas edge to edge without white borders.

Add a text overlay carefully. Keep headline text to 6-8 words maximum. Use a large, high-contrast font (white text on a dark image, or dark text on a light area). Add a semi-transparent overlay (a dark or light rectangle at 30-50% opacity behind the text) if the image is too busy for readable text placed directly on it.

Check the safe zone. Leave at least 100-150px of margin around all critical content. Banner sections crop on mobile, and anything within 100px of the edges may disappear on phones.

Export at the right quality. Click Share, then Download. Choose JPG format and set quality to 80%. This balances visual quality against file size. For a 2000x1000px canvas, an 80% JPG typically exports at 200-400KB depending on image complexity. Run it through TinyPNG after export to bring it below 200KB before uploading to Shopify.

Banner Images for Google Shopping and Performance Max

If you run Google Shopping campaigns or Performance Max (PMax) ads, Google uses images from your Shopify store as display assets in those campaigns. The image your store uses as a hero banner is often the first asset Google pulls when it generates ad creatives automatically.

The problem is that your Shopify banner and your Google ad asset have different requirements. Getting this wrong means either a poorly cropped ad image or a rejected asset that disqualifies your campaign from certain placements.

What Google requires for display and PMax assets:

• Landscape format: 1200x628px (1.91:1 ratio) for Display and responsive display ads
• Square format: 1200x1200px (1:1 ratio) for responsive display ads in feed placements
• Text area limit: Less than 20% of the image area may contain text. Google's ad policy flags images where text takes up more than a fifth of the frame
• Background rule: No logo or product on a plain white background if that background makes up more than 80% of the image area

Your Shopify banner at 1800x1000px is close to the 1.91:1 ratio but not exact (it is approximately 1.8:1). Google will accept it, but it will center-crop to fit the 1.91:1 frame, which may cut edges you wanted to show.

The practical approach: export two versions from your Canva banner design.

1. Shopify version (2000x1000px): Your full design with text overlay, call-to-action button text, and promotional copy. This version displays on your store.
2. Google Ads version (1200x628px): A clean crop with no text overlay, or minimal text within the 20% limit. This is a product-focused or lifestyle shot without promotional copy. Google's own AI writes the ad copy, so your image job is to show the product cleanly without competing text.

In Canva, duplicate your banner design page, resize the duplicate to 1200x628px, remove or minimize the text layers, and export as a separate file. Upload the clean version to your Google Ads account as a landscape image asset.

For PMax campaigns specifically, Google also recommends a square 1200x1200px asset. Crop your Canva design to a square, centering on the focal product or model, and export that as a third version.

Stores that supply all three formats (Shopify banner, 1.91:1 landscape, 1:1 square) typically see better ad creative performance than stores that let Google auto-crop a single asset, because the auto-crop rarely places the subject optimally and can cut products awkwardly at the frame edges.

How to Check If Your Banner Is Slowing Down Your Store

A banner image that is too large is one of the most common causes of slow Shopify store load times. Here is how to diagnose whether your banner is the problem and what to look for in each tool:

Google PageSpeed Insights (pagespeed.web.dev): Enter your store URL and run the analysis. Look for two specific issues in the results: "Properly size images" and "Serve images in next-gen formats." If your banner appears in either list, it is contributing to a slow LCP score. The LCP element shown in the report is usually the hero banner image on a homepage.

Shopify's built-in speed report: In your Shopify admin, go to Online Store, then Themes. Scroll down past your themes to find the Speed report. This shows your store's speed score compared to similar stores in the same category. Click "View report" for specific recommendations, which often include oversized images.

GTmetrix (gtmetrix.com): Free tool that shows a waterfall of all page resources loading in sequence. Find your banner image in the waterfall. If it takes more than 0.5 seconds to load, the file is too large. The waterfall also shows whether the image is served from Shopify's CDN (shopify.com/cdn) or from an external source, which matters for cache behavior and global delivery speed.

A well-optimized banner image (under 200KB, served from Shopify's CDN) should load in 0.1-0.3 seconds on a standard broadband connection. If it takes longer, compress the image and re-upload before checking again.

Troubleshooting Common Shopify Banner Problems

Banner Image Looks Blurry

A blurry banner is almost always an undersized source image. Check your uploaded image dimensions in Shopify's Files section (Settings, Files). If the image is smaller than the theme's recommended width, replace it with a larger version. Also check whether you are viewing on a Retina screen: an image at exactly 1920px wide will look soft on a 2x Retina display. Upload at 2x your target display width to fix this on Retina devices without affecting the experience on standard screens.

Banner Shows Wrong Crop on Mobile

If your banner crops awkwardly on phones, cutting off faces or text, the issue is composition rather than file size. On desktop the full image shows; on mobile the theme crops to a portrait or square aspect ratio, usually center-cropped. Two solutions: redesign your banner with the center third as the safe zone for important content, or use a theme that supports a dedicated mobile image (Dawn does) and upload a portrait version at 750x938px for phones.

Image Uploads But Does Not Appear on Store

If you uploaded an image in Shopify's file manager but it is not showing on your homepage, you likely uploaded to Files rather than assigning it to the theme section. Go to Online Store, Themes, Customize, then find the image banner section and assign the image there from the section panel. Files are a storage library; they do not auto-assign to theme sections when uploaded directly.

Banner Image Changes Are Not Showing

Shopify and your browser both cache images aggressively. After replacing a banner image, clear your browser cache (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) to force a fresh load. If you are using a CDN or Cloudflare in front of your store, you may also need to purge the CDN cache. Shopify's own CDN typically reflects changes within a few minutes without manual action, but browser caches can hold the old image for longer.

Text Overlay Is Unreadable

If the text on your banner is hard to read against the background image, use the theme's overlay color setting. In Dawn, the image banner section includes "Overlay color" and "Overlay opacity" controls in the panel. Set the overlay to black or white at 30-50% opacity to add contrast between the text and the background image. Alternatively, choose a banner image with a plain area (sky, solid-color wall, out-of-focus background) where the text will sit naturally.

Banner Image File Is Too Large to Upload

Shopify has a 20MB file size limit for images uploaded via the theme editor. If your image exceeds this, compress it before uploading using TinyPNG or Squoosh. A properly sized banner image (2000x1000px) should compress well below 500KB with standard JPEG compression, far under the 20MB ceiling. If your file is over 20MB, you likely exported it as an uncompressed PNG or at 100% quality from a design tool.

Banner Looks Different in the Theme Editor vs. Live Store

The theme editor preview sometimes scales or crops differently from what appears on the live store, especially on very large or small preview window sizes. Always check the live store URL in a separate browser tab after saving changes. Test at full desktop width and on a phone (or using your browser's mobile device simulation mode) before considering the update complete.

Best Practices for Shopify Banner Images

Match the Banner to Your Brand Identity

Your homepage banner is the first visual impression for most new visitors. Use images, colors, and typography that match the rest of your store's design. A banner that looks like it came from a different store creates a jarring experience and signals to visitors that the site may not be well maintained. Keep your font choices, color palette, and photo style consistent across your banner and your product pages.

Keep It Seasonally Current

A banner showing summer products in December tells visitors the store is not actively managed. Update your hero image at least four times per year to match the current season or active promotions. Shopify's theme editor makes this straightforward: you can set up multiple sections and toggle them on or off without deleting anything. Prepare your next season's banner before the season starts so the swap takes minutes, not hours.

Test Different Banner Images

Different products, models, and visual styles drive different click-through rates on the CTA button. If your theme supports A/B testing or you use a Shopify app for it, test at least two banner variants simultaneously. If you do not have a formal testing setup, rotate banner images monthly and track the "Add to cart" conversion rate via Shopify Analytics to see which periods perform better. Even informal rotation gives you more data than running one image indefinitely.

Use Real Product Photography When Possible

Stock photography is easier to source, but banners featuring your actual products convert better. Visitors who see a product on the banner and find the same product in the store feel confirmation that they are in the right place. Generic lifestyle images without your product can look professional but fail to communicate what you sell, making visitors work harder to understand your store's purpose.

Prepare Banner Variants for Promotions

Create a set of banner variations for your recurring promotions: a holiday sale version, a back-to-school version, a clearance version. Size and export them all at once so they are ready when you need them. Store them in a shared folder labeled by promotion so anyone on your team can swap them in without needing to redesign from scratch. This approach also keeps your banners visually consistent across each campaign rather than being designed under pressure on the day a sale launches.

Check Accessibility

Banner images with text need sufficient color contrast between the text and the background for visitors with visual impairments. Use a contrast checker tool (WebAIM's Contrast Checker is free) to verify your text color against the background. The WCAG AA standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Meeting this standard also makes your text easier to read on small phone screens in bright sunlight, which benefits all visitors rather than only those with visual impairments.