CODEWITHSUNDEEP
htmlcssshopifyliquid
user3047736
user3047736

Reputation:

Shopify - Featured image duplicates product in collection view

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

enter image description here

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>

Upvotes: 0

Views: 1254

Answers (1)

Steph Sharp
Steph Sharp

Reputation: 11682

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.

Upvotes: 1

Related Questions