Remove product image hover effect on Squarespace

When you showcase products on your Squarespace ecommerce site, you’re obviously going to want to use product images. 

Most ecommerce websites will use multiple images per product however, if you do this on Squarespace, when a user hovers over e.g. product image 1, product image 2 will automatically appear. 

For some people that’s not a problem, but some people want to remove this hover effect and instead have users simply see the first image.

The good news is that there is a way to remove it and I’m going to talk you through it. Let’s get started…

Watch the video

Check out the YouTube video below 👇

How to remove product image hover effect on Squarespace

Navigate to Website > Website Tools > Custom CSS and add the following code to your CSS panel:

.products.collection-content-wrapper .grid-image-hover {
opacity: 0 !important;
}

.products.collection-content-wrapper .grid-image-cover {
opacity: 1 !important;
}

What this code does is turn the opacity of the hover effect down to zero which means even though technically the effect is still happening, you can’t see it.

This code allows you to override Squarespace’s hover effect and ensures that only one image is displayed on your main shopping page. 

Once you’ve added in the code, hit save and you’re all done.

---

📩 Join the inner circle to get exclusive code updates

---

Found this tutorial useful? Make sure you save and share it for future reference!

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?