Why are my Squarespace Product Images Not Showing Upon Hover?

Hi! I’m here with a quick Squarespace eCommerce design tip!

In this short video, I show how to make your product inventory images behave the same upon hover to show multiple photos of a product.

Also, the store I’m showing off here is a newly launched website I just built. Check out JH HATS on Squarespace!

View the transcript below the video.

• Transcript

  Hi, I'm Nicolette with Nicolette Leigh Creative. I am a Squarespace designer and I'm here in my client's Squarespace website. I'm helping add their inventory and I'm just going through all the images and products to make sure they're uniform.

  And I wanted to just give a quick tip because sometimes it's these little details that can be frustrating if you don't know what to look for.

  So I'm here in their shop all page, or on their shop all page. And these three products, these three hats, they all react differently.

  When I hover over them with the cursor, this one makes no change at all. The second one, see how it dims a little bit, but it doesn't change.

  And the third one changes to show the second photo. And if you experience something like this and you want them all to be uniform the way you figure that out, like figure out how to do that is by noticing which ones are dimming.

  This means that the featured image is in the second position. And I'll show you that in a minute. And all you need to do is drag it to the first position to get it to behave more like this third hat here.

  This first hat is it makes no change upon hover, so that means there's only one photo attached to this product listing.

  So, and that's totally fine. If you want all of them to have this though, you do need to add more than one photo.

  And now let's go fix this one so that it changes to the second photo upon hover. So I'm gonna go to commerce and go to inventory.

  I'm gonna use the search bar over here to quickly find it. And you can see right here the featured image is the second one.

  So all you need to do is pull it ahead of the second secondary photo, and now it should behave the same as the other one I showed you.

  Then go back to the shop. I'm going to refresh. Okay, now scroll down and there we have it. Thanks for being here.

  I hope that was helpful. And don't hesitate to reach out through email or through my website at the get a project quote with any questions you have about your square space or branding or graphic design project.

  Thanks.

Need a hand with your Squarespace website? Schedule a free intro call.