When a shopper taps Forest Green, the main photo should turn green. That small swap does a lot of work: it confirms the choice and stops "I thought it was a different shade" returns. Setting it up on Shopify takes a few minutes per product once your photos are ready. Here is the process, plus the limits you will hit with more than one photo per color.
Plan your shots first
You need one photo per value of the option that changes how the product looks. Usually that is Color. You do not need separate photos for sizes, because a Small and a Large tee look the same in a photo.
Shoot or export every color with the same angle, crop and background. If Black is a close-up and White is a full model shot, the swap feels jumpy. Square images at 2048 x 2048 pixels are a good default for most themes and give zoom enough detail.
Upload + assign
- Open the product and upload every photo, including one per color, to the Media section.
- In the Variants list, click the image placeholder on a variant row and pick the matching photo. You can select several variants (all the Red ones) and assign the photo to all of them at once.
- Save, then open the product page and click through each color. The main image should swap every time.
If shoppers pick colors from a long list on mobile, the picker matters as much as the photo. Our guide to the mobile variant picker covers layouts that work on small screens.
Multi-image per variant
Out of the box, Shopify links one image to each variant. Selecting a variant jumps the gallery to that image, but the other photos (front, back, detail) stay mixed in with every other color.
To show only the green photos when Green is picked, you need either a theme that supports variant-specific galleries, a small theme customization (often grouping images by alt text or a metafield), or an app. Our guide to variant image galleries compares those three routes.
Image optimization
- Size: 2048 x 2048 pixels works well for square product images. Shopify accepts larger files and resizes them for each screen.
- Format: upload JPEG or PNG. Shopify serves modern formats such as WebP to browsers that support them.
- File weight: aim for under 500 KB per image before upload. A 6 MB photo straight off the camera slows your page for no visible gain.
- Alt text: describe the image, for example "Red cotton t-shirt, front view".
Alt text helps both screen reader users and image search. Our post on alt text for variant images has examples by product type.
Lazy loading
Online Store 2.0 themes lazy-load images below the fold by default. The first product image is above the fold, so it should load right away; the rest of the gallery loads as the shopper scrolls or swipes.
If you edit your theme, do not add lazy loading to the main product image. Delaying it makes your Largest Contentful Paint worse, which is one of the Core Web Vitals.
Worked example: a 5-color hoodie
A hoodie in 5 colors and 6 sizes has 30 variants. You need:
| Photo | How many | Assigned to |
|---|---|---|
| Front, one per color | 5 | All 6 sizes of that color |
| Back and detail shots | 2 to 4 | Not assigned (general gallery) |
| Size chart or model shot | 1 | Not assigned |
That is 8 to 10 images and 5 assignments, not 30. Filter the variant list by color, select the six, assign once.
If you also show colors as image swatches instead of text buttons, the swatch and the main photo should match. Our guide to image swatches covers that setup.
Troubleshooting
- The image does not swap. Check that the variant actually has an image assigned, and that your theme's product section is not set to a static gallery.
- The wrong image shows. Usually a photo was assigned to the wrong color. Filter by color and check each group.
- Variants are missing from the picker. That is a separate problem from images; see variant not showing.
Frequently asked questions
How do I assign an image to a Shopify variant?
Upload the photo to the product's Media section, then click the image placeholder on the variant row and choose it. The product page swaps to that image when the shopper selects the variant.
Can each variant have multiple images?
Not natively. Shopify links one image to each variant. For a full gallery per color, use a theme that supports it, a theme customization based on metafields or alt text, or an app.
How do I swap the whole gallery on variant selection?
Dawn jumps to the assigned image automatically. Showing only the selected color's photos needs a theme feature, a metafield-based Liquid edit or an app.
What is the best image size for Shopify variants?
Square images at 2048 x 2048 pixels work well, compressed to under 500 KB. Shopify accepts larger files and resizes them for different screens.
Should I use WebP or JPEG?
Upload JPEG or PNG. Shopify converts and serves WebP to browsers that support it, so you do not need to convert files yourself.
What alt text should I use for variant images?
Describe what the photo shows, for example "Red cotton t-shirt, front view". Include color, material and angle.
Does image size affect Core Web Vitals?
Yes. Very large images slow down Largest Contentful Paint on the product page. Compress before uploading and never lazy-load the main product image.
Can variants share the same image?
Yes. All sizes of one color, such as Small and Medium in Red, can point to the same Red photo. Select them together and assign the image once.
Related reading
Sources & further reading
Primary sources referenced in this article. We link to official platform documentation and standards bodies rather than secondary summaries so you can verify claims directly.
- Shopify Help Center: Product variants
- Shopify.dev: Product variant limits
- Shopify Help Center: Line item properties (customization)
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