<p>Something like this (untested):</p>

<pre><code>{% 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;
</code></pre>

CC BY-SA 4.0
2019-10-31T12:30:36.883Z
Thank you so much, Luke – worked like a charm!
kamicrafted
CC BY-SA 4.0
2019-10-30T04:50:51.393Z
2019-10-30T04:50:51.393Z
Luke Holder
<p>I'm having some trouble figuring out how to properly update the main product image from a set of images that are available.</p>

<p>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.</p>

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

<pre><code>&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;
</code></pre>

<p>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.</p>

<p>Any advice would be much appreciated!</p>

<assets><plugin-craftcommerce><plugin-craftcommerce2>
How to toggle main product image from multiple images
# How to toggle main product image from multiple images

(Asked by: username_0 on 2019-10-30)

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.

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

  {% if relatedAssets|length %}
    {% for rel in relatedAssets %}
      
        
      
    {% endfor %}
  {% endif %} 


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!

**Tags:** assets, plugin-craftcommerce, plugin-craftcommerce2

---

## 1 answers

### Answer by username_1 on 2019-10-30. Score: 1 | Accepted answer

Something like this (untested):
{% set relatedAssets = product.productPhoto.all() %}
{% if relatedAssets|length %}





    {% for rel in relatedAssets %}
      
        
      
    {% endfor %}


{% endif %}

> **Comments:**
> **username_0**: Thank you so much, Luke – worked like a charm!  

---

