Shopify lets you assign one image per variant. When a customer selects “Blue,” the gallery scrolls to that single blue photo. But all 30 images from every color stay visible. The customer has to scroll past 25 irrelevant photos to find the 5 that actually show the blue version.
You need more than one image per variant. Front view, back view, close-up, scale shot, lifestyle photo. Five images per color, filtered so only the relevant ones show when a customer picks a variant. Shopify does not do this natively. Here is how to set it up.
In this post
- The one-image-per-variant problem
- What multiple images per variant looks like
- Method 1: Alt text hack (limited, theme-specific)
- Method 2: Variant image app (recommended)
- Step-by-step setup with Rubik
- Speed it up with AI auto-assign
- Common images (shared across all variants)
- Products with multiple options (Color + Size)
- Frequently asked questions
- Related reading
The one-image-per-variant problem
In Shopify admin, you can assign one image to each variant. When a customer selects that variant, the gallery scrolls to the assigned image. But every other image stays visible. A product with 6 colors and 5 photos per color shows all 30 images at once, regardless of which color is selected.
This creates three problems. First, customers see photos of colors they did not select, which causes confusion and wrong purchases. Second, 22% of online returns happen because the item “looked different in person,” often because the customer was looking at the wrong variant’s photos. Third, a 30-image gallery on mobile means 20+ swipes to see all angles of one color. Most customers give up after 6-8. Read more about the cost: the real cost of not having variant-specific images.
What multiple images per variant looks like
The goal: when a customer selects “Blue,” the gallery shows only blue photos. Five angles of the blue product. Nothing else. When they switch to “Red,” the gallery instantly swaps to five red photos. No page reload. No scrolling past irrelevant images.
This is standard on stores like Nike, Zara, and Apple. They have engineering teams that build custom solutions. For Shopify stores, you need either a theme hack or an app.
Method 1: Alt text hack (limited, theme-specific)
Some premium themes (Prestige, Impulse, Streamline) support a workaround: add a hashtag to each image’s alt text. For example: Blue sweater front view #Blue. The theme reads the hashtag and groups images by color.
Problems with this approach:
- Only works on specific themes. Switch themes and it breaks.
- Pollutes your alt text with hashtags, which hurts SEO and accessibility.
- Manual process for every image on every product.
- No swatch customization. You get whatever the theme provides.
If you use a free Shopify theme (Dawn, Horizon, Sense, Craft) or a ThemeForest theme (Minimog, Ella), this method does not work at all.
Method 2: Variant image app (recommended)
Rubik Variant Images assigns unlimited images to each variant and filters the gallery automatically. It works with 350+ Shopify themes and 7 page builders. No alt text hacks. No code editing. No theme limitations.
How it differs from the alt text method:
- Works on every theme, not just specific ones
- Image data stored in Shopify metafields (survives theme switches)
- Alt text stays clean for SEO
- Visual swatches replace the default dropdown (color circles, image thumbnails, pill buttons)
- AI auto-assign matches images to variants automatically
- Shadow DOM prevents CSS conflicts with your theme
- Video and 3D model support per variant
For a full comparison of all variant image apps, read every Shopify variant image app compared.
Step-by-step setup with Rubik
- Install Rubik Variant Images from the Shopify App Store. Free plan lets you test on 1 product.
- Enable the app embed: Theme editor > App embeds > Toggle on Rubik Variant Images.
- Open a product in the Rubik app.
- Select a variant (e.g., “Blue”) and click the images you want assigned to it. Pick 5-6 images: front, back, detail, scale, lifestyle.
- Repeat for each variant. Red gets red images. Green gets green images.
- Save. Visit your product page. Select a color. The gallery filters instantly.
Full setup walkthrough: how to show only selected variant images.
Speed it up with AI auto-assign
Assigning images manually works for 10 products. For 200 products, it takes days. Rubik has two tools to speed this up:
AI auto-assign: Click the AI button on a product. The AI analyzes each image using 4 data points (product name, variant name, image filename, alt text) and assigns images to the correct variants automatically. Review the results and save. Takes under a minute per product. Details: how AI auto-assign works.
Bulk assign: For products where images are arranged sequentially by variant in the gallery, bulk assign processes hundreds of products in the background. It detects where each variant’s images start and end based on the Shopify-assigned featured image for each variant. No AI credits used.
Common images (shared across all variants)
Some images should stay visible regardless of which variant is selected: size charts, care instructions, packaging shots, lifestyle photos that work for all colors. Mark these as common images in Rubik. They persist in the gallery while variant-specific images filter in and out. Read more: how to use common images.
Products with multiple options (Color + Size)
For products with Color and Size options, set Color as the primary option that controls gallery filtering. When a customer picks “Blue,” they see blue images regardless of which size they select. If you need different images for specific Color + Size combinations (e.g., different cuts for Small vs Large), Rubik supports intersection logic: only images assigned to both “Blue” AND “Large” show when both are selected. Details: multi-option variant images guide.
What about collection pages?
Rubik Variant Images works on product pages. For color swatches on collection page product cards (so customers can browse colors without opening each product), use Rubik Combined Listings. It is a separate app that links products with swatches on both product pages and collection pages. Learn more on rubikify.com.
Watch It in Action
See how multiple images per variant work on a live Shopify store:
Frequently asked questions
Can Shopify show multiple images per variant natively?
No. Shopify assigns one image per variant and scrolls to it. All other images stay visible. To assign multiple images per variant and filter the gallery, you need an app like Rubik Variant Images.
How many images should I assign per variant?
Aim for 5-6: front, back, close-up detail, scale reference, and lifestyle shot. More angles mean fewer surprises after delivery and fewer returns. Keep total product images under Shopify’s 250 media limit.
Does this work with my theme?
Rubik Variant Images supports 350+ themes including all free Shopify themes (Dawn, Horizon, Sense, Craft, Refresh), premium themes (Impulse, Impact, Prestige, Focal, Symmetry, Palo Alto, Warehouse), ThemeForest themes (Minimog, Ella, Turbo), and 7 page builders (GemPages, PageFly, EComposer, Instant, Beae, Foxify, Replo).
Will variant image filtering slow down my store?
Rubik loads data from Shopify metafields with the page. No external API calls. Swatches render in Shadow DOM, preventing CSS conflicts. The app runs asynchronous JavaScript that does not block page rendering.
Can I assign videos and 3D models to specific variants too?
Yes. Assign videos and 3D models the same way you assign images. When a customer selects a variant, only the matching media files show. Details: variant videos and 3D models guide.
