different first image of collection page than product page

[PRETTYFRIDAYS]

Hey i just build my shopify store but i want a different product image on the collection page than on the product page. Does anybody know how to do this? Would appreciate it!

Link:https://e8aaa0-3.myshopify.com/

password:mohwhi

[Dan-From-Ryviu · Accepted solution]

Hi @PRETTYFRIDAYS 

Go to your Online store > Themes > Edit code > open card-product.liquid, find this line of code (line 59 to 78)

              <img
                srcset="
                  {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
                "
                src="{{ card_product.featured_media | image_url: width: 533 }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ card_product.featured_media.alt | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}
                  loading="lazy"
                {% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >

Replace with this code

              <img
                srcset="
                  {%- if card_product.media[2].width >= 165 -%}{{ card_product.media[2] | image_url: width: 165 }} 165w,{%- endif -%}
                  {%- if card_product.media[2].width >= 360 -%}{{ card_product.media[2] | image_url: width: 360 }} 360w,{%- endif -%}
                  {%- if card_product.media[2].width >= 533 -%}{{ card_product.media[2] | image_url: width: 533 }} 533w,{%- endif -%}
                  {%- if card_product.media[2].width >= 720 -%}{{ card_product.media[2] | image_url: width: 720 }} 720w,{%- endif -%}
                  {%- if card_product.media[2].width >= 940 -%}{{ card_product.media[2] | image_url: width: 940 }} 940w,{%- endif -%}
                  {%- if card_product.media[2].width >= 1066 -%}{{ card_product.media[2] | image_url: width: 1066 }} 1066w,{%- endif -%}
                  {{ card_product.media[2] | image_url }} {{ card_product.media[2].width }}w
                "
                src="{{ card_product.media[2] | image_url: width: 533 }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ card_product.media[2].alt | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}
                  loading="lazy"
                {% endunless %}
                width="{{ card_product.media[2].width }}"
                height="{{ card_product.media[2].height }}"
              >

It will show 3rd image of your product as a thumbnail image. Because it has the option to show 2nd image of the product when hovering, I changed the default to 3rd image. 

You can make another image appears by changing all values in this code card_product.media[2]

[PRETTYFRIDAYS]

Hey thank you very much! but can i change that it shows the 3rd? I would like it to be the 4th.

Kind regards 

Daan

[Dan-From-Ryviu]

Please find all this type of element card_product.media[2], change 2 to 3 to appear 4th image

[PRETTYFRIDAYS]

thanks!!

[Dan-From-Ryviu]

Most welcome

[cjshoes]

Hi, I'm using the Pipeline 7.2.2 theme. I'm trying to figure out how to use clean product photos on the collection pages but when you click through to the actual product page, the first photo displayed is a lifestyle photo with a model wearing the product like this brand below Polène.

https://eng.polene-paris.com/?_gl=1*oafwf8*_up*MQ..&gclid=Cj0KCQiAs5i8BhDmARIsAGE4xHz6gaoxNejYwU4KM-...

https://eng.polene-paris.com/products/numero-dix-monochrome-camel-graine?_gl=1*vehis8*_up*MQ..&gclid...

Do you know how to do this? 

[alexhamben]

Hello!

Alex from Depict here - we've actually built a Shopify-native app that allows you to choose what images to show on the product cards as default/on-hover per product and collection, without affecting the image order on the product detail pages

You can also add feature images/videos and other forms of content inside a visual drag-and-drop grid editor. 

Posting in case others might have similar issues in the future.

We have a free plan & 2 week unlimited free trial - you can find the app here: https://apps.shopify.com/depict.