Shopify Collection Image
Representative image for a product collection or category banner.
Shopify collection images serve as the visual gateway to product categories. They appear in collection grids, navigation menus, and as banners at the top of collection pages. The right collection image not only looks professional but also helps customers quickly understand what products to expect, improving navigation and conversion rates.
Check Your Image
See if your photo meets the official shopify requirements.
Free Spec Validator
Click to Upload or Drag & Drop
Supports JPG, PNG
Technical Requirements
| Minimum Dimensions | 1024 x 1024 px |
|---|---|
| Recommended Size | 2048 x 2048 px |
| Aspect Ratio | 1:1 (Square) |
| Max File Size | 20 MB |
| File Type | jpeg, png, gif, webp |
| Background | No strict requirement |
Visual Guidelines
Do's
- Use square images (1:1) for collection thumbnails/grids
- Use landscape images (16:9 or 1.8:1) for collection banners
- Maintain visual consistency across all collections
- Use high-quality images that represent the collection well
- Include multiple products for variety and appeal
- Optimize file size for fast loading (under 100KB recommended)
Don'ts
- Avoid using cluttered images that are hard to understand at small sizes
- Don't use inconsistent sizes across different collections
- Avoid text overlays on collection thumbnails (use on banners only)
- Don't exceed 20MB file size limit
Best Practices
- 1Square for Grids (1:1): Use 2048 x 2048 square images for collection thumbnails and grid layouts. This ensures consistency and makes it easy for customers to scan categories.
- 2Landscape for Banners (16:9): For collection page banners, use landscape dimensions like 1800 x 1000 (1.8:1) or 1920 x 1080 (16:9). These work well for full-width display.
- 3Show Multiple Products: Collection images should showcase 2-4 representative products from the collection. This gives customers a clear idea of what to expect.
- 4Consistent Style: Use the same lighting, background, and editing style across all collection images. This creates a cohesive, professional store appearance.
- 5High Quality, Small Size: Aim for file sizes under 100KB. Large banner images slow down your store and frustrate mobile shoppers.
- 6Test at Small Sizes: View your collection images at 400px wide. They should still be clear and recognizable at thumbnail size.
- 7No Text on Thumbnails: Avoid text on small collection thumbnails. For banners, use minimal, large, readable text only if it adds value.
Common Issues
Collection images look inconsistent
Standardize on one aspect ratio (1:1 square or 16:9 landscape) and apply the same editing style, lighting, and background treatment across all collection images.
Collection page loads slowly
Your collection banner image is likely too large in file size. Compress it to under 100KB. The recommended 2048px width is more than sufficient for quality.
Image unclear in navigation menu
Your collection image has too much detail. Use simpler images with 1-3 prominent products that remain clear even at very small sizes (100-200px).
Banner image looks cropped on mobile
Different screen sizes crop banners differently. Keep important content (products, text) in the center 'safe zone' to ensure visibility on all devices.
Upload failed - file too large
Reduce your image file size to under 20MB (Shopify's limit). For collection images, compress to under 100KB - this is more than sufficient for excellent quality.
Frequently Asked Questions
Q.What's the ideal size for Shopify collection images?
For collection thumbnails/grids, use 2048 x 2048 pixels (square 1:1 ratio). For collection banners, use landscape dimensions like 1800 x 1000 pixels (1.8:1 ratio) or 1920 x 1080 pixels (16:9 ratio).
Q.Should collection images be square or landscape?
It depends on the use case. Square images (1:1) work best for collection grids and thumbnails, while landscape images (16:9 or 1.8:1) are ideal for full-width collection banners at the top of collection pages.
Q.Can I use different sizes for different collections?
While technically possible, it's not recommended. Maintain consistency across all collections for a professional, cohesive look that builds customer trust.
Q.What file format is best for collection images?
JPEG is recommended for photo-heavy collection images due to smaller file sizes. PNG is better for graphics or images requiring transparency. WebP is the most modern option for best compression quality.