Image size recommendations
Image size recommendations for Split: the sizes that crop least in split-screen and full width sections, slideshows, product and blog images.
Applies to: Split 5.1.0 and later. Added in: Split 1.0.0. Last checked: 2026-10-13 against Split 5.1.0.
Split sizes its content boxes from the screen, so most images are cropped to fill their box. This page lists the image sizes that crop least in each section, for a desktop screen of 1920 x 1080 px.
Where to find it: the image settings of each section in the theme editor (Shopify admin → Online Store → Themes → Customize).
Why images are cropped in Split
The design of Split is centered around splitting the screen. The content boxes are calculated from the height and width of the screen the store loads on, as 25 %, 50 % or 100 % of the screen height and width. See How Split is built.
- A box has the shape of the screen part it fills, not the shape of your image. Split fills the box with the image and crops what does not fit.
- The box shape changes with the screen. A wide monitor and a short laptop show the same image with different crops.
- Only the Image section and the Image with hotspots section keep the natural height of the image, without cropping.
For the sections where the images are displaying full width (such as the Images with text section or the slideshow), make sure that you don't have important elements of the image on the edges. A level of cropping is required in order to have the images fill the boxes on any screen size.
Recommended sizes
Sizes are for a 1920 x 1080 px screen. Shopify serves theme images up to 2820 px wide, so larger uploads are fine.
| Where | Box on desktop | Size that crops least |
|---|---|---|
| Slideshow, Desktop layout Split screen | Half the width, full height | 1920 x 2160 px |
| Slideshow, Desktop layout Full width | The full screen | 1920 x 1080 px or larger |
| Slideshow, Mobile image | Full width, as tall as the phone screen (or 75 % with Slider height Large) | A portrait image, for example 1080 x 1920 px |
| Rich text background image, Shop the look image | Half the width, full height | 1680 x 1890 px |
| Images with text or Gallery, Image height Full height, 1 image | The full screen | 1920 x 1080 px |
| Images with text or Gallery, Full height, 2 images | Half the width each, full height | 1680 x 1890 px |
| Images with text or Gallery, Full height, 3 or 4 images | A third or a quarter of the width each, full height | Portrait images, for example 1080 x 1620 px (3) or 1080 x 2160 px (4) |
| Images with text or Gallery, Image height Half, 1 or 2 images | Full or half width, half the screen height | Wide images, for example 2560 x 720 px (1) or 1920 x 1080 px (2) |
| Images with text or Gallery, Half, 3 or 4 images | A third or a quarter of the width, half the screen height | About square, for example 1200 x 1000 px |
| Video: background fallback image | The full screen | 1920 x 1080 px |
| Blog posts and blog post images | About a quarter of the width, half the screen height; one post is a full half | 1680 x 1890 px is more than enough |
| Testimonials Author avatar | A 70 px circle | 140 x 140 px .png |
| Popup Image | The image side of the popup | 960 x 1200 px .jpg |
| Text columns with icons Custom icon | 64 px | 256 x 256 px |
| Product images | Half the width on the product page, a quarter in product grids | Up to 2820 px wide, square or in the Media aspect ratio of the product card |
The Slideshow editor also says: it is best to provide a square image for the split screen style and a landscape image for the full width style.
Product and collection images
- Product cards crop images to Media aspect ratio in Theme settings → Product card: Square (1:1), Tall (5:6, the default) or Taller (2:3).
- To show the whole image without cropping, turn on Fit media inside container. The image then sits inside the box with space around it.
- On the product page, the gallery follows Gallery style and Scale slider images to fit the viewport in the Product page section. On mobile, images always fit the screen.
- Square images, or images in the same ratio as your product card, work best.
See Product card theme settings and Product page.
Do I need images twice as large?
Yes, when you have them. Large and high-density screens show more pixels than the sizes above, so a doubled image stays sharp.
If you have the available media, double all of these to make sure that you will see sharp images on any screen, no matter how large. Split serves images up to 2820 px wide, so anything wider than that is not shown at a higher resolution.
Why is the top of my image cut off?
Because the box is wider than the image on that screen, so Split crops the top and bottom to fill it.
- Use an image closer to the box shape in the table on this page, or keep the subject in the center.
- Set a focal point on the image in the theme editor's image picker. Split follows it in the Slideshow, Rich text, Shop the look, Images with text, Gallery, Countdown banner, Image comparison and Video: popup sections.
Related pages
- How Split is built: the split-screen layout.
- Slideshow section: split and full width slides.
- Product card theme settings: aspect ratio of product images.
- Optimize images and improve SEO: compressing images before you upload them.
How Split is built
How Split is built: the split-screen layout of two halves, section groups for the header, footer and overlays, sections, blocks and theme blocks.
Update Split
Update Split: how to check your Split version and install the latest release from the Shopify Theme Store without losing your settings.