Cacher is the code snippet organizer for pro developers

What you want

You have nothing but variant images as product images and you want to hide all but the first image on the product page. You also want that image updated when a new variant is selected.

Caveats

This solution will also hide images that aren't variant images, and it won't work if you have a group of images that you want to show for each variant. The solution only works if you have nothing but variant images as product images. It can be tweaked to work in other situations, with the help of an expert.

The trick here is what we will force the swap behavior in the theme on tablets and computers, and use CSS to hide all images except the one at the top.

If you happen to have products that don't have variant images and have multiple images, you will end up hiding everything but the featured image of the product. If you want to only hide variant images, add a "variant-image" class to the .product-single__photo-wrapper using {% if image.variants.size > 0 %} and only target wrappers that are around variant images in your CSS.

How to get it

1. Open your theme.js.liquid file in the online code editor, and look for the function scrollToImage.

2. Replace this code in the function scrollToImage:

   if (!theme.variables.productPageSticky) {
     // Move selected variant image to top
     $newImage.parent().prependTo(theme.cache.$productImages);
   } else {
     // Scroll to variant image
     $('html, body').animate({
       scrollTop: $newImage.offset().top
     }, 250);
   }
   

   with that one:

   $newImage.parent().prependTo(theme.cache.$productImages);
   

3. Open your theme.scss.liquid file in the online code editor, and add the following code at the very bottom:

   @include at-query($min, $small) {
     .product-single__photo-wrapper:not(:first-child) {
       display: none;
     }   
   }
   

   Note: the :not selector works in IE9+ and all modern browsers. The :first-child selector works in IE8+ and all modern browsers.