Images and media

Images do most of the selling in an online store. The theme is built to show them at their best, so your part is mostly about starting with good source files. Shopify then optimizes and delivers them for you.

Start with high-quality images

Upload the best version you have. Shopify creates the smaller sizes each screen needs and serves a fast, modern format on its own, so a large, sharp original always beats a small one stretched to fit. You do not need to compress images yourself before uploading.

A few sizes to aim for:

• Product photos: around 2048 x 2048 px for square shots. That is the size Shopify recommends for crisp detail and smooth zoom.
• Slideshow and banners: roughly 2000 to 3000 px wide, so they stay sharp on large screens.
• Collection and blog images: 1200 to 2000 px wide.
• Logo: up to 600 px wide, as a transparent PNG or an SVG.

Images can be up to 5000 x 5000 px and 20 MB each. PNG and JPEG are the safest formats for photos.

Tip

Keep text out of your slideshow and banner images. Add your headings and buttons in the theme editor instead. Text baked into an image can be cropped or shifted on different screens, while text you add in the editor stays sharp and readable everywhere.

Choose the shape of each image

Every image slot in the theme has its own Image ratio or Aspect ratio setting, so you decide the proportions once per section and every image in that grid follows it:

• Portrait (4:5) is the tallest standard shape. It suits clothing, bottles, and anything shot upright, and it gives product cards more presence in a row.
• Square (1:1) is the reliable all-rounder, and the crop most product photography already uses.
• Landscape (3:2) suits scenes, flat-lays, and blog images, and it keeps rows shallow so more of the grid fits on the first screen.
• Wide (16:9) is the cinematic shape for banners and video covers.
• Adapt to image keeps each image at its own proportions instead of cropping it. The theme reserves the right amount of room in advance, so the page stays steady while the image loads and nothing jumps under the shopper’s finger.

Pick one shape per grid and crop your files to match before uploading. Reach for Adapt to image when the proportions are part of the point, such as a print, a poster, or a size chart, and keep a fixed shape everywhere shoppers compare products side by side.

Keep your grids tidy

Photographing your products on a consistent background and at a consistent crop is the single easiest way to make a grid look professional. The frame around each card, the title style, and quick view all live in Product card settings, and the sections that show larger imagery are covered in Media sections and Product sections.

Let the page load light

Images below the first screen load as the shopper scrolls down rather than all at once, so a long, image-rich homepage costs far less than its total file size suggests. Build the page you actually want, and give the top of it the most attention: one strong banner above the fold loads faster than three stacked ones. On banner and hero sections, upload a separate Mobile image so phone visitors get a crop made for a narrow screen instead of the middle of a wide one.

Add alt text

Write a short, plain description for each image in Shopify. Alt text helps shoppers who use a screen reader, and it gives search engines another way to understand your page. One clear sentence per image is enough.

Note

You do not need to resize or compress images by hand. Start from a high-quality original, keep it under 20 MB, choose a shape, and the sizing, cropping, and loading are handled for you.