Recommended Image Sizes
Use these recommended image dimensions for the best visual results across all devices.
Product Images
| Context | Recommended Size | Notes |
|---|---|---|
| Product gallery | 1200 x 1500px | 4:5 aspect ratio. Main product images. |
| Product card (grid) | 800 x 1000px | Displayed in collection grids and carousels. |
| Variant swatch | 100 x 100px | Square images for color/pattern swatches. |
Section Images
| Context | Recommended Size | Notes |
|---|---|---|
| Hero banner (desktop) | 1920 x 1080px | 16:9 aspect ratio. Full-width backgrounds. |
| Hero banner (mobile) | 750 x 1334px | 9:16 portrait for mobile hero images. |
| Cards (feature, team, etc.) | 600 x 600px | Square images work best in grid layouts. |
| Review card avatar | 200 x 200px | Square, cropped to circle. |
| Before/after images | 1200 x 800px | Matched dimensions for both images in a pair. |
| Hotspot background | 1600 x 900px | Large enough for interactive hotspot detail. |
| Fit Check gallery | 800 x 1000px | Portrait orientation for lookbook images. |
Blog Images
| Context | Recommended Size | Notes |
|---|---|---|
| Article featured image | 1200 x 675px | 16:9 aspect ratio. Shown in blog grid and article header. |
| Inline content images | 800 x auto | Width of the content area. Height scales proportionally. |
Branding
| Context | Recommended Size | Notes |
|---|---|---|
| Logo | 400 x 100px (max) | SVG preferred for crispness. PNG with transparent background also works. |
| Favicon | 32 x 32px | Square, simple icon. PNG format. |
General Tips
- Use Shopify’s image CDN — Shopify automatically resizes and optimizes images. Upload the largest recommended size and let Shopify handle responsive delivery.
- Compress before uploading — While Shopify optimizes images, starting with well-compressed files improves upload speed and initial load.
- Consistent aspect ratios — Use the same aspect ratio for images within the same section (e.g., all product images at 4:5) for a clean, aligned grid.
- Retina displays — For sharp images on high-DPI screens, upload images at 2x the display size. Shopify’s CDN serves appropriate sizes via
srcset.