Display Product Photos as Grid - Brooklyn Theme

Highlighted
Excursionist
23 0 8

Hello, 

I am trying to display my product photos as thumnails after the main image on Brooklyn theme.  I would like it so if you click the thumnail it will replace the main image.  I want a better customer experience so the customer doesn't have to scroll all the way through the photos.

Does anyone have code that I can copy and paste into my product liquid???

Thank you!!

Highlighted
Shopify Staff
Shopify Staff
73 0 11

Hi Ariana,

This is a great question!

I was able to work out a solution that you should be able to copy and paste into your product.liquid file. :)

The first thing you need to do is head to the "Product page" section of the Customize Theme panel (Online Store>Themes>Customize Theme>Product page) and uncheck the "Enable image zoom" checkbox.

Next, find this section of the code:

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

And replace

<div class="product-single__photo-wrapper">

with

<div class="product-single__photo-wrapper" id="main-product-image">

 

Then, find this section of code:

{% 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="product-single__photo" src="{{ image.src | img_url: 'small' }}" {% 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 %}

And replace it with:

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

 

Lastly, add the following to the very 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>
  #thumbnails {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-bottom: 15px;
  }
</style>

 

That should be it! Hopefully this helps, but please let me know if you have any questions. :)

 

Cheers,

Jake O

Highlighted
Excursionist
23 0 8

Thank you so much for your help!!!  This worked perfectly.

I would like the customer to be able to zoom in on the main photo still.. anyway to do this also?

 

Thanks - Ariana

0 Likes
Highlighted
Shopify Staff
Shopify Staff
73 0 11

Hi Ariana,

Awesome, I'm glad it worked out!

I was able to get the following solution which basically has the main image as a clickable link to the image gallery that's originally built into the theme. This way, the thumbnails will still update the main image, but if you click on the main image, a pop-up gallery opens with all of the images.

To get this set up, find the following code in product.liquid:

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

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

And 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: 'grande' }}" alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
    {% for image in product.images %}
      <img class="product-single__photo" id="hidden-image" 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 }}">
    {% 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>

 

Then, find this section:

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

And replace it with this:

<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>

 

Hopefully this helps, and again, let me know if you have any questions! :)

Cheers,

Jake O

Highlighted
New Member
3 0 0

Hey Jake,

This is awesome and looks great! 

Im just having an issue where when i click the variants in the add cart area a bunch of images start popping up in that main image area.  Was wondering if you had any insights?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
73 0 11

Hey Chris,

I'm not sure what it is you're seeing, could you post a screenshot and/or a link to your store?

Let me know! :)

Cheers,

Jake O

0 Likes
Highlighted
New Member
3 0 0

Hey Jake O,

Heres the product where Im using the new product.liquid with your code added:

https://thecofactory.myshopify.com/collections/womens-clothing/products/rmu-take-anywhere-tank

play with the add cart color selection and you should have the peach tank start repeating.

If I move the product review section around I get a different response but would like to have it under the options and add cart button.

Thanks!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
73 0 11

Hey Chris,

I definitely see what you mean! I'm not exactly sure what's causing it though; it seems like something to do with the javascript that's called when you update the variant, but I've tried to replicate this in a couple different test stores of mine with no luck.

It's maybe worth trying to implement this in a fresh version of Brooklyn? If that solves the issue then you can use that theme, otherwise, you may be best off getting a developer (or Shopify Expert) to add this feature in for you.

I wish I had a better solution for you, but hopefully you're able to get it worked out!

Let me know if you have any questions. :)

Cheers,

Jake O

0 Likes
Highlighted
New Member
3 0 0

Like you said a this is the part being called and when played with it both stops the cart from working and the images from repeating.

This is in the product.liquid 

<script>
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector,
      translations: {
        addToCart : {{ 'products.product.add_to_cart' | t | json }},
        soldOut : {{ 'products.product.sold_out' | t | json }},
        unavailable : {{ 'products.product.unavailable' | t | json }}
      }
    });
  };

  jQuery(function($) {
    new Shopify.OptionSelectors('ProductSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.radio-wrapper:eq(0)').prepend('<label for="ProductSelect-option-0" class="single-option-radio__label">{{ product.options.first | escape }}</label>');
    {% endif %}

    // Hide drop-down selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% endif %}
  });
</script>

 

0 Likes
Highlighted
Excursionist
23 0 8

HI Chris, 

Unfortunately I had to revert back to the original product liquid as the code you provided wasn't supported on a mobile device.  Ideally what I would like to do for my product pages is:

-not have the images dispalyed down the page (have them set up as a gird or gallery)

-still be able to zoom in on the main photo for better detail

-be able to click the smaller photos and have that replace the main image

-have this supported on a mobile device 

 

IF you can hlep me with this that would be AMAZING!  If not, do you suggest anywhere else I can go for help on this?  Thanks

0 Likes