Shopify Image slider duplicating images

Question

I'm currently new to shopify and using a free theme call saleshunter. On the product page itself, the thumbnail images on the slider are duplicating. Can you help me solve this? Here's the code I found for the product images.

<div class="{{ product_image_width }}">
				<div class="product-single__images">
					<div class="product-single__photos slick-slider manual-init" id="ProductPhoto">
						{% for image in product.images %}
							<div class="product-single__photos__item">
								{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
								<img src="{{ image.src | img_url: product_image_size }}" alt="{{ image.alt | escape }}">
							</div>
						{% endfor %}
					</div>

					{% if product.images.size > 1 %}
						<div class="product-single__thumbnails slick-slider manual-init" id="ProductThumbs">
							{% for image in product.images %}
								{% for variant in image.variants %}
									<div class="product-single__thumbnails__item" {% if image.attached_to_variant? %} data-variant="{{ variant.id }}" {% endif %}
										 data-index="{{ image.position }}">
										<img src="{{ image.src | img_url: product_thumb_size }}"
											 alt="{{ image.alt | escape }}">
									</div>
								{% else %}
									<div class="product-single__thumbnails__item">
										<img src="{{ image.src | img_url: product_thumb_size }}"
											 alt="{{ image.alt | escape }}">
									</div>
								{% endfor %}
							{% endfor %}

						</div>
					{% endif %}
				</div>
			</div>

Ariel Ariel · Accepted Answer · 2018-07-30T01:46:18

For whatever reason, the image thumbnails duplicate based on the variants you have (i.e. small, medium, large for a red shirt, blue shirt, and black shirt). Meaning you will have 3 duplicates of one color shirt. To prevent this from happening, remove this code:

{% for variant in image.variants %}
      <div class="product-single__thumbnails__item" {% if image.attached_to_variant? %} data-variant="{{ variant.id }}" {% endif %}
                                     data-index="{{ image.position }}">
             <img src="{{ image.src | img_url: product_thumb_size }}"
                         alt="{{ image.alt | escape }}">
      </div>
{% else %}

as well as one of the {% endfor %} after this code:

<div class="product-single__thumbnails__item">
        <img src="{{ image.src | img_url: product_thumb_size }}"
                 alt="{{ image.alt | escape }}">
</div>

Shopify Image slider duplicating images

1 Answers