Jump to content

How to choose a specific Image for product hover

Recommended Posts

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!

Link to comment

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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!!

Link to comment

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!

Link to comment

Hi Muffet24,

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 year later...

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.

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.