How to Show a different image in a collections list vs. on details page.

Highlighted
Tourist
6 0 1

Right now it shows the first image (featured image) on the collections pages a product is associated with AND on the details page.

I want a different image for each (say, the first and second images).  The reason is that on the collections page I want images that are all square but on the details page i want the full sized, proper aspect ratio image (this is for images of art work).

Please help!

Dave

0 Likes
Highlighted
Shopify Staff
Shopify Staff
283 0 48

Hi Dave,

We will need to edit the product page template to do this. This solution will require you to put all square images in the first position of the product images (it seems you have already done this, but just making sure!)

  • Visit your theme file by going to Online Store > Themes
  • On your active theme, click the [...] button, and select Edit HTML / CSS
  • We will edit the product.liquid, under Templates
  • You will need to find this line: {% assign featured_image = selectedVariant.featured_image | default: product.featured_image %}
  • Change it to this:
  • {% assign featured_image = selectedVariant.featured_image | default: product.images[1] %}

     

  • That will have the first image that appears on product pages to show the 2nd image in the list.
  • Next, we can change some code to hide the first image in the list from being selected, if you want:
  • Find this: {% for image in product.images %}
  • Change it to:
  • {% for image in product.images offset:1 %}

     

I hope that helps! Please let me know if you have any other questions about this at all.

Hugh

Happy selling! :)
3 Likes
Highlighted
Tourist
6 0 1

Totally awesome answer and you were thorough telling me how to hide the first image!  Very good support.  Thank you so much.

Dave

0 Likes
Highlighted
New Member
1 0 0

Hi

Hugh Luong 

The code you are telling  in the file  product.liquid for replacing is not exists,then what to do?

Here is the code in my file please check and reply.

Thanks

Sunny

0 Likes
Highlighted
Shopify Partner
11 0 1

Thank you, Hugh!!!

0 Likes
Highlighted
Shopify Partner
6 0 0

Open the product-template file..

0 Likes
Highlighted
New Member
25 0 0

Helo,

Thanks Hugh! Сool idea, keep up in the same spirit)

Regards!

0 Likes
Highlighted
Tourist
5 0 0

Hi, 

I am facing the same problem but I am not getting that 2nd line of code how to find out that?

I am using Gecko theme(https://themeforest.net/item/gecko-responsive-shopify-theme/21398578)

0 Likes
Highlighted
New Member
2 0 0

: )

0 Likes
Highlighted
New Member
2 0 0

Thank You so much! it worked for me.

 

0 Likes