For a Shopify Horizon hero or banner, upload a desktop image of 3840 × 1920 px and a separate mobile image of 1600 × 1600 px. For product images, use 2048 × 2048 px (square) or 1600 × 2000 px (portrait) and keep one shape across the catalog.
Recommended sizes
| Image | Upload this size | Smallest that stays sharp |
|---|---|---|
| Hero or banner, desktop | 3840 × 1920 px (2:1) | 1920 × 960 px |
| Hero or banner, mobile | 1600 × 1600 px (1:1) | 800 × 800 px |
| Hero, two images side by side | 1920 × 1920 px each (1:1) | 960 × 960 px each |
| Slideshow slide | 3840 × 1920 px (2:1) | 1920 × 960 px |
| Product image | 2048 × 2048 px (1:1) | 1200 × 1200 px |
These sizes are our recommendations. The upload size stays sharp on high-density screens, and the smallest size stays sharp on a standard screen. Two rows have an alternative shape: a hero set to Large or Full screen height fits a 1600 × 2000 px (4:5) mobile image better, and portrait product photos work at 1600 × 2000 px (4:5) when the whole catalog uses that shape.
Going bigger does not help. Horizon never requests an image wider than 3840 px, or wider than 1600 px for the mobile hero image, so a larger file only takes longer to upload.
For any other image, size it by its longest edge. An image that spans the full width of the page needs 1920 px at least and gains nothing past 3840 px. An image that fills half the page or less, such as one beside a block of text, is covered by 2048 px. Then give it whatever shape the layout calls for.
The numbers in this article come from the Horizon 4.3.0 theme code. We tested the crops, the mobile image, and the focal point with a marked test image in a Horizon 4.3.0 store, checked the image widths on a live product page, and tested how Shopify handles an image that is too small.
Why the hero crops your image
Horizon has no fixed banner size. The hero crops your image to fit a box whose shape changes with the screen and with the Height setting, so the size matters less than where the subject sits in the frame and where you set the image's focal point.
The Horizon hero stretches the image to cover the whole section and trims whatever does not fit. The section's minimum height comes from the Height setting, and each option means something different on each screen size:
| Height | Phone (under 640 px wide) | Tablet (640–959 px) | Desktop (960 px and wider) |
|---|---|---|---|
| Small | 240 px | 40% of the screen height | 50% of the screen height |
| Medium (default) | 400 px | 55% | 65% |
| Large | 560 px | 70% | 80% |
| Full screen | 100% of the screen height | ||
| Custom | The percentage of the screen height you choose | ||
These are minimums. A hero with a lot of text grows taller than its setting. When the hero is the first section on the page, Horizon also subtracts the height of the header and the announcement bar, so the box ends up shorter and wider than the table suggests.
The result is a box that is wide on a computer and only a little wider than tall on a phone. In our test store, with the hero first on the page and set to Medium, the desktop box showed about four fifths of the height of a 2:1 image. The phone box was about 1.2:1 and showed the middle 60% of the width.
Top: the 2:1 test image on desktop. Bottom left: the same image on a phone. Bottom right: a separate 4:5 mobile image on the same phone. The orange band marks the outer 10% of each image.
The taller settings trim less from the top and bottom, and Full screen starts to trim the sides on a computer. No single size avoids the trim, because the box changes with every screen.
Set a focal point
By default the trim is centered, so the middle of the image stays and the edges go. A focal point changes which part stays. Open the image in Content > Files, in the theme editor's image picker, or in a product's media, click the part that must stay visible, and save. Shopify's image documentation lists every place you can set one. An image has one focal point, and it applies everywhere the image is used.
Shopify applies the focal point automatically to images that a theme outputs with its standard image tag. Horizon outputs hero and slideshow images this way, and its product gallery reads the focal point as well. In our test, a focal point in the top-left corner of the hero image moved the crop up on desktop and to the left on a phone.
Left: no focal point, so the phone keeps the middle of the image. Right: a focal point in the top-left corner shifts the crop to the left.
A focal point decides what survives the trim. It cannot bring back content that does not fit, so keep faces, products, and any text away from the edges of the image.
Only one combination shows the whole image with no crop: set Height to Auto and remove every block from the hero. The section then takes the shape of the image itself. This works for a banner that already contains its own text, but text inside an image cannot be read by search engines or screen readers, and it shrinks on phones.
Use a separate mobile image
Without a mobile image, Horizon shows the desktop image on phones and crops it to the phone-shaped box. In our test at Medium height, a 2:1 image kept about the middle 60% of its width, so anything near the left or right edge disappeared.
In the hero settings, turn on Show different media on mobile and add a second image. Horizon shows it on screens narrower than 750 px and requests it at up to 1600 px wide. Match its shape to the height you use. At Small or Medium the phone box is close to square, so a square image fits: our 4:5 test image lost about a third of its height there. At Large or Full screen the box is taller, and a 4:5 image fits better.
The hero can also show two images side by side. Each one then fills half the width, and Stack media places them one above the other on phones.
Slideshow slides
The Slideshow section sets its height in a different way from the hero. Its Media height setting uses fixed minimum heights that do not follow the screen height:
| Media height | Under 750 px wide | 750 px and wider |
|---|---|---|
| Small | 280 px | 420 px |
| Medium (default) | 340 px | 560 px |
| Large | 400 px | 720 px |
At Medium, a full-width slide is about 2.6:1 in a 1440 px wide window and close to square on a phone. Slide images are trimmed the same way as the hero.
A slide has one image field and no mobile image, so a single file has to work for both shapes. Use a 2:1 image, keep the subject inside the middle half of its width, and set a focal point on it. If you need different content on phones, our Horizon block for showing content on mobile or desktop only covers one way to do it.
Product images
Shopify accepts product images up to 5000 × 5000 px, or 25 megapixels, and under 20 MB. Its product media documentation says that 2048 × 2048 px usually displays best for square images.
In Horizon, the product page and the collection page each have their own Aspect ratio setting, and the options do not all match:
| Aspect ratio | Product page gallery | Product cards |
|---|---|---|
| Auto | Each image keeps its own shape (default) | Follows the product's first image |
| Portrait | 4:5 | 4:5 (default) |
| Square | 1:1 | 1:1 |
| Landscape | 2:1 | 16:9 |
Portrait and Square mean the same thing in both places. Landscape does not, so a landscape image that fits the gallery is trimmed on the cards. For a new catalog, shoot or export everything at 4:5 or 1:1 and set both to the same option.
On a desktop product page with Horizon's default layout, the gallery takes the full window apart from a 400 px column for the product details. That is about 1,000 px on a laptop and twice that in device pixels on a high-density screen, so a 2048 px image covers it. Enable zoom is on by default, and the zoom view loads the image at up to 3840 px wide, so a larger original shows more detail when a shopper zooms in.
Image shape is a separate question from which image a variant shows. If the gallery does not switch when a shopper picks a color, see why a variant image does not change.
When the image is too small or too large
Horizon lists several widths for every image and lets the browser pick one that suits the screen. For a desktop hero the list is 832, 1200, 1600, 1920, 2560, and 3840 px. For a mobile hero image it is 416, 600, 800, 1200, and 1600 px. Product images add 240, 352, and 640 px for small placements.
Too small. Shopify does not enlarge images. We requested a 1254 × 1254 px product image at 3840 px wide, and Shopify returned it at 1254 × 1254 px. The browser then stretches it to fill the space, which looks soft on a large or high-density screen. This is why a 1200 px wide banner looks blurry on a desktop monitor.
Too large. Nothing breaks, because visitors do not download your original. They receive a copy resized to the width their screen needs, and a smaller copy is a lighter file: the 832 px version of that product image was 30 KB, less than half the weight of the full-size file. A phone never receives your 3840 px upload. The cost of an oversized original is on your side, as a slower upload. Past 3840 px wide there is no visible gain in the hero, the slideshow, or the product gallery.