Upload + assign
- Product → Media → upload all product images (including per-color)
- Edit each variant → 'Image' field → assign the matching color photo
- Product page auto-swaps on variant selection
Multi-image per variant
Native Shopify: one image per variant. For multiple images per color (front, back, detail), use metafield or theme customization to load a gallery per variant.
Image optimization
- Max 2048×2048 px (Shopify auto-optimizes above)
- WebP or JPEG (Shopify serves WebP where supported)
- Under 500 KB per image
- Alt text: 'Red cotton t-shirt, front view'
Lazy loading
Shopify 2.0 themes lazy-load below-fold images by default. Product page gallery = above-fold, loads immediately. Rest lazy-loaded on scroll.
Frequently asked questions
How to assign image to Shopify variant?
Product → Media → upload → Variant edit → assign the image. Product page swaps on customer selection.
Can each variant have multiple images?
Not natively — one per variant. Use metafield or theme customization for multi-image per variant.
How to swap gallery on variant selection?
Dawn theme handles single-image swap automatically. For multi-image gallery per variant, use metafield + Liquid template edit.
Best image size for Shopify variants?
2048×2048 max, under 500 KB. Shopify auto-optimizes above these thresholds.
Should I use WebP or JPEG?
Upload as JPEG (universal). Shopify serves WebP where browser supports.
Alt text for variant images?
Descriptive: 'Red cotton t-shirt, front view'. Include color + material + view angle.
Does image size affect Core Web Vitals?
Yes. Large images (>1 MB) hurt LCP. Compress before upload.
Can variants share the same image?
Yes. Two size variants (Small, Medium) both point to the same 'Red' image.
Related reading
Try it free on Shopify
Print It My Way's permanent Free plan includes live preview, custom options, and Cart Transform pricing.
Install Print It My Way