Show a specific image on hover in my product cards

Solved

Show a specific image on hover in my product cards

creativebp8
New Member
4 0 0

My site uses the standard Dawn theme. Currently my product cards are set to show the second image when my cursor hovers over them. I was hoping to change it to show a different specific image (changes based on product). Currently I have my product stills in order and then two photos of a model wearing my product. I was hoping to keep this same order whilehave one of the modeling photos show up when you hover over the product listing. I believe there needs to be a custom code implemented and was hoping I could get some guidance on how to go about this. Should be a pretty simple integration just not sure where to start. I have attached a photo of an example product listing and how the order of my photos usually goes. Please not there is a different number of photos for each product.

Screenshot 2024-07-04 at 6.01.48 PM.jpeg

Accepted Solution (1)

Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@creativebp8 Please follow below steps to display last image on product cards instead of second image. Let me know whether it is helpful for you.

 

1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Go to "card-product.liquid" file and search "if card_product.media[1] != null" and paste the below code before that line like below image.

 

{% assign last_image = card_product.media | last %}

 

Vinsinfo_0-1720160411149.png

 

4. Then search "card_product.media[1]" and paste "last_image" code in replace field like below image.
Vinsinfo_1-1720160419624.png

 

5. Then click "Replace All" button and save changes.
Vinsinfo_2-1720160427301.png

 

Now, hovering on product cards will display the product last image.
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 7 (7)

namphan
Shopify Partner
409 50 72

Hi @creativebp8,

It will display the second image in the list of images, or another image. You can use Metafield to add customization to each product and display it.

Do you have experience with code?

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
creativebp8
New Member
4 0 0
Yes, I understand it will display the second image. I want it to instead
display the last image. I have some general experience in coding. Where
should I start?
namphan
Shopify Partner
409 50 72

Hi @creativebp8,

Will it always show the last image of all products, or will some products show the image in a different position?

If always show the last image, can you send me the code of card-product.liquid file, I will help you check it

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
creativebp8
New Member
4 0 0
It will always show the last image. How should I best send you the code?


namphan
Shopify Partner
409 50 72

Hi @creativebp8,

You can post it directly here, or send it via private message. I will check it

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com

Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@creativebp8 Please follow below steps to display last image on product cards instead of second image. Let me know whether it is helpful for you.

 

1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Go to "card-product.liquid" file and search "if card_product.media[1] != null" and paste the below code before that line like below image.

 

{% assign last_image = card_product.media | last %}

 

Vinsinfo_0-1720160411149.png

 

4. Then search "card_product.media[1]" and paste "last_image" code in replace field like below image.
Vinsinfo_1-1720160419624.png

 

5. Then click "Replace All" button and save changes.
Vinsinfo_2-1720160427301.png

 

Now, hovering on product cards will display the product last image.
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
creativebp8
New Member
4 0 0

Thank you so much!