Shopify Website Banner Image Sizes: Recommended Dimensions

For a narrow Shopify website banner, start with 1200 × 400 pixels on desktop and 360 × 120 pixels on mobile. That is a 3:1 ratio. For a full hero or image-banner section, use a different composition: 1600 × 500 pixels for desktop and 800 × 1200 pixels for mobile.

These are starting points, not guarantees of the final crop. Your theme, section height, focal-point controls, and whether you provide a separate mobile image determine what visitors actually see.

Recommended Shopify banner dimensions

Use case	Desktop source	Mobile source	Ratio or guidance
Narrow promotional banner	1200 × 400 px	360 × 120 px	3:1 shallow strip
Full hero or image-banner section	1600 × 500 px	800 × 1200 px	Landscape desktop, portrait mobile art direction
Shopify upload ceiling	Up to 5000 × 5000 px and 20 MB		Maximum accepted upload, not a delivery recommendation

Shopify’s general banner guidance supports the 1200 × 400 and 360 × 120 starting points. Its hero guidance uses 1600 × 500 for desktop and 800 × 1200 for mobile. A narrow banner and a tall hero perform different visual jobs, so they should not share one forced aspect ratio.

Choose the right size for your section

Narrow website banner

Use 1200 × 400 px when the banner is a shallow strip for a promotion, shipping message, announcement, or campaign. Keep important text, products, and faces near the center so they survive responsive cropping.

Full homepage hero

Use 1600 × 500 px when the image occupies substantial above-the-fold space alongside a heading or call to action. The desktop crop has room for a subject and copy on opposite sides.

Mobile hero

Use 800 × 1200 px when the mobile section is tall or portrait. A desktop landscape image usually loses its subject or leaves the text over a busy area when squeezed into this shape. If your theme supports a second mobile image, create one.

Why your Shopify theme changes the answer

The uploaded dimensions do not define the rendered dimensions. A theme can set a fixed section height, adapt height to the image ratio, apply an cover crop, or expose a focal-point control.

In Shopify’s Dawn reference theme, image-banner behavior changes around a 750 px breakpoint. The section can derive responsive height from the source ratio, generate multiple candidate widths, and accept a second image for mobile stacking or art direction. Theme versions and settings can change, so inspect the active theme rather than assuming Dawn’s defaults.

1. Open the section that displays the banner in the theme editor.
2. Record whether it uses an image banner, slideshow, featured collection, or custom section.
3. Check image-height, adapt-to-image, crop, focal-point, and mobile-image settings.
4. Preview at desktop and mobile widths before finalizing the source artwork.

Composition and safe-area rules

• Keep logos, headings, prices, and buttons in the visual center or in a region shared by both crops.
• Leave breathing room around the subject; edge details are most likely to be clipped.
• Do not place critical copy inside the image if the theme already overlays editable text. HTML text is easier to translate, resize, and keep accessible.
• For a product or person that cannot survive both ratios, supply separate desktop and mobile artwork.
• Set the theme’s focal point toward the subject when that control exists.

Responsive delivery with Liquid

Shopify’s image_tag helper can emit intrinsic dimensions plus responsive srcset and sizes. This lets the browser choose an appropriate asset instead of downloading the largest file on every device.

{% assign banner = section.settings.banner_image %}
{% if banner %}
  {{ banner
    | image_url: width: 1600
    | image_tag:
      widths: '360, 550, 750, 1100, 1500, 1600',
      sizes: '(min-width: 750px) 100vw, 100vw',
      loading: 'eager',
      fetchpriority: 'high',
      alt: section.settings.banner_alt
  }}
{% endif %}

Use eager loading and high fetch priority only for the first visible hero. Below-the-fold banners should use lazy loading. Keep the source large enough for the largest display, then compress it and let responsive markup serve smaller variants.

Art-directed mobile images

When the mobile composition is materially different, use a picture element or the theme’s dedicated mobile-image setting. The browser downloads the selected source instead of loading two hero-sized files.

<picture>
  <source media="(max-width: 749px)" srcset="{{ section.settings.mobile_image | image_url: width: 800 }}">
  <img
    src="{{ section.settings.desktop_image | image_url: width: 1600 }}"
    srcset="{{ section.settings.desktop_image | image_url: width: 800 }} 800w,
            {{ section.settings.desktop_image | image_url: width: 1200 }} 1200w,
            {{ section.settings.desktop_image | image_url: width: 1600 }} 1600w"
    sizes="100vw"
    width="1600"
    height="500"
    alt="{{ section.settings.alt | escape }}"
    fetchpriority="high"
  >
</picture>

Replace the dimensions and breakpoints if your theme uses different section behavior. Always provide meaningful alt text, and avoid duplicating visible text in the image.

File format, compression, and performance

• Use WebP or AVIF when your theme and workflow support them; use JPEG for photographic fallbacks and PNG when transparency is required.
• Compress exports before uploading. Shopify’s 5000 × 5000 px and 20 MB limits are ceilings, not targets.
• Match the largest source to the largest rendered slot. A 5000 px file for a 1200 px banner increases transfer cost without improving visible detail.
• Reserve eager loading for the first viewport image. Lazy-load later promotional strips.
• Set intrinsic width and height so the browser reserves space and reduces layout shift.
• Use responsive srcset and sizes values that describe the actual layout; incorrect values can make browsers download oversized files.

How to verify the rendered crop

1. Publish or preview the theme with the final source images.
2. Check at least 375 px, 750 px, 1024 px, and a wide desktop viewport.
3. Confirm that the subject, heading, and CTA remain visible in every crop.
4. Test with browser zoom and longer translations if the banner contains overlaid HTML text.
5. Inspect network requests to confirm that mobile devices receive the mobile-sized asset.

Common problems and fixes

Problem	Likely cause	Fix
Desktop banner looks blurry	Source is smaller than the rendered slot or over-compressed	Export at the largest required display size, then compress a copy.
Mobile cuts off the product	Landscape source forced into a portrait or fixed-height crop	Provide a dedicated 800 × 1200 mobile composition and set the focal point.
Text disappears on phones	Text is baked into the image or sits outside the shared safe area	Move text into the theme’s HTML content and keep the subject in the center-safe region.
Large blank space above the banner	Section height or image ratio setting conflicts with the source	Use adapt-to-image where appropriate, or choose a source ratio matching the section.
Banner loads slowly	One oversized asset is sent to every viewport	Use image_tag, accurate srcset/sizes, compression, and lazy loading below the fold.
Changes do not appear	Theme preview, CDN, or browser cache still serves the old asset	Confirm the section references the new file, then hard-refresh and check the requested URL.

Or skip the browser setup

If you need a reliable screenshot of the live Shopify page for QA, documentation, or visual checks, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request. It can capture the full page or a selected element, wait for a selector or network idle, use a chosen viewport and device preset, and apply custom CSS or JavaScript.

See the ScreenshotNeo API documentation for all options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-store.myshopify.com -o shopify-banner.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://your-store.myshopify.com"}, timeout=90)
open("shopify-banner.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://your-store.myshopify.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed, and response headers identify the page verdict and billing result. Its MCP server lets AI agents take screenshots, inspect pages, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

FAQ

Is 1200 × 400 the best size for every Shopify banner?

No. It is the starting point for a narrow 3:1 banner. A full hero needs a different desktop and mobile composition.

Can I upload one image for desktop and mobile?

Yes, if the subject and copy survive both crops. Use separate art-directed images when they do not.

Should I upload a 5000 × 5000 image?

Only when the section genuinely needs that source size. Shopify’s limit is an upload ceiling; responsive delivery should send smaller variants to smaller screens.

Why does Dawn crop my image differently from the editor preview?

The rendered crop depends on breakpoint, section-height mode, image ratio, and focal-point settings. Check the live section at the target viewport widths.