Techiepugs
Open the tools Theme guides

Shopify image sizes

Shopify hero image size.

The hero is the big image at the top of your home page. Shopify's blog gives 1280 x 720 px as a starting point; your theme's section decides the real shape, and Dawn can use a file up to 3840 px wide.

Checked against Shopify's pages

The short answer.

Shopify's blog suggests a hero image of 1280 x 720 px (16:9), anywhere from 1280 to 2500 px wide and 720 to 900 px tall, and 360 x 200 px on phones. It is general advice for websites; the Help Center gives no hero size.

In a Shopify theme, the hero is the image banner or slideshow section at the top of the page. Dawn requests that image up to 3840 px wide, so for a sharp result on large screens, export at least 2500 px wide and check your theme's own figure below.

Hero image size, at a glance
Hero size 1280 x 720 px, 16:9 Shopify blog only
Width and height range 1280 to 2500 px wide, 720 to 900 px tall Shopify blog only
On phones 360 x 200 px Shopify blog only
File size About 10 MB at most Shopify blog only
Widest file Dawn requests 3840 px Dawn's theme code
Largest file Shopify takes Stay under 20 MP and 20 MB Shopify's pages disagree; stay under the lower one: 20 MP on the theme images page, 25 MP on the product media and Files pages.

Check your image.

Drop your file in to see its size, shape and format against these numbers. Pick your theme to add its vendor's own size.

Drop images here

Up to 20 at a time. Images are read and resized in this page by your browser, not uploaded to our server.

Shopify on a slideshow or banner

  • Shopify publishes no pixel size: the section sets the shape and crops anything else, so check your theme's documentation. Shopify Help Center Source
  • Dawn's image banner and slideshow request files up to 3840 px wide for a full-width section. Dawn's theme code Source
  • Banners about 1920 px wide; a hero 1280 x 720 (16:9). Shopify blog only Source
  • Shopify's pages disagree; stay under the lower one: 20 MP on the theme images page, 25 MP on the product media and Files pages. Shopify's pages disagree Source

Pick your theme above to add the sizes its own documentation gives.

Your images

No images yet. Choose or drop one to check it.

    Dawn and Shopify's free themes.

    Dawn has no section called hero; its image banner does the job, at full width, with the height set to adapt, small, medium or large. It requests the image up to 3840 px wide. The Horizon themes work the same way and add a focal point, so you choose what stays in frame.

    What theme vendors publish.

    Each size as the vendor's own documentation gives it, checked October 23, 2026. Themes change between versions, so check yours against its documentation too.

    Hero image size: theme vendor sizes
    ThemeImageSizeVendor notes
    Impulse, Motion, Expanse and Streamline Slideshow and hero 2880 x 1620 px Heroes, slideshows, collection headers, 16:9; minimum 1440 x 810.
    Empire Image with text overlay 1800 x 1000 px No further note
    Icon Slideshow and hero 2880 x 1620 px Slideshow, banner, parallax; 16:9; minimum 1600 x 900.
    Icon Separate phone image 800 x 1200 px Portrait, where a separate mobile image is offered.
    District Slideshow and hero 1500 x 600 px All slides identical size (article updated Dec 2020).
    Loft Slideshow and hero 700 x 900 px "Slideshow with promotions" with the slide next to featured links; above the links use 1920/1480/1280px wide; mobile hero 760 x 1250; double sizes for text-heavy images. Article may describe older Loft versions.
    Venue Slideshow and hero 1400 x 788 px Minimum, 16:9; mobile image 800 wide.
    Turbo Slideshow and hero 1600 x 1000 px Slideshow; image with text overlay 1800 x 1000.
    Flex Slideshow and hero 1600 x 1000 px Slideshow with text; image with text overlay 1800 x 900.

    Symmetry, Showcase, Envy and Capital publish no fixed pixel sizes: their vendors say to upload the largest image you have, or give ratios only.

    Vendor pages

    Getting it right.

    1. Start from 16:9

      Shopify's blog, Impulse, Icon and Venue all use 16:9 for hero images, so it is a sensible frame to shoot and crop for. Check your section's height setting before you export.

    2. Leave room for the headline

      Hero sections usually lay text over the image. Keep a calm area where the headline sits, and set the text in the theme editor rather than in the picture.

    3. Watch the file size

      The hero is the first large thing a visitor loads. Shopify's blog suggests about 10 MB at most for a hero and about up to 2 MB, around 500 KB in most cases for most images.

    4. Check it on a phone

      A wide hero is cropped hard on a phone screen. If your theme offers a separate phone image, use a portrait crop there.

    Hero image size questions.

    What size should a Shopify hero image be?

    Shopify's blog suggests 1280 x 720 px at 16:9, with widths from 1280 to 2500 px. Your theme decides the real shape: Dawn requests up to 3840 px wide, and Impulse and Icon recommend 2880 x 1620 px.

    Should a hero image be 16:9?

    16:9 is the common choice and the ratio Shopify's blog and several theme vendors use. If your section's height is set to adapt, any ratio works and the section takes its shape from the image.

    Where is the hero image in a Shopify theme?

    In the theme editor, it is the image banner or slideshow section at the top of the home page. Click the section to change the image, its height and, in newer themes, its focal point.

    How large can the hero file be?

    Shopify takes theme images under 20 MB; stay under 20 MP, since Shopify's pages disagree between 20 and 25 MP. For speed, Shopify's blog suggests about 10 MB at most for a hero.

    Other image sizes and sources.

    Checked

    Shopify's pages

    Check every image before it goes live.

    Drop in product photos, banners, logos and favicons together, check each one and save a resized copy.

    Open the image size checker All image sizes