Can one collection image work for both a card and a banner?

Sometimes. Flexible composition and generous background space help one subject survive both compact cards and wide banners. Placement-specific assets offer more control when the theme supports them.

Why does my Shopify banner crop differently on mobile?

Desktop and phone containers have different proportions. A fill or cover layout may remove part of the image to avoid empty space. Adjust the composition, focal point, section height, or supported mobile image setting, then preview again.

Shopify image guide

Choose Shopify image sizes forthe placement and theme

Prepare product, collection, slideshow, banner, header, cover, and blog images without assuming that one pixel size works for every Shopify theme.

Separate pixel dimensions from aspect ratioPlan for responsive crops and theme settingsKeep product and collection imagery consistentUse a practical pre-publish image checklist

Get Started Draft product-page copy

🖼️What Shopify image sizes should you use?

There is no single pixel size—or universal set of shopify image sizes—that fits every theme and placement. Start with the aspect ratio shown by your theme section, use a clean source large enough for its largest rendered layout, keep important content away from crop-prone edges, and preview it on desktop and mobile. Theme documentation and the theme editor are the final authority for a specific canvas.

Shopify image size quick reference

This is a preparation reference, not a table of fixed Shopify requirements. Your current theme and placement decide the final canvas.

Placement	Practical starting shape	What decides the result	Main crop risk
Product media	One consistent square or portrait ratio	Product page, cards, thumbnails, zoom, and source detail	Products placed close to an edge can be clipped
Collection image	Match the active card or banner section	Whether the theme uses a card, wide hero, or both	One asset may crop differently in cards and banners
Slideshow or banner	Wide landscape with generous safe space	Section height, overlays, viewport, and mobile settings	Edge details, faces, or embedded text can disappear
Header or logo	Follow the theme header controls	Header height, logo width, padding, and mobile navigation	Transparent padding can make the visible logo too small
Cover or hero	Match the displayed section ratio	Theme section, content overlay, and responsive height	Cover-style cropping can remove edge content
Blog featured image	One repeatable landscape ratio	Article hero, blog cards, and linked previews	Mixed ratios make cards and crops inconsistent

Pixels versus aspect ratio

Dimensions control available source detail; ratio controls shape, composition, and much of the crop behavior.

What pixels tell you

Pixels describe width and height. More pixels can preserve source detail for a larger rendered area, but they do not repair a blurry original, poor crop, or mismatched ratio. Do not upscale a small image just to reach a larger count.

What aspect ratio tells you

A 1:1 image stays square at 800 × 800 or 2000 × 2000 pixels. A 4:5 image is portrait and 16:9 is wide. The ratio should fit the placement before you decide how many source pixels it needs.

Plan a cover crop or contain padding

Compare source and container ratios locally, then use the result to identify edges that need extra composition space before checking your real theme.

Enter source and container dimensions to compare two local layout rules. Cover fills the container and may crop an image. Contain keeps the whole image visible and may leave padding.

Square, portrait, and landscape presets are editable planning shapes—not universal Shopify requirements. This planner does not inspect your theme or upload an image.

What is the Shopify recommended product image size?

Treat the theme’s largest product display, product-card ratio, zoom behavior, and mobile layout as the decision inputs—not one mandatory square canvas.

The phrase shopify recommended product image size often suggests one fixed answer. A safer approach is a clean source that supports the largest product display, paired with one intentional ratio and framing rule across comparable products.

The right shopify product images size depends on whether cards are square, portrait, or adaptive; whether product media is cropped; whether shoppers need zoom detail; and whether mobile changes the frame.

Which Shopify product image size ratio should a catalog use?

Choose a shopify product image size ratio that gives the subject room and stays consistent. Square is practical for many grids, portrait can suit apparel or tall products, and landscape can suit wide products. Test primary images, secondary media, thumbnails, and variants in the actual theme.

What is the right Shopify collection image size?

First identify whether the theme uses the asset in a compact card, a wide collection banner, or both.

The right shopify collection image size depends on every template where the asset appears. Keep the subject near the intended focal area, avoid essential words inside the file, use consistent ratios across one collection grid, and preview both the collection page and parent list on desktop and mobile.

If one source must serve a card and banner, leave generous background space. When the theme supports separate section images, placement-specific versions give more control.

What Shopify banner size should you use for slideshow, header, and cover images?

Wide desktop sections and tall phone screens cannot preserve exactly the same composition in every responsive layout.

Shopify slideshow image size

Follow the active slideshow section. Use a wide source with safe space, keep faces and products away from crop-prone edges, and test every slide because equal dimensions do not guarantee consistent composition.

Banner or hero image

Expect some edge loss in cover-style layouts. Keep live headings and buttons in HTML when supported, leave room for overlays, and check contrast and crops at each breakpoint.

Shopify header image size

A header query may mean a logo or a hero below navigation. For logos, follow the logo-width control and remove unused transparent padding. For heroes, use the banner rules.

Shopify cover photo size

“Cover photo” is not one Shopify placement. Identify the exact template, container width, text overlay, crop behavior, and mobile-image support before preparing the source.

What Shopify blog image size keeps article cards consistent?

Choose one repeatable landscape ratio when posts share a grid, then test the blog card, article hero, and linked preview.

The exact shopify blog image size should support the widest rendered placement without unnecessary source weight. Keep the subject recognizable at thumbnail size, write descriptive alt text for the image’s purpose, and avoid embedding an article title that the template already renders as text.

For broader guidance on alt text, product content, and page structure, continue with the Shopify SEO guide.

Responsive cropping, theme settings, and focal points

The upload is only one part of the result: theme rendering, section settings, CSS, and viewport width also matter.

A focal point tells a supporting theme which area to preserve while an image is adjusted or cropped. The theme must respect that setting, so a focal point never replaces checking the rendered section.

✓ Center: the main product or face remains visible.
✓ Edges: either side can be removed without losing meaning.
✓ Top and bottom: shorter banners do not cut off the subject.
✓ Overlay: live text stays readable without hiding the product.
✓ Mobile: the phone crop preserves the intended story.
✓ Cards: the thumbnail remains understandable at small sizes.

File format, quality, and performance checklist

Use current official Shopify guidance and your current theme as authority because accepted inputs and delivery behavior can change.

Use JPEG for photographs when it preserves acceptable quality at a smaller file weight.
Use PNG when transparency or graphic detail requires it, while checking file weight.
Export from the original instead of repeatedly resaving a compressed copy.
Remove unused canvas and invisible transparent padding.
Preserve enough detail for product inspection without artificial upscaling.
Let the theme request responsive variants rather than hard-coding one oversized file everywhere.
Write useful alt text for image content and purpose; do not stuff keywords.
Check storefront performance after adding large galleries, animation, or image-heavy sections.

No format, compression level, or pixel count guarantees faster pages, higher rankings, more sales, or better conversion.

Seller workflow: prepare Shopify images before publishing

Use a placement-first process, then inspect the actual storefront instead of trusting a generic dimensions list.

Inventory every image placement

List the product gallery, product card, collection card, collection banner, slideshow, hero, header or logo, blog card, and article hero placements your store uses.

Record the active theme behavior

For each placement, note the displayed ratio, height, crop mode, focal-point support, overlay position, and mobile behavior.

Set a composition rule

Choose consistent product scale, margins, background, camera angle, and ratio for comparable products. Define a safe area for wide promotional images.

Export for the placement

Start from the original image, choose a format based on the content and transparency needs, and avoid upscaling a soft source or carrying unused canvas.

Keep descriptive text in the page

Use product titles, descriptions, headings, and useful alt text. Keep important promotional copy as accessible page text when the theme supports it.

Preview before publishing

Check the actual storefront at wide desktop, narrow desktop, and phone widths. Inspect cards, galleries, collections, banners, and blog templates.

Recheck after theme changes

A new theme or section configuration can change ratios and crops even when uploaded files remain unchanged.

Pre-publish Shopify image checklist

Run this check for every important product, collection, banner, and blog placement.

□ The image is assigned to one known placement.
□ Its ratio matches or safely adapts to that placement.
□ Comparable product or collection images use consistent framing.
□ The main subject survives desktop and mobile crops.
□ Overlay text remains readable and does not hide the product.
□ The focal point is set where the theme supports and respects it.
□ The source is sharp at the largest rendered size without artificial upscaling.
□ The export format fits the content and transparency needs.
□ The file has no unnecessary canvas, frames, or embedded text.
□ Alt text describes the image instead of repeating a keyword list.
□ Product claims shown in the image match the real product.
□ The storefront was checked after upload.

Draft product-page copy after the images are ready

Image preparation and product-copy drafting are separate jobs.

After you have the real product facts and finished imagery, Magic Listing can help draft titles, descriptions, and product details for human review.

Draft product-page copy with Magic Listing

Magic Listing drafts copy for human review; it does not resize, crop, compress, upload, preview, or publish Shopify images.

Shopify image guidance used for this guide

Reviewed July 23, 2026. Shopify and theme behavior can change, so recheck the current documentation and your active theme before treating a recommendation as fixed.

Shopify image size questions

Direct answers about product ratios, mobile crops, image delivery, and InsightAgent’s scope.

No. A square, high-resolution source can be useful for some product grids, but it is not universal. Check the active theme’s cards, product-media layout, zoom behavior, and mobile crop before choosing dimensions.

Shopify themes can request multiple rendered sizes from an uploaded image for responsive delivery. You still need an appropriate source ratio, composition, quality, and file weight because theme code and section settings determine how those variants appear.

No. Square images are convenient for many grids, while portrait or landscape media may fit some products and themes better. Use a consistent ratio for comparable primary images and test cards, thumbnails, galleries, and mobile layouts.

There is no universal mobile-only size. Responsive themes can render a different width or crop from the same source. Protect the subject from edge cropping and use a separate mobile asset only when the theme supports one and the composition needs it.

No. A larger file cannot restore missing detail or correct a poor crop. Choose a source that supports the largest rendered placement, then balance visible quality and file weight.

Not by itself, and this guide makes no such guarantee. Clear imagery can help shoppers inspect a product, but conversion and search performance depend on many factors.

No. InsightAgent is not an image editor, resizer, crop preview, compressor, uploader, or Shopify publisher. Magic Listing helps draft product-page copy for human review; it does not process images.