Jump to content

How to stop products in Shop from fading in on Scroll? Have turned off site wide animations but it's still happening?

Recommended Posts

Site URL: https://littlebunchflorals.squarespace.com

I have a site I'm building and I'd like to stop the products in the shop from fading in when scrolling? The client wants no animations at all across the entire site. 

I have disabled animations Site-wide, but I'm finding the product pages in the shop still fade in? 
I have searched everywhere for an answer but I can only find how to add them, and not remove? 

Is there some code injection  or CSS I can do on the Shop page only? 

password: jesleacreative

Any suggestions are welcomed! Thank you! 

Link to comment

Hey @jesleacreative try to use next ton in Custom CSS.

.products.collection-content-wrapper .grid-item {
    opacity: 1 !important;
    transform: translatey(0) !important;


SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
On 11/10/2021 at 6:57 PM, jesleacreative said:

THANK YOU! It worked!

I'm such a newbie with custom code so thats so handy to know. Thank you! 

I see 2 arrows from mobile menu

You can add this CSS to remove right arrow

/* mobile menu 2 arrows */
.header-menu-nav-item-content span.chevron.chevron--right {
    visibility: hidden;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.