I am facing an issue with our Shopify store where duplicate variant images for colors are being displayed on the storefront. Although everything looks fine in the dashboard, the duplication is causing confusion for customers. Shopify support has advised manually removing the duplicate images, but this is a daunting task due to the large number of variants we have.
Is there a way to fix this via code rather than manual deletion? Can I hide or remove the duplicated images using Liquid code in Shopify or through JS/CSS?
Below is the code that is responsible for generating the product images:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
<div class="flexslider product_gallery product-{{ product.id }}-gallery {% if product-images == blank %}product_slider{% endif %} {% if settings.product_thumbs == false %}animated fadeInUp{% endif %}">
<ul class="slides">
{% for image in product.images %}
<li data-thumb="{{ image | product_img_url: '1024x1024' }}" data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}">
{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}
{% assign src = image.alt | split: 'src="' %}
{% assign src = src[1] | split: '"' | first %}
{% if src contains '?' %}
{% assign src = src | append: '&autoplay=1' %}
{% else %}
{% assign src = src | append: '?autoplay=1' %}
{% endif %}
<div class="video-container {% if image.alt contains 'vimeo' %}vimeo{% else %}youtube{% endif %}">
<div>
<a href="{{ src }}" class="fancybox fancybox.iframe" data-fancybox-group="{{ product.id }}" title="{{ product.title | escape }}">
{{ image.alt }}
</a>
</div>
</div>
{% else %}
<a href="{{ image | product_img_url: 'master' }}" class="fancybox" data-fancybox-group="{{ product.id }}" title="{{ image.alt | escape }}">
<img src="{{ image | product_img_url: '1024x1024' }}"
alt="{{ image.alt | escape }}"
class="lazyload transition-in cloudzoom {% if featured_image.id == image.id %}featured_image{% endif %}"
data-image-id="{{ image.id }}"
data-index="{{ forloop.index0 }}"
data-cloudzoom="zoomImage: '{{ image | product_img_url: 'master' }}', tintColor: '{{ settings.shop_bg_color }}', zoomPosition: 'inside', zoomOffsetX: 0, touchStartDelay: 250"
/>
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>