Shopify Banner Image Size

Why Shopify Banner Image Size Matters

Banner images sized incorrectly cause two distinct problems. Undersized images appear blurry or pixelated because Shopify stretches them to fill the banner section. Oversized files (anything above 500KB) slow your store's load time, which directly affects conversion rates: research shows a 1-second delay in page load reduces conversions by approximately 7%. Google also uses Core Web Vitals as a ranking signal, and your banner image is typically the Largest Contentful Paint (LCP) element on your homepage. An oversized banner can hurt your search rankings as well as your sales.

Shopify Banner Image Size: Recommended Dimensions

Understanding Responsive Design

Shopify's responsive design scales banner images automatically across devices. Your theme's CSS sets breakpoints that serve different image crops on desktop, tablet, and mobile. This only works correctly when you upload images at the right starting dimensions. Uploading undersized images does not fix cropping; it just stretches blurry content. The numbers below are the upload targets that give Shopify's scaling system the resolution it needs to look sharp at every breakpoint.

Recommended Dimensions by Device

To achieve optimal results, Shopify recommends adhering to the following banner image dimensions:

Note: Mobile banners display at 750px wide maximum on Shopify. Use a 4:5 or square (1:1) ratio for mobile images. Portrait orientation ensures your subject is not cropped on smaller screens. Shopify's theme editor lets you upload separate mobile and desktop images for hero sections.

Banner Image Sizes for Popular Shopify Themes

Different Shopify themes handle banner images differently. The "recommended 1800x1000px" rule is a starting point, but each theme has its own default height behavior and responsive breakpoints. Here are the specific recommendations for the most widely used Shopify themes:

Dawn (Shopify's Default Free Theme)

Dawn is Shopify's flagship theme. Its image banner section uses 100% viewport width on desktop. The default height is controlled by the theme editor with three options: Small (300px), Medium (450px), and Large (600px). Upload banners at 2000px wide for Dawn to ensure sharpness on high-density screens. Set a focal point in the theme editor to control which part of the image stays visible when the browser crops on smaller screens.

Debut (Legacy Free Theme)

Debut's slideshow section typically displays banners at 1600x500px (a 16:5 panoramic ratio). The default height is shorter than Dawn, which means wide landscape images work better than the standard 16:9 crop. If you use the same 1800x1000px image here, the top and bottom will be cropped significantly. Resize to 1600x500px (or at minimum, a 3:1 ratio) for Debut.

Brooklyn (Legacy Free Theme)

Brooklyn uses a full-width hero section on collection pages. The recommended banner size for Brooklyn is 1200x600px (a 2:1 ratio). The hero image is set as a background image and cropped to a fixed height, so portrait-oriented images will be heavily cropped. Keep subject matter centered and avoid placing important content near the edges.

Impulse (Paid Theme)

Impulse supports multiple hero section styles. Its "full-screen" mode displays the banner at 100% viewport height as well as full width, meaning a 1920x1080px image works best for desktop. The standard section mode behaves similarly to Dawn. Always check which mode is selected in the theme editor before sizing your banner.

Motion (Paid Theme)

Motion's image hero section uses a 1600x700px display ratio by default, closer to a 2.3:1 aspect ratio. Upload at 2000x875px to account for high-resolution screens. Motion also supports video banners, where a 1920x1080px MP4 with a matching static fallback image is recommended.

Dawn Theme Banner Size: Shopify's Default Theme

If you're using Dawn, the image banner section has specific behavior worth knowing. Dawn's image banner section uses a 100% viewport-width display on desktop, meaning your banner fills the full screen width regardless of resolution. The default height is set as a percentage of the viewport, with options for Small (300px), Medium (450px), or Large (600px) in the theme editor.

For Dawn, upload your banner at 2000px wide to ensure it looks crisp on high-resolution screens. The theme handles all the responsive scaling. Set a focal point in the theme editor (the small crosshair on the image) to control which part of the image stays visible on smaller screens. If your banner has a subject on the left, set the focal point there so it does not get cropped on mobile.

How to Add a Banner Image in Shopify

Adding or changing a banner image in Shopify is done through the theme editor. The exact steps vary slightly between themes, but the process is the same for all standard Shopify themes.

1. Go to Online Store > Themes in your Shopify admin.
2. Click Customize next to your active theme.
3. In the theme editor, click on your homepage in the preview area, or select the section you want to edit from the left sidebar.
4. Click on the Image banner or Slideshow section (the name varies by theme).
5. Click Select image under the desktop image field. Upload your prepared banner image (ideally 1800x1000px or 2000px wide for Dawn).
6. If the theme supports a separate mobile image (most modern themes do), click Select image under the mobile image field and upload your portrait-oriented mobile banner (750x938px).
7. Set the focal point on the image by clicking the position on the preview where your main subject appears. This tells Shopify which part to preserve when cropping for different screen sizes.
8. Adjust the banner height using the theme editor controls (Small, Medium, or Large).
9. Add overlay text and a CTA button using the content fields in the left sidebar.
10. Click Save.

For a polished result, preview your banner on mobile before saving by clicking the mobile preview icon at the bottom of the theme editor. What looks good on desktop often needs adjustment on mobile, especially if your banner contains text overlays.

What File Format Should I Use for Shopify Banner Images?

File Format and Size Considerations

When uploading banner images to Shopify, strike a balance between image quality and file size. Shopify supports JPEG, PNG, GIF, and WebP upload formats, and automatically converts uploaded images to WebP for modern browsers. WebP files are typically 25-35% smaller than equivalent JPEGs at the same visual quality.

Despite the auto-WebP conversion, you should still optimize your source file before uploading. Target under 200KB for banner images. Above 500KB, even with WebP conversion, your banner becomes a performance liability. Shopify's maximum upload size is 20MB per image.

Compression Before Upload

Shopify's built-in image optimization automatically compresses images, but you can also use third-party tools like TinyPNG or JPEGmini for additional file size reduction before uploading.

Recommended workflow: design at 1800x1000px in Canva or Photoshop, export as JPEG at 80% quality, run through TinyPNG (free, compresses up to 80% without visible quality loss), then upload to Shopify. This typically results in files under 150KB.

Utilizing Shopify banner apps can simplify the process of creating, sizing, and optimizing banner images for better web performance and user engagement.

How to Create Shopify Banner Images in Canva

Canva is the most widely used free tool for creating Shopify banner images, and it has specific template sizes that match each Shopify theme's requirements. Here's how to set up Canva for each major theme:

• Dawn: Create a custom Canva design at 2000 x 1125px (16:9). Export as JPEG at high quality, then compress with TinyPNG before uploading. For mobile, create a second design at 750 x 938px.
• Debut: Use 1600 x 533px in Canva (3:1 ratio). This matches Debut's panoramic banner section.
• Impulse (full-screen mode): Use 1920 x 1080px in Canva. This is a standard HD resolution and matches Canva's preset "Full HD Presentation" template size.
• General purpose (any theme): Canva's preset "Shopify" templates are sized at 1200 x 628px, which works but is undersized for full-viewport themes. For better results, start with a custom size rather than Canva's built-in Shopify template.

Canva's Brand Kit feature (available on free and paid plans) lets you save your exact brand colors and fonts so every banner stays consistent. Once you set your palette in Brand Kit, apply it directly to new banner designs without hunting for hex codes each time.

How to Check If Your Banner Is Slowing Down Your Store

Run your store's homepage through Google PageSpeed Insights (pagespeed.web.dev). Look for the "Largest Contentful Paint" element. On most Shopify stores this is the homepage banner. If your LCP score is above 2.5 seconds, your banner is likely a contributor. PageSpeed will specifically flag "properly size images" and "serve images in next-gen formats" if your banner is oversized or uncompressed.

In Shopify admin, go to Online Store > Themes and look at the speed score shown next to your theme. This score reflects your store's mobile speed. Banner images are the most common reason it drops below 50.

Troubleshooting Common Shopify Banner Problems

Even correctly sized banners can display incorrectly. Here are the six most common problems merchants run into and exactly how to fix each one:

Problem 1: Banner Looks Blurry on Desktop

The image was uploaded at too low a resolution. Shopify stretches small images to fill the full-width section, which creates pixelation. Fix: re-export your source file at 1800px wide minimum (2000px for Dawn) and re-upload. Do not try to fix blurry banners by using PNG format instead of JPEG; the issue is pixel count, not format.

Problem 2: Subject Is Cut Off on Mobile

The theme is center-cropping a wide landscape image to fit the mobile viewport. Fix: either upload a separate portrait-oriented mobile image (750x938px) using the mobile image field in the theme editor, or set a focal point on the existing image to tell Shopify where to crop. The focal point feature is under the image settings in the theme editor.

Problem 3: Banner Causes a Layout Shift (CLS Score)

The browser doesn't know the banner's dimensions until the image loads, so the page layout shifts when the image appears. This harms your Core Web Vitals CLS score. Fix: in Shopify's image banner section settings, set an explicit banner height rather than using "Adapt to image." This gives the browser a height to reserve before the image loads.

Problem 4: Banner Loads Slowly (High LCP)

The banner file is too large. Check the file size in your Shopify admin under Content > Files. If it's over 200KB, compress it before re-uploading. Also check that you're using JPEG rather than PNG for photographic banners. PNG files are 3-5x larger than JPEG at equivalent quality for photography. Use PNG only for banners with flat color, text, or logos with transparency.

Problem 5: Text Overlay Is Unreadable on Mobile

Desktop text that looks fine at 24px becomes illegible at mobile scale. Fix: in the theme editor, reduce the banner height for mobile so there's less dead space, increase font size for mobile using the mobile typography settings, or remove the text overlay entirely on mobile and let the image speak for itself.

Problem 6: Banner Shows Wrong Image After Theme Change

Each theme has different aspect ratio requirements, so a banner that looked right in your old theme may crop poorly in a new one. When you switch themes, review every banner image individually and re-upload versions sized for the new theme's specific requirements. Check our per-theme dimension table above and resize accordingly before publishing the new theme.

Best Practices for Shopify Banner Images

1. Upload Separate Mobile and Desktop Images

With an increasing number of shoppers browsing on mobile devices, upload a separate mobile-optimized image for your banner. In most Shopify themes, the image banner section has a "Mobile image" upload field. Use a portrait-oriented (4:5) image for mobile that keeps the key subject centered and avoids wide horizontal compositions that get cropped on phones.

2. Keep Text Overlays Short

Keep overlay text to under 8 words. Banners are a visual medium, not a place for paragraphs. Your headline should state the offer or category in a single glance. Save the details for the product page. The Shopify theme editor lets you add a button directly on the banner section: use a clear, action-oriented label like "Shop Now" or "See the Collection."

3. Set a Focal Point

Every Shopify theme that supports full-width banners also supports a focal point setting. This is the most underused feature in banner setup. When Shopify crops your image for different screen sizes, the focal point tells it which part of the image to keep centered. If your product is on the right side of the banner, set the focal point there. Without it, Shopify defaults to center-cropping, which often cuts off your subject on mobile.

4. Use High-Quality Product Photography

Invest in professional product photography or source high-quality stock images to create visually strong banners. High-resolution images showcase your products clearly and reflect the quality of your brand. Avoid screenshots, low-resolution images, or anything that looks like it was stretched to fit the banner dimensions.

5. A/B Test Different Designs

Experiment with various banner designs, CTAs, and messaging to determine which combinations yield the best results. Use A/B testing tools to compare the performance of different banners and make data-driven decisions to improve your store.

6. Update Banners Regularly

Keep your store fresh by updating your banner images for new products, promotions, and seasonal offerings. For a more flexible way to present product images beyond banners, explore the best image gallery apps for Shopify. Many support lookbooks, Instagram feeds, and before-and-after sliders.