在产品页面 shopify 上显示单个产品图像

Question

目前，在我的 Shopify 网站上，我的产品页面上显示了多个产品图片。我只想显示一个并在单击缩略图时更改图像。

这是我当前的代码：

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

我想保持缩略图不变，但只显示一张特色图片。 我到处搜索以找到如何做到这一点。这是我最后的希望。

Answer 1

能否请您发送您的商店网址，以便我更好地检查？

同时您可以尝试删除“product__img-section” div 中的 {% for loop %}

并改变：

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

到：

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