Shopify-精选图片在收藏夹视图中复制了产品

Question

When displaying an image in the collection section and having product preview images associated with a certain product, I receive duplicate copies of the product because I have image previews. Is this because I'm not calling for the first featured image?

<img src="{{ collection.products.first.featured_image | product_img_url: 'medium' }}">

Both images go to the same product. I figured out that because I have a preview image and a featured image it displays two identical products.

Here's the full source:

<div class="collectionfront">   
{% for product in products %}
{% for image in product.images %}
<a href="/products/{{ product.handle }}" class="product-hover"><img src="{{ collection.products.first.featured_image | product_img_url: 'medium' }}"><h2><span>{{ product.title }}</span></h2>{{ product.price | money_with_currency }}{% if product.available %}<form action="/products/{{ product.handle }}"><span><button type="submit" class="shop-btn">Shop</button></span></form>{% else %}<p>Sold Out!</p>{% endif %}</a>
{% endfor %}

{% endfor %} 
</div>

Answer 1

I think it's because you're looping through each product image. Try removing your inner for loop {% for image in product.images %} .

Also, if you are displaying a featured image for a product and not a collection, you probably want product.featured_image instead of collection.products.first.featured_image .