How can I have a different product image between my catalogue and the product page?

Store Design
1

Hello and thank you for reading,

Here is my problem:

I have created a clothing brand and my aim is to offer 5 different designs for the same colour. So, for a typical product, I use the Shopify option, which allows me to create variants of the same product. So I add the image of my 5 variants to the product images. However, I’d like another of the 5 images to be displayed on the collections page.

To cut a long story short, I need to find a way of replacing the image that automatically appears in collections with a customised image.

I’m running Dawn 10.00: awkosmoz.com

I hope you’ve understood me :rofl:

Thank you in advance for your reply,

Best regards

image.png
image.png1352×636 163 KB

2

Hi @Osmoz

Create a metafield at the product level and custom code in card-product.liquid which will show your desired image from metafield.

Hope this will clear to you…

1 Like
3

Thank you for your reply, it gives me great pleasure.

However I only have a little knowledge of Shopify, could you please tell me a little more about the process to modify the code of card-product.liquid so that it replaces the image with my metadata?

Thanks in advance

4

@gr_trading Please also consider that I wouldn’t want to do this for just one product in my store, but several.

ChatGPT hasn’t been able to help me even after several hours of asking him, I still can’t get a conclusive result.

5

Hi @Osmoz

To have enable and disable feature you can create 1 more metafield of Boolean type.

And yes this will work for all the product.

1 Like
6

Sorry to be so insistent.
But I’m not a developer. Liquid is a mystery to me.
Could you give me the location I need to modify and the code I need to write there.

For a card-product.liqud on dawn 10.0 it seems to me that the modification should be made at line 69.

Here’s the code GPT suggests if it helps:

{% if card_product.metafields.custom.collection_image %}
{% assign image = card_product.metafields.custom.collection_image %}
{% else %}
{% assign image = card_product.featured_media | default: placeholder_image %}
{% endif %}

Thank you in advance for your reply, and thank you for your work.

7

@gr_trading