Jump to content

How to turn off hover on shop page??

Recommended Posts

I am brand new to this stuff so any help would be so great!

I am wondering if there is an easy way to bypass the hover feature on 7.1 on my shop page. My products have multiple images but I only want the first one displayed on the main shop page. Right now, when you hover over it it shows the second photo. 

Please help a struggling newbie! 😂

Thank you!

Link to comment
10 hours ago, JosieB said:

I am brand new to this stuff so any help would be so great!

I am wondering if there is an easy way to bypass the hover feature on 7.1 on my shop page. My products have multiple images but I only want the first one displayed on the main shop page. Right now, when you hover over it it shows the second photo. 

Please help a struggling newbie! 😂

Thank you!

Could you let us see your current site url?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
17 hours ago, JosieB said:

I am wondering if there is an easy way to bypass the hover feature on 7.1 on my shop page. My products have multiple images but I only want the first one displayed on the main shop page. Right now, when you hover over it it shows the second photo. 

Adding the following to Design > Custom CSS should prevent this.

.products.collection-content-wrapper .grid-item:hover .has-hover-img .grid-image-cover {
  opacity: 1!important;
}
.products.collection-content-wrapper .grid-item:hover .grid-image-hover {
  opacity: 0!important;
}

I couldn't check this on your site because the site is currently password protected and you didn't provide the password.

   If a post helps you, please click a "Like" option below  ↘️

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
17 minutes ago, paul2009 said:

Adding the following to Design > Custom CSS should prevent this.


.products.collection-content-wrapper .grid-item:hover .has-hover-img .grid-image-cover {
  opacity: 1!important;
}
.products.collection-content-wrapper .grid-item:hover .grid-image-hover {
  opacity: 0!important;
}

I couldn't check this on your site because the site is currently password protected and you didn't provide the password.

   If a post helps you, please click a "Like" option below  ↘️

Wow thank you so much! It worked perfectly 

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.