How to choose a specific Image for product hover

Site URL: https://tresoire-demo.squarespace.com/?nochrome=false

Hey Guys! 

How would i be able to select a certain image for the product hover? We have 2 variants of the same item and I want the second one to be shown on the product hover without the second variant being the second image placement.

Is there a way to do choose a specific photo from the product to be the second photo on the hover?

Thanks!

You want to remove image change on hover for some products? Which product? We can give the code to do this.

Hi

So you want to reoder the first 2 images of a products and use them for the hover effect right?

Like your reference

https://mliuheart.com/collections/shop/products/c1001-1-marked-grey-tshirt

Hey guys! thanks for the replies.

So basically we need to be able to choose which photo of the product will come up as the second photo on the hover effect.

Some products will be different due to varied photo amounts. If you could possibly give me a code which enables me to pick exactly which two photos will appear on the shop page -

For example either inputting '1' for photo 1  of the carousel and '5' for photo 5 and then when on the shop page the hover effect will use photos 1 & 5 instead of always 1 & 2

Hope this clears it up. I'm far from an expert so it's a little difficult to explain. Thanks guys!!

Hey Bangank36,

So we have 2 types of the same Item - BLANK and MARKED. Instead of like the reference websites where we have a seperate product page for each product, we want to have MARKED to be an option - Like a colour choice.

The problem we're having is to have a coherent product photo carousel that firstly displays all 4 or 5 photos of the BLANK and then shows the MARKED product photos.

But on the shop page for the hover photo it shows the BLANK item and the MARKED item without the photos being numbers 1&2 on the product page carousel.

hope this makes sense. Thank you for the help!

Hi Muffet24,

Afraid there is no such option except image order, do you want to change the template files?

So I'm sure this thread is dead by now but thought I would leave an answer after experiencing a lot of pain searching for an answer. This is specific to the hyde template (Brine family) product page but explanation references op template link.

When you utilize inspect for the product and you drill down you'll find for each index item there are two images that the product item is pulling for the cover and subsequent hover photo.

To update the hover photo you would combine the CSS tags in the template as below:
 

.article-index-1 grid-item-image.grid-image-hover {

content: url ("url of the desired image here")

}

your tags will be different than the grid-item-image but reference the template in the original post to find location.

On 6/17/2020 at 3:34 PM, Muffet24 said:

Site URL: https://tresoire-demo.squarespace.com/?nochrome=false

Hey Guys! 

How would i be able to select a certain image for the product hover? We have 2 variants of the same item and I want the second one to be shown on the product hover without the second variant being the second image placement.

Is there a way to do choose a specific photo from the product to be the second photo on the hover?

Thanks!

product hover video.mov

Recently I have some similar projects for this, and my solution would be using product json data ?format=json to get the variants data via ajax call and select the 2nd images on demand