Collection Banners
Each collection can display a banner image that represents its theme and matches your brand aesthetic.
Image Specifications
Section titled “Image Specifications”Required Dimensions
Section titled “Required Dimensions”- Width: 2048 pixels
- Height: 1024 pixels
- Aspect Ratio: 2:1 (landscape)
File Requirements
Section titled “File Requirements”- Formats: JPG (recommended), PNG, WebP, GIF
- File Size: Under 2MB recommended (20MB maximum)
- Color Space: sRGB for web compatibility
- Quality: 85-90% JPEG quality recommended
Sourcing Images
Section titled “Sourcing Images”Option 1: AI Image Generation
Section titled “Option 1: AI Image Generation”Use tools like Midjourney or DALL-E 3 for maximum control over visual style and brand consistency. Request images at 2048x1024px with a 2:1 aspect ratio.
Option 2: Stock Photography
Section titled “Option 2: Stock Photography”Download from sites like Unsplash (free for commercial use). You may need to resize images to exactly 2048x1024px.
Option 3: Custom Photography
Section titled “Option 3: Custom Photography”Use your own brand photography. Ensure images are resized to the correct dimensions and saved in sRGB color space.
Image Optimization
Section titled “Image Optimization”Why Optimize?
Section titled “Why Optimize?”- Faster page loads for better user experience
- Lower bandwidth for reduced hosting costs
- Better SEO since Google prioritizes fast sites
- Mobile performance critical for phone users
Recommended Tools
Section titled “Recommended Tools”- Squoosh (squoosh.app) — Drag-and-drop optimization with before/after comparison
- macOS Preview — Tools > Adjust Size, then export as JPEG at 85% quality
- Photoshop — Image > Image Size, then File > Export > Save for Web
Target Specifications
Section titled “Target Specifications”- Dimensions: Exactly 2048x1024px
- Format: JPG for photos
- Quality: 85%
- File Size: 200-500KB ideal, under 2MB max
Upload Process
Section titled “Upload Process”Via Shopify Admin
Section titled “Via Shopify Admin”- Go to Online Store > Collections
- Select the collection you want to update
- In the Collection image section, click Add image
- Upload your optimized banner image
- Click Save
Best Practices
Section titled “Best Practices”Visual Guidelines:
- Maintain consistent lighting and color palette across all banners
- Leave space for text overlay if your design uses it
- Keep important elements in the center or right
- Use high contrast for visibility
Technical Guidelines:
- Always resize before uploading
- Use progressive JPEG format
- Test on different devices
- Keep original high-res versions as backups
Troubleshooting
Section titled “Troubleshooting”Image looks stretched or cropped: Resize to exactly 2048x1024px using the 2:1 aspect ratio.
Image looks blurry: Start with a higher resolution source. Use quality 90% instead of 85%. Avoid upscaling.
Colors look different after upload: Convert to sRGB color space before uploading. Avoid CMYK.
Image loads slowly: Optimize file size to under 500KB. Use JPG format for photographs.