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

Solved
Highlighted
Tourist
4 1 2

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!

1 Like
Highlighted
Shopify Partner
7473 1034 2599

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 1 2

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:
Screen Shot 2020-09-11 at 15.42.45.png

1 Like
Highlighted
Shopify Partner
7473 1034 2599

@CMSilver 

Thanks for update

yes, it can be done more customization.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 1 2

Hi Kumar, could you please share how?

0 Likes
Highlighted
Tourist
4 1 2

This is an 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!


0 Likes