Cacher is the code snippet organizer for pro developers

What you want:

How to get it:

Go to product.liquid and:

1. Find this section of code:

Replace it with this:

<div class="product-single__photos small--hide">
  {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

  {% comment %}
    Display current variant image, or default first
  {% endcomment %}
  <div class="product-single__photo-wrapper">
    <img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
  </div>

  {% comment %}
    Display rest of product images, not repeating the featured one
  {% endcomment %}
  <ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
    {% for image in product.images %}
        <li class="grid__item medium--one-quarter large--one-fifth product-single__photo-wrapper">
          <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail">
            <img class="product-single__photo" src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
          </a>
        </li>
    {% endfor %}
  </ul>
  
  <ul class="gallery hidden">
    {% for image in product.images %}
    <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '1024x1024' }}"></li>
    {% endfor %}
  </ul>
</div>
<div class="product-single__photos medium--hide large--hide">
  {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

  {% comment %}
    Display current variant image, or default first
  {% endcomment %}
  <div class="product-single__photo-wrapper" id="main-product-image">
    <img class="mobile_slide" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
  </div>

  {% comment %}
    Display rest of product images, not repeating the featured one
  {% endcomment %}
  {% for image in product.images %}
    {% unless image contains featured_image %}
      <div class="product-single__photo-wrapper">
        <img class="mobile_slide" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
      </div>
    {% endunless %}
  {% endfor %}
</div>

** Go to the theme.scss.liquid file and add this to the bottom:**

.hidden {
  display:none; 
}
.product-single__photo-wrapper {
  margin-bottom: 15px;
}

Go to the theme.js.liquid file and:

1. Find this line in the timber.initCache function:

Add this below it:

$thumbImages             : $('#ProductThumbs').find('a.product-single__thumbnail'),

1. Find the timber.init function:

Add this to the bottom of the list:

timber.productImageSwitch();

1. Find this section of the timber.productPage function:

Replace it with this:

Shopify.Image.switchImage(newImg, el, timber.switchImage);

1. Just below the timber.productPage function, add these 2 functions:

timber.productImageSwitch = function () {
  if (timber.cache.$thumbImages.length) {
    // Switch the main image with one of the thumbnails
    // Note: this does not change the variant selected, just the image
    timber.cache.$thumbImages.on('click', function(evt) {
      console.log(evt);
      evt.preventDefault();
      var newImage = $(this).attr('href');
      var newImageId = $(this).attr('data-image-id');
      timber.switchImage(newImage, { id: newImageId }, timber.cache.$productImage);
    });
  }
};

timber.switchImage = function (src, imgObject, el) {
  // Make sure element is a jquery object
  var $el = $(el);
  $el.attr('src', src);
  $el.attr('data-image-id', imgObject.id);

  {% if settings.product_image_zoom_type == 'zoom-in' %}
    // Update new image src to grande
    var zoomSrc = src.replace('_medium.','_1024x1024.').replace('_large.','_1024x1024.').replace('_grande.','_1024x1024.');
    $el.attr('data-zoom', zoomSrc);

    $(function() {
      theme.productImageGallery();
    });
  {% endif %}
  
  var $newImage = $('.mobile_slide[data-image-id="'+ imgObject.id +'"]');
  
  if (theme.variables.productPageLoad) {
    getNewImage();
  } else {
    // Run on load to prevent Chrome scroll jerk
    $(window).on('load', function() {
      getNewImage('load');
    });
    theme.variables.productPageLoad = true;
  }
  
  function getNewImage(onLoad) {
    if (theme.variables.bpSmall) {
      // Switch carousel slide, unless it's the first photo on load
      var imageIndex = $newImage.parent().attr('index');
      // Navigate to slide unless it's the first photo on load

      // If there is no index, slider is not initalized.
      if (imageIndex === undefined) {
        return;
      }
      if (imageIndex != 0 || !onLoad) {
        theme.cache.$productImages.slickGoTo(imageIndex);
      }
    }
  }
};

1. Find this section of theme.initCache function:

Add this line below it:

$productImageGallery    : $('.gallery__item'),

1. Find this line in the theme.init function:

Replace it with this:

theme.productImageGallery();

1. Find this line in the theme.setBreakpoints function:

Replace it with this:

theme.productImageGallery();

1. Find the theme.productImageZoom function:

Replace it with this:

theme.productImageGallery = function() {

  if (!theme.cache.$productImageGallery.length) {
    return;
  };

  theme.cache.$productImageGallery.magnificPopup({
    type: 'image',
    mainClass: 'mfp-fade',
    closeOnBgClick: true,
    closeBtnInside: false,
    closeOnContentClick: true,
    tClose: '{{ "products.zoom.close" | t }}',
    removalDelay: 500,
    callbacks: {
      open: function(){
        $('html').css('overflow-y','hidden');
      },
      close: function(){
        $('html').css('overflow-y','');
      }
    },
    gallery: {
      enabled: true,
      navigateByImgClick: false,
      arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"><span class="mfp-chevron mfp-chevron-%dir%"></span></button>',
      tPrev: '{{ "products.zoom.prev" | t }}',
      tNext: '{{ "products.zoom.next" | t }}'
    }
  });

  theme.cache.$productImagePhoto.bind('click', function() {
    var imageId = $(this).attr('data-image-id');
    theme.cache.$productImageGallery.filter('[data-image-id="' + imageId + '"]').trigger('click');
  });
};