Image Sizes for a Shopify Store: Products, Banners, Popups and Social

Think in shapes before you think in pixels

Most image problems on a store are not about size at all. They are about shape. A tall photo dropped into a square product tile gets cropped. A wide banner shown on a phone loses its sides. A share card with text near the edge gets clipped in a chat app. Once the shape is right, the exact pixel count is a much smaller decision.

The shape of an image is its aspect ratio: the relationship between width and height. The ones you will meet most often are square (1:1), portrait (4:5 or 2:3), landscape (3:2 or 16:9) and very wide banners. Decide which shape a slot wants first, then pick a pixel size in that shape that is large enough to look sharp on a high-resolution screen.

When you have a photo in the wrong shape or size, the free image resizer lets you crop or fit it to a preset or a custom size and save it as JPG, WebP or PNG, all inside your browser.

Where each image shows up

The sizes below are common practice, not rules. Themes differ, and a theme can change between versions, so always check your own theme's documentation or settings for its recommended sizes before you batch-produce anything.

Product images

Square is the most common choice, and it is the safest when you are unsure, because it sits cleanly in grids on both phone and desktop. Some fashion and beauty stores prefer portrait, which gives the product more room. A common practice is to upload product images at around 2000 pixels on the long side so zoom features have detail to show; check what your theme's zoom actually uses.

Collection and category images

These often appear as tiles on the home page and as a header on the collection itself. Look at how your theme crops them in both places. A landscape image with the subject in the middle usually survives both.

Hero banners and slideshows

Wide on desktop, and frequently cropped hard on mobile. Many themes let you upload a separate mobile image; use it. Where that is not possible, keep the subject and any text in the central area of the frame.

Popup and announcement images

A full-background popup image is usually landscape on desktop and cropped towards the centre on a phone. A split layout with the picture on one side often suits a portrait image. Keep file sizes small here, since the image loads while the visitor is already on the page.

Social share images and stories

The preview card that appears when someone shares a link is commonly around 1200 by 630 pixels. Vertical stories are commonly 1080 by 1920. Social platforms change their display sizes from time to time, so check the current guidance for the network you are posting to if it has to be exact.

Consistency matters more than the perfect number

A collection page where every product image is the same shape, with the product at a similar scale and on a similar background, looks organised and trustworthy. The same page with a mix of squares, tall portraits and cropped lifestyle shots looks like a market stall, and the grid jumps around as it loads.

• Choose one shape for main product images and use it across the whole catalogue.
• Keep the product filling a similar share of the frame from item to item.
• Use the same background treatment for the first image of every product, then mix in lifestyle shots further along the gallery.
• Write your chosen sizes down so anyone who adds products later follows the same pattern.

Crop or fit: deciding what to lose

When a picture is a different shape from its slot, something has to give. You either trim part of the picture (crop) or keep the whole picture and fill the leftover space with a background colour (fit).

Crop when the image is atmosphere: backgrounds, banners, lifestyle shots. Empty bands around a background image look like a mistake, and losing a little sky or floor rarely matters. Before cropping, check the subject is near the centre so it survives.

Fit when every edge matters: logos, product cut-outs, anything with text on it. Pick a band colour that matches the background of the page or the popup so the bands disappear.

Avoid stretching an image to force it into a new shape. People notice squashed faces and oddly wide products instantly, and it makes the whole store look careless.

File size and format trade-offs

Bigger pixel dimensions and higher quality settings make sharper images and heavier pages. The goal is the smallest file that still looks right on the screen it will be seen on.

• JPG is the everyday choice for photos. No transparency.
• WebP usually gives a smaller file than JPG at similar visual quality, and supports transparency. Use it wherever the place you upload to accepts it.
• PNG is lossless and keeps transparency. Good for logos, icons and flat graphics; photo files come out large.

Depending on your theme, product images may be resized for different screens, but that can only work with what you upload. A sensible, clean original helps everything downstream. For images you place outside the product media, such as popups or custom sections, the file you upload is closer to the file visitors download, so it pays to size it properly first.

Never enlarge a small image to reach a target size. Making it bigger adds pixels, not detail, and the result looks soft. Go back to a larger original instead.

Do not forget alt text

Every image you upload to a product has an alt text field in the Shopify admin. Screen readers read it aloud, and search engines use it to understand the picture. Describe what is actually in the image in a short phrase, including the product name and a distinguishing detail such as colour or angle. Skip phrases like "image of", and do not stuff it with keywords.

Purely decorative images, such as a texture behind a banner, can carry empty alt text so screen readers skip them. Any image with words on it needs those words in the alt text or elsewhere on the page. If you put text over a photo in a popup or banner, check it is readable with the contrast checker.

Common image mistakes to check for

• Uploading straight from a phone camera, with very large files that slow the page down.
• Mixing shapes within one collection grid.
• Putting text or the subject near the edge of a banner that gets cropped on mobile.
• Stretching instead of cropping or fitting.
• Using PNG for full-colour photos, which inflates file size.
• Enlarging small supplier images and accepting the blur.
• Leaving alt text empty on product images.
• Copying a size from someone else's store without checking what your own theme recommends.
• Only checking images on desktop. Preview every banner and popup on a phone too.

Next step

Open your theme settings and note the recommended sizes for product, collection and banner images. Pick one shape for your product catalogue, then fix the images that break the pattern first, starting with your best-selling collection. For any single picture that needs a new shape, size or format, use the image resizer; nothing is uploaded, so it works for unreleased product shots too.

If one of those images is headed for a popup, Nudgesmart builds on-site popups and bars from ready-made templates with the image slot already laid out, and shows them to the visitors you target.