Cacher is the code snippet organizer for pro developers

What you want

You want to show an image carousel in all screen sizes, and you want for the carousel to scroll to the variant image when a variant with an image is selected.

How to get it

1. Open your theme.js.liquid in the online code editor.

2. Locate the theme.init function definition and add the following to it:

   theme.createImageCarousel();
   

   Like so:

   

   We are creating the product carousel on page load.

3. In the same file, locate the theme.setBreakpoints function definition and comment out the call to theme.createImageCarousel(); and theme.destroyImageCarousel();. We are not switching to the carousel on mobile anymore, we don't need to ever destroy the carousel, we're building it once on page load.

   

   //theme.createImageCarousel();
   

   //theme.destroyImageCarousel();
   

4. In the same file, locate the theme.showVariantImage function definition and, inside the function scrollToImage(onLoad), replace this:

   if (theme.variables.bpSmall) {
   

   with:

   if (true) {
   

   That bit was running previously only on small devices to make the carousel scroll to the variant image, and now we want that bit to run all the time.

   

   You can also remove the conditional altogether, running the if block and deleting the else one.

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

   @include at-query($min, $small) {
     .product-single__photos .slick-dots {
       bottom: -40px;
     }   
   }
   

   This will bring the navigation bar below the images, at the same position as on mobile. Otherwise the navigation buttons will sit over the images.

Extend slightly by removing the slide animation effect

1. Locate function scrollToImage(onLoad) within theme.showVariantImage and on the line that reads theme.cache.$productImages.slickGoTo(imageIndex); add true It will now read as so

if (imageIndex != 0 || !onLoad) {
      theme.cache.$productImages.slickGoTo(imageIndex, true);
    }

slickGoTo - Goes to slide by index, skipping animation if second parameter is set to true.

You can hide the slick dots with css

.product-single__photos .slick-dots {
   display: none!important;
}  

Adding autoplay

Find this block of code

  theme.cache.$productImages.slick({
    arrows         : false,
    dots           : true,
    adaptiveHeight : true
  });

And add some autoplay settings. This will make it behave the same as the hero slideshow.

  theme.cache.$productImages.slick({
    arrows         : false,
    dots           : true,
    adaptiveHeight : true,
    autoplay       : {{ settings.hero_home_auto }},
    autoplaySpeed  : {{ settings.home_hero_auto_speed }}
  });

You can specify times if you want there too. Don't miss the comma after the adaptive height line.