How do I Choose a Specific Product Image that Only Displays in Collections [Brooklyn]

[CMSilver]

Hi I'm wondering how I can select a specific product image that will only display in collections, and not in the product listing themselves. I'm using the Brooklyn theme.

I'd like to do this so the products I am listing in the collections all display with the same dimensions – I have exported images with specific dimensions for this purpose.

I think I have to do this through code, which I'd be comfortable doing with some guidance.

Thanks!

[KetanKumar]

Hello, @CMSilver 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[CMSilver]

Hi @KetanKumar 

The URL is: https://claire-mooney-silver.myshopify.com/collections/gallery
Password is: collection

In the collection pages, a product's featured image is displayed to represent the product. I'd instead like to be able to choose a unique image that is displayed to represent products on collection pages only, so the image that displays on collection pages doesn't display on the product page. I'd like to keep product pages looking the same way they are now.

As a bit of an example:

[KetanKumar]

@CMSilver 

Thanks for update

yes, it can be done more customization.

[CMSilver]

Hi Kumar, could you please share how?

[CMSilver · Accepted solution]

So I was able to figure this out through combining a few forum posts.

To achieve what I was asking you have to go to 'product-template.liquid' under Sections.

From here, change Line 16 from:

{% assign featured_media = current_variant.featured_media | default: product.featured_media %}

to 

{% assign featured_media = product.images[1] | default: product.featured_media %}

this will make the browser display the second uploaded image as the feature image of the product itself, however you'll still be able to click on the first image through slides and thumbnails, but this can be fixed by doing the following:

Visit Line 33 and change

{%- for media in product.media -%}

to

{%- for media in product.media offset:1 -%}

and then visit Line 86 and change

{%- for media in product.media -%}

to

{% for media in product.media offset:1 %}

By doing this you tell browsers to ignore what would usually be the featured image of a product, allowing you to upload  a unique image in its place that will display on collection pages only. By including the offset code, you hide that unique image on the product page.

Best of luck everyone!

[Blufurr]

Does anyone know how this would work on the Dawn theme or Trade theme?  (I'm using Trade theme).  This doesn't seem to be the same when I look in the code, it is 5 years later than when the above was posted so probably things have changed but as I'm new to Shopify I would love if someone has figured this out.

[KetanKumar]

@Blufurr 

Please share your store URL so I can take a look and provide the right solution. If there's anything specific you need help with, feel free to mention it!

[gofortiss]

There is a new solution for this issue !

This app can adapt your product image based on the collection : EZ Product Image By Collection 

Tell me if this fit for your needs but honestly it's very easy to use and cover almost every usecases

Have a nice day !

Jonathan