Display different image on collection and product page

[ml_jyst]

Hi,

I'm not familiar with Shopify and this is my first project. I have experience in Wordpress, but this is different.
So my issue is: design on collection page has different picture than single product page.

I've uploaded 2 images, first image shows on Collection page and that's okay. On Single product page is it possible to show only second image without first?


How to achieve this, what's the best way, just to know this is custom theme?

Thanks!

[KetanKumar]

@ml_jyst 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[ml_jyst]

HI @KetanKumar, thanks for answer!

Site:
https://bubbly-ice.myshopify.com/

Product Page:
https://bubbly-ice.myshopify.com/collections/all

Single Product Page:
https://bubbly-ice.myshopify.com/products/12-can-multi-pack

So, I would like on Single Product Page to display different image, what is the best solution?

I sent you password in private message.

Best regards!

[tim]

It is theme-dependent. There are themes, for example Boundless which has this option.

You'd need to check the "skip first image" on product page settings in Customize.

[ml_jyst]

@tim 
That's make sense thanks, sorry but I'm not familiar with Shopify.

Where to find that, this is my custom theme

In code I display image using this:

 <img src="{{ featured_image | img_url: 'large' }}" class="w-full" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg">

[ml_jyst]

I solved this problem using this:

{% for image in product.images offset:1 %}
<a href="{{ image.src | img_url: 'large' }}">
<img src="{{ image.src | img_url: 'master' }}" alt="{{ image.alt | escape }}">
</a>
{% endfor %}

[ayTra]

Hi Ml_jyst,

I've read your post about displaying a different image on the collection page other than the one the product page where you say at the end that you solved this problem.

I have the same issue as yours, and would like to display different images for the product  on the product and collection pages. Would you be so kind and advise me how could you solve this so I'll try to do the same.

Best Regards

[Blufurr]

@tim Thank you for this - what about the new Trade theme?  How is this achieved there?

[tim]

I am not sure if modern themes has similar setting.

If I was approaching this, I'd probably add a product metafield to store image used for collection page.

Say it would be product.metafields.custom.collection_image.

Then I'd modify snippets/card-product.liquid to use this image.

Here I refer to the code from Dawn to illustrate, but it's very similar for all Shopify made free themes:

1. Replace all occurrences of card_product.featured_media with card_product_featured_media,

2. then add code above this line https://github.com/Shopify/dawn/blob/d2580d5cdb51553b1d7ed73ed132aa1e17e5842b/snippets/card-product....  so it looks like:

{% assign card_product_featured_media = card_product.metafields.custom.collection_image.value | default: card_product.featured_media %}

{%- if card_product_featured_media -%}

This way we're limiting code edits to a single snippet which will be handy when theme update is available.