How to toggle main product image from multiple images I'm having some trouble figuring out how to properly update the main product image from a set of images that are available.

Within the product detail page, I have a large default image that is shown with a set of thumbnails below from lopping through all available images associated with the product.

I'm able to loop through and display all available images for the given product using.

&lt;div class="product__photos"&gt;
{% set relatedAssets = product.productPhoto.all() %}

  {% if relatedAssets|length %}
    {% for rel in relatedAssets %}
      &lt;div class="product__photo"&gt;
        &lt;img src="{{ rel.getUrl('square_md') }}" alt=""&gt;
      &lt;/div&gt;
    {% endfor %}
  {% endif %} 
&lt;/div&gt;


What I'd like to do it update the large image once a thumbnail of the image set is clicked. I haven't been able to find anything related to successfully doing this which seems like a common pattern for an ecommerce site.

Any advice would be much appreciated!
Something like this (untested):

{% set relatedAssets = product.productPhoto.all() %}
{% if relatedAssets|length %}

&lt;img id="primaryImg" src="{{relatedAssets|first.getUrl() }}"&gt;

&lt;div class="product__photos"&gt;

    {% for rel in relatedAssets %}
      &lt;div class="product__photo"&gt;
        &lt;a href="#" class="thumbImg" data-lrgimg="{{ rel.getUrl() }}"&gt;&lt;img src="{{ rel.getUrl('square_md') }}" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
    {% endfor %}

&lt;/div&gt;
{% endif %} 

&lt;/div&gt;

&lt;script&gt;
$( document ).ready(function() {
  $(".thumbImg").click(function(){
    $("#primaryImg").attr({ "src": $(this).data('lrgimg') });
  });
});
&lt;/script&gt;