Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Shopify Brooklyn theme: Main image with thumbnail

Stolen from the wonderful @jake-olney

What you want:

alt

How to get it:

Go to product.liquid and:

  1. Find this section of code:

alt

  1. 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>
  1. 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:

alt

  1. 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 });
}
@MicrobrewMedia

This comment has been minimized.

Copy link

@MicrobrewMedia MicrobrewMedia commented Jan 7, 2017

Thanks for this! Now just to connect clicking thumbnails to switching variant selected. Cheers!

@Jma101

This comment has been minimized.

Copy link

@Jma101 Jma101 commented Mar 18, 2017

This is amazing! My only issue is once I made the changes, in desktop when I am on a product page and I am trying to choose the variant by "color" , after a few clicks between the different options, it starts to duplicate the product image and shoot the same one downwards and it seems to be multiplying it by 2 after each click.

@Jma101

This comment has been minimized.

Copy link

@Jma101 Jma101 commented Mar 18, 2017

ok i fixed it, i just removed the loop and it worked perfectly. Thank you for this :)

This is the part i removed:

{% 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 %}

@garyhal

This comment has been minimized.

Copy link

@garyhal garyhal commented Jun 7, 2017

Is now no section timber.productPage function. Please help where i do find this. Thank you

@garyhal

This comment has been minimized.

Copy link

@garyhal garyhal commented Jun 7, 2017

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

@rutheh

This comment has been minimized.

Copy link

@rutheh rutheh commented Jun 16, 2017

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?
@beccafrost

This comment has been minimized.

Copy link

@beccafrost beccafrost commented Jul 14, 2017

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:

screen shot 2017-07-14 at 13 17 44

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

@junkovillarin

This comment has been minimized.

Copy link

@junkovillarin junkovillarin commented Aug 1, 2017

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

broken

@jaimin306

This comment has been minimized.

Copy link

@jaimin306 jaimin306 commented Oct 19, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment