Scroll fix get the perfect scroll

English Shopify Shopify Design
, , ,
1

How can i have the perfect scroll like this? I mean like i am using a grind collection list. I want it to like when someone scrolls it should perfectly fit like this.
Inpiration web: https://www.cos.com/en-au/men

I am currently using fabric theme

2

Hi @NotYourBeast ,

Kindly provide your store URL please and if it is password protected, please share the password as well.

Thanks!

4

Hi,

Hope this will help

  • Wrap Your Product Grid in a Scrollable Container
  • Add Scroll Snap CSS

CSS example

.scroll-snap-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh; /* This makes it snap by screen height */
}

.scroll-snap-container .grid > * {
  scroll-snap-align: start;
}
1 Like
5

I didnt understand where do i add the code?

6

@NotYourBeast you’d add it in a custom css setting, either for a specific section, or global
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

Though I’d caution you against just slapping this type of thing into a website it can be a major annoyance that will cost conversion when a customer can look at a product because this code you added keeps pushing it off screen or some other annoyance.

This is how merchants slowly end up with badly designed websites.

Really look at the site your trying to emulate things form and notice how much of a nag site it is:
a cookie nag, a geonag (that reloads the page) , and even a login nag
Surely new customers must appreciate all these things :roll_eyes:

image
image1365Ă—639 65.9 KB

7

To create scroll snapping like COS.com, you’ll want to use CSS scroll-snap. Wrap your collection grid in a container with scroll-snap-type: y mandatory, and then apply scroll-snap-align: start to each product/item. It gives a clean “lock-in-place” scroll for each section. I’ve added a working snippet if you need help!