Display a single product image on product page shopify

Question

Currently, on my Shopify website I have multiple product images displayed on my product page. I want to display only one and have the image change when clicked on a thumbnail.

Here is my current code:

<div id="productImg">
   <div>
      <div class="img-wrapper" data-js-container="">
         <div class="img-side-section">
            <ul class="product__thumbs">
               {% for image in product.images %}
                 <li>
                    <img name="{{ image.alt }}" data-src="{{image | img_url: '1000x1000'}}" itemprop="image" src="{{image | img_url: 'large'}}" class=" lazyloaded" data-anchor="#img{{forloop.index0}}">
                 </li>
               {% endfor %}
                {% if product.metafields.custom_fields["youtube"] != blank %}
               <li>
                    <img name="Classic Sheers" data-src="https://i3.ytimg.com/vi/dPJsjeT0GQM/hqdefault.jpg" 
                         itemprop="image" src="https://i3.ytimg.com/vi/dPJsjeT0GQM/hqdefault.jpg" class=" lazyloaded" 
                         data-anchor="#img-youtube"
                      >
                </li>
                {% endif %}
            </ul>
         </div>
         <div class="product__img-section">
           
           {% for image in product.images %}
            <div class="img-container" data-img="" data-larger="{{image | img_url: '1000x1000'}}" data-scale="2.6">
               <img style="z-index: 3;" id="img{{forloop.index0}}" name="{{ image.alt }}" data-src="{{image | img_url: '1000x1000'}}" itemprop="image" src="{{image | img_url: '1000x1000'}}" class=" lazyloaded">
               <div class="img-inner" style="background-image: url({{image | img_url: '1000x1000'}})); display: none; transform: scale(1); transform-origin: 3.15625% 19.25%;"></div>
            </div>
            {% endfor %}
             {% if product.metafields.custom_fields["youtube"] != blank %}
               <div id="img-youtube" class="img-container" data-img="" data-larger="{{image | img_url: '1000x1000'}}"  data-scale="2.6">
                   <iframe src='{{ product.metafields.custom_fields["youtube"] }}' frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
               </div>
             {% endif %}
         </div>

      </div>
   </div>
</div>

I would like to keep thumbnails as is but to only display one featured image. I searched everywhere to find how to do that. Here is my last hope.

Noob Dev Noob Dev · Accepted Answer · 2019-11-18T06:24:04

Can you please send your store url so i can check better?

Meanwhile you can try to remove the {% for loop %} inside "product__img-section" div

and change:

 <img style="z-index: 3;" id="img{{forloop.index0}}" name="{{ image.alt }}" data-src="{{image | img_url: '1000x1000'}}" itemprop="image" src="{{image | img_url: '1000x1000'}}" class=" lazyloaded">

to:

 <img style="z-index: 3;" id="img{{forloop.index0}}" name="{{ image.alt }}" data-src="{{ product.featured_image | img_url: '1000x1000'}}" itemprop="image" src="{{ product.featured_image | img_url: '1000x1000'}}" class=" lazyloaded">

Display a single product image on product page shopify

1 Answers