How to Show Product Page Thumbnails and Change Large Main  Image on Thumbnail Click

This technique was first used on the Daft Punk site for the posters. The code has been slightly modified to be more compatable with the OLM base theme. https://eu.daftpunk.com/products/x23mb8746hy23wx99kmp4

The Logic

Display main product image and product thumbnail images. When the thumbnail is clicked thumbnail’s image gets loaded into the imgsrc variable and replaces .first-image img with the image loaded.

The Code

Add the following code to either product.liquid or product-add-to-cart.liquid depending on your goal.

<div class="product-thumbs" >
    <ul>{% assign image = product.images.first %}
      <li class="first-image">
        <a href="#"><img src="{{ image | product_img_url: 'large' }}" /></a>
      </li>
      {% for image in product.images %}
          <li><a href="#" class="single_image" ><img src="{{ image | product_img_url: 'small' }}" alt="{{ product.title | escape }}" /></a></li>
      {% endfor %}
    </ul>
</div>

Include the following .js code. This code looks for a.single_image which are the thumbnail images. Whenever one of the images are clicked, change the image size from small to large and replace large image .first-image img with the clicked image.

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("a.single_image").click(function() {
          var imgsrc = $(this).find('img').attr('src').replace('_small', '_large');
          $('.first-image img').attr('src', imgsrc);
        });
    })
</script>