Cacher is the code snippet organizer for pro developers

##What you want:

##How to get it:

Go to product-template.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 %}
  Get all images for gallery, but only show one at a time
{% endcomment %}
<div class="product-single__photo-wrapper">
  <img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
  {% for image in product.images %}
    {% unless image contains featured_image %}
      <img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}" style="display: none;" />
    {% endunless %}
  {% endfor %}
</div>

{% comment %}
  Display thumbnails
{% 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 }}" {% if section.settings.zoom_enable %}data-mfp-src="{{ image | img_url: '1024x1024' }}"{% endif %}
           href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail">
          <img class="product-single__thumb" src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
        </a>
      </li>
  {% endfor %}
</ul>

</div>
<div class="mobile 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">
  <img class="mobile product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if section.settings.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 product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if section.settings.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;
}
.mobile.product-single__photo {
  display: block !important; 
}

Go to the theme.js.liquid file and:

1. Find this sedction of the theme.Product function:

Add this below it:

mobileProductImages: '.mobile.product-single__photos',

1. Find this section of the showVariantImage function:

Add this below:

var $newMobileImage = $('.mobile.product-single__photo[data-image-id="' + variant.featured_image.id + '"]');
var newImageId = variant.featured_image.id;

1. Find this section of the showVariantImage function:

Replace it with this:

imageIndex = $newMobileImage.parent().attr('index');

1. Find this section of the showVariantImage function:

Replace it with this:

$(this.selectors.mobileProductImages).slickGoTo(imageIndex);

1. Find this section of the showVariantImage function:

Replace it with this:

$(this.selectors.productImagePhoto).css('display', 'none');
$(this.selectors.productImagePhoto).filter('[data-image-id="' + newImageId + '"]').css('display', 'block');

1. Find the createImageCarousel function, like here:

Replace it with this:

createImageCarousel: function() {
  if (!$(this.selectors.mobileProductImages).length || $(this.selectors.productImagePhoto).length < 2) {
    return;
  }
  
  $(this.selectors.mobileProductImages).slick({
    arrows: false,
    dots: true,
    adaptiveHeight: true
  });
},

1. Find the destroyImageCarousel function, like here:

Replace it with this:

destroyImageCarousel: function() {
  if (!$(this.selectors.mobileProductImages).length) {
    return;
  }

  $(this.selectors.mobileProductImages).unslick();
},

1. Find this section of the theme.initCache function:

Add this below:

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

1. Find this section of the theme.init function:

Add this below:

theme.productImageSwitch();

1. Just below, the theme.init function, like here:

Add this:

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

      theme.cache.$productImagePhoto.css('display', 'none');
      theme.cache.$productImagePhoto.filter('[data-image-id="' + newImageId + '"]').css('display', 'block');
    });
  }
};