Everything you need to know about Shopify collection image dimensions. Learn the perfect sizes for collection thumbnails, banners, and featured images to create beautiful, fast-loading collection pages.
Shopify collection images serve different purposes depending on where they're displayed. Choosing the right dimensions for each type ensures your store looks professional and loads quickly.
Square images displayed on your homepage, navigation menus, and collection list pages. These help customers browse and discover product categories.
Wide, landscape images that appear at the top of collection pages. These create visual impact and set the tone for the product category.
| Image Type | Dimensions | Aspect Ratio | Where It Appears |
|---|---|---|---|
| Collection Thumbnail | 2048 x 2048 | 1:1 (square) | Collection list, grid view, homepage |
| Collection Banner | 2048 x 1024 | 2:1 (landscape) | Collection page header |
| Featured Collection | 2048 x 2048 | 1:1 (square) | Homepage featured sections |
| Mobile Collection | 1600 x 1600 | 1:1 (square) | Mobile-optimized version |
| Navigation Menu | 800 x 800 | 1:1 (square) | Mega menu dropdowns |
Collection pages are often entry points to your store. Properly sized images load 3-4x faster, keeping bounce rates low and conversions high.
Consistent image dimensions create professional-looking grids and prevent awkward cropping or stretching across collection pages.
72% of shoppers browse collections on mobile. Right-sized images ensure crisp display without wasting data or loading time.
Collection images should tell a story and set the mood for the category. Show products in use or styled environments rather than plain product shots.
Example: For a "Summer Dresses" collection, show someone wearing a dress at the beach rather than a dress on a white background.
All collection images should have a cohesive look: same color palette, lighting style, and mood. This creates a professional, branded experience.
Tip: Use the same photographer or AI style settings for all collection images to maintain consistency.
Many themes overlay text on collection images. Leave space in your composition for collection titles and descriptions to be readable.
Best practice: Keep the center or bottom third of banner images relatively uncluttered for text overlay.
Keep collection thumbnails under 500 KB and banners under 600 KB. Use JPG for photos, WebP for best compression, and optimize before uploading.
Tools: Use TinyPNG, ImageOptim, or our free photo resizer.
Write clear ALT text for SEO and accessibility. Describe what's in the image and the collection it represents.
Example: "Woman wearing summer dress on beach - Summer Collection banner" instead of "collection-image-1.jpg"
Collections displayed as tiles in a grid layout. This is the default view for most Shopify themes.
Best image size: 2048 x 2048 (square)
Why: Square images create perfect grids
Displays: 2-4 columns depending on screen size
Collections displayed in a list with images on the left or right side.
Best image size: 2048 x 1024 (landscape)
Why: Horizontal format fits list layout better
Displays: Single column with side images
Select photos that best represent the collection's theme, products, and target customer. Avoid generic stock photos.
Use lifestyle shots, styled product groupings, or mood-setting scenes that match your brand.
Check if your theme uses square thumbnails or banner headers. Most themes use 2048x2048 for thumbnails and 2048x1024 for banners.
Preview in your theme customizer to see how images are cropped and displayed.
Resize to the exact dimensions needed, then compress to reduce file size without sacrificing visual quality.
Target under 500 KB for thumbnails and under 600 KB for banners using tools like TinyPNG or WebP conversion.
Upload in Shopify Admin under Products > Collections. Click the collection, then add the image with descriptive ALT text.
Some themes support both thumbnail and banner images - upload both versions if available.
View your collection pages on desktop, tablet, and mobile to ensure images display correctly and load quickly.
Check that text overlays remain readable and important image elements aren't cropped out.
Use descriptive file names
Name files "womens-summer-dresses-collection.jpg" instead of "IMG_1234.jpg"
Write detailed ALT text
Include collection name and image content: "Colorful summer dresses hanging outdoors - Women's Summer Dress Collection"
Keep file sizes small
Google prioritizes fast-loading pages. Under 500 KB is ideal for collection images
Use modern formats
WebP images load faster and Google recognizes them as better optimized
Add schema markup
Most Shopify themes include automatic schema for collection pages, including image metadata
Collection images should be lifestyle shots or styled groupings, not individual product photos. They set the mood for the entire category.
Fix: Create or source lifestyle photography that represents the collection's theme and aesthetic.
Mixing square and landscape images creates messy grids with awkward cropping and unprofessional appearance.
Fix: Standardize all collection thumbnails to 2048x2048 and all banners to 2048x1024.
Using images under 1024x1024 results in blurry, pixelated collection pages that hurt credibility and conversions.
Fix: Always use at least 2048x2048 for thumbnails to ensure crisp display on all devices.
Collection images over 1 MB slow down page loads significantly, especially on collection list pages with multiple images.
Fix: Compress images to under 500 KB using tools like TinyPNG or convert to WebP format.
Important image elements get covered by collection titles, or text becomes unreadable due to busy backgrounds.
Fix: Leave text-safe zones in your composition or add subtle gradient overlays for text readability.
Use lifestyle photography showing products being worn or styled. Collection images show models in real-world settings that match the collection theme.
Feature styled room shots or flat-lay arrangements of products. Images show how collection items work together in a space.
Use clean, bright product arrangements with color coordination. Collection images showcase product variety and color ranges.
Feature products in use or workspace setups. Collection images demonstrate product functionality and ecosystem.
Generate professional collection images at perfect dimensions automatically. No photography, no resizing, no design skills needed.
AI creates images at exactly 2048x2048 or 2048x1024
Maintain cohesive look across all collection images
Under 500 KB, WebP format, ready to upload
Collection thumbnails should be 2048 x 2048 pixels (square) for grid layouts. Collection banners should be 2048 x 1024 pixels (2:1 landscape) for page headers. Keep file sizes under 500-600 KB for fast loading.
Collection thumbnails (2048x2048) are square images displayed in grid views on collection list pages and homepage. Banners (2048x1024) are wide landscape images shown at the top of individual collection pages as headers.
It's not recommended. Product images should be clean shots of individual items, while collection images should be lifestyle photos or styled groupings that represent the entire category's theme and aesthetic.
Go to Products > Collections in Shopify Admin. Click the collection you want to edit, then click "Add image" or replace the existing one. Upload your optimized 2048x2048 or 2048x1024 image and add descriptive ALT text.
Yes. Optimized collection images with descriptive file names and ALT text improve page load speed and image search rankings. Fast-loading collection pages also improve overall site SEO and user experience.
Use JPG or WebP for collection photos. JPG offers good quality at smaller file sizes. WebP is even better (30% smaller) if you're starting fresh. Only use PNG if you need transparency, like for overlay graphics.
Shopify allows one image per collection. Choose a high-quality lifestyle or mood image that best represents the collection. Some themes support both a thumbnail and banner - upload both versions if your theme allows it.
Check your theme documentation for specific requirements. Most modern Shopify themes follow the 2048x2048 standard, but some may have custom sizes. Preview in theme customizer to see how your images display.
