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 👇
Want a framework for designing the perfect homepage?
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.
Found this tutorial useful? Make sure you save and share it for future reference!
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
