Question

我现在是新来商店购物，并且使用免费的主题电话saleshunter。在产品页面上，滑块上的缩略图正在复制。你能帮我解决这个问题吗？这是我为产品图片找到的代码。

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

Answer 1

无论出于何种原因，图像缩略图都会根据您使用的变体（例如，小，中，大分别表示红色衬衫，蓝色衬衫和黑色衬衫）进行复制。这意味着您将有一件颜色衬衫的3个重复项。为防止这种情况发生，请删除以下代码：

{% 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 %}

以及此代码后的{％endfor％}之一：

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

Shopify图像滑块复制图像

1 个答案: