Shopify Brooklyn theme: Main image with thumbnail

main_image_and_thumbs.md

Stolen from the wonderful @jake-olney

What you want:

How to get it:

Go to product.liquid and:

1. Find this section of code:

2. Replace it with this:

<div class="product-single__photos" id="mobile-gallery">
  {% 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 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 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>

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

  <div class="product-single__photo-wrapper" id="main-product-image">
    <img id="ProductPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
          {% for image in product.images %}
            {% if forloop.first %}
                {% continue %}
            {% else %}
              <img class="product-single__photo" id="hidden-image" src="{{ image.src | img_url: 'large' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
            {% endif %}
          {% endfor %}
          {% for image in product.images limit: 1 %}
           <img class="product-single__photo" id="hidden-image" src="{{ image.src | img_url: 'large' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
          {% endfor %}
  </div>

  {% for image in product.images %}
    <div class="product-single__photo-wrapper" id="thumbnails">
      <a href="{{ image | product_img_url: 'large' }}" title="{{ product.title }}">
        <img src="{{ image.src | img_url: 'small' }}" alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
      </a>
    </div>
  {% endfor %}
</div>

3. Add this to the bottom of the file:

<script type="text/javascript" >
  $('#thumbnails a').click(function() {
  var newImage = $(this).attr('href');
  $( 'div#main-product-image img' ).attr({ src: newImage }); 
  return false;
  });
</script>

<style>
  #mobile-gallery {
    display: none; 
  }

  #thumbnails {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-bottom: 15px;
  }

  #main-product-image {
    position: relative;
  }

  #hidden-image {
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }

  @media (max-width: 590px) {
    #mobile-gallery {
      display: block;
    }

    #gallery {
      display: none;
    }
  }
</style>

Go to the theme.js.liquid file and:

1. Find the section of the timber.productPage function that changes the product image when a variant is selected:

2. Replace it with this:

// Update variant image, if one is set
if (variant.featured_image) {
  var newImg = variant.featured_image.src;
  $( 'div#main-product-image img' ).attr({ src: newImg });
}

Resolved just added this
// Update variant image, if one is set
if (variant.featured_image) {
var newImg = variant.featured_image.src;
$( 'div#main-product-image img' ).attr({ src: newImg });
}
to line 514 on theme.js.liquid

Hey, this works great. thanks!
I only had 2 issues/questions:

1. zoom isn't working- I get an error that the image cannot be displayed (I disabled zoom for the moment since the images are pretty big, so it's not as urgent)
2. in your example gif, the variants were displayed in a drop-down, was this code supposed to do that or did you use something else?

Hello,

Everything mentioned in this don't quite match my version of Brooklyn. I downloaded it yesterday and have been looking for a way to apply this exact thing but my theme is sectioned and the product-template.liquid doesnt have the exact same initial code as displayed above.

For example, the section of code you first highlight, looks like this for me:

I also don't have the timber.productPage section anywhere in the theme.js.liquid

Needless to say, the code you have provided as replacement (step 2) won't save as it results in error.

Any suggestions please?

Many thanks

Hello, I followed your instruction. But the product page looks like this. Help please. :(

Hello, Thank you for really helpful code, Everything is working fine except product zoom feature,
https://www.luxaccess.net/collections/designers-dresses/products/black-printed-sheath-dress-1,
when you click on the displayed image , it needs to open a shadow slide show of all images,

Please tell me how can I do this.
Thanks