Multi variant option doesn't show all product images

Shopify Discussion

Topic summary

Issue: Shopify auto-selects the first available variant on product pages, which filters the image gallery to that variant’s images. The merchant wants all product images visible before any selection, to avoid customers seeing only a subset.

Context: Moving from one variant category (e.g., Print Sizes) to multiple categories to scale. Test page shows only 3 images despite more uploaded, due to auto-select. Screenshots illustrate the limited gallery.

Clarifications:

  • Shopify doesn’t choose a random variant; it loads the first available/selected variant.
  • Variant = a specific option combination (e.g., size, orientation, color).

Proposed solutions:

  • JavaScript approach: remove the auto-selected variant on page load and re-render product info; risk that no product info shows if nothing is selected.
  • Custom CSS/JS to display all images on first load regardless of variant.
  • Use a theme that supports showing only images for the clicked variant and hiding others; reference site provided (kpsclothing.in).

Latest update: The merchant will review and correct variant image assignments (e.g., a Vertical variant showed a horizontal image).

Status: No final resolution. Likely needs theme support or custom code. Desired “Choose Your Style” pre-selection prompt remains an open request.

Summarized with AI on December 15. AI used: gpt-5.
1

Hi, I’m testing the use of multi variant options on my product pages to avoid having a list of multiple options under one category. The problem is that because Shopify auto selects a variant I can’t show all the images at once for the product. I want a customer to view all the images for the product before making a selection. The auto select means that Shopify picks what it thinks is relevant to the auto select variant and shows only those (e.g 3 images not all six). How can I make all images for a product available to view before a customer selects their choices? (or stop shopify from auto selecting, which, I believe they do in order to show the price).

This is the current product page - I need to add four more variants, which would bring the number of pills to eight. I may need more than eight in the future so the customer would see is a very long list of options. However, having one category ‘Print Sizes’, all images are available to view.

Screenshot 2024-10-30 181237.png
Screenshot 2024-10-30 181237.png853×554 209 KB

Below is the Test page where the new categories and variants are auto selected but it only shows three images selected by Shopify. Having separate variant categories is the better option in order to scale up, but as you can see there are only three images to view because of Shopify’s auto select (I uploaded a lot more, which you don’t see). I hope all this makes sense and someone can offer some advice.

Screenshot 2024-10-30 182046.png
Screenshot 2024-10-30 182046.png1064×762 541 KB

2

I did encounter a client query not exactly but something very similar to this.

There are two possible solutions to this

  1. The first is that Shopify stores a script file on the product page from which it takes info to load on first load. I can’t stop the first load and the auto select but what I can do is just as the page loads I can remove that auto selected variant and not refresh the entire page but only the product info page. The problem with this is if there is nothing selected Shopify might not show any info on the product page which would be a bad user experience. And just FYI Shopify does not load product of its own choice but the first available or selected variant from your list of variants.

  2. Other solution is to write some css and js , may be a bit of both, so custom coding or editing to display all images on the first load.

Please reach out via mail for a more convenient conversation.

Best

Shadab

3

Thanks Shadab,

Appreciate your feedback and for letting me know that “Shopify does not load product of its own choice but the first available or selected variant from your list of variants”. I’ll look into the variant images I’ve loaded. While not ideal, getting the images correct for each variant is a atleast a start. Currently on the auto select option for Vertical the images show two vertical and one horizontal, horizontal not being relevant to the variant.

Would be so much easier if Shopify offered a ‘Choose Your Style’ (or similar) option in the script file from which it takes info on the first load. Seems an easy thing to do, but then I’m not a developer or techie so maybe it is more complicated than that.

Many thanks,

4

There are some themes that offer this feature where you can show images only for variant clicked and it hides images for other variants.

The theme that doesn’t have this feature obviously needs setting up and code to display only inages of selected variant. I am saying this as I was able to implement something like this. Please see reference site below.

Website: www.kpsclothing.in

In this site Only shows products of the colour selected and hides other colour products

Best

Shadab