how to add infinite scrolling on shopify homepage

welcome back graduates so today i'm,going to be teaching you how to add,infinite scrolling to your collections,on the dawn theme,this is actually a very useful feature,it helps with a lot of things um,usability so it improves your customers,experience on your store allowing them,not to have to really click too many,buttons people are lazy you got to,realize that people are lazy they want,things done for them,and that's what we do we build these,tools to make your site a lot more,usable,now so not only does it help but you,know custom the customer experience it,also helps with performance you're not,loading in all of these products at the,same time you know a lot of people like,to,make every single product show on the,collection page which is terrible for,low times and i understand why they do,it that way the customer can just scroll,and it's already there but you got to,realize not everybody has fast internet,a lot of people don't have the latest,greatest smartphone you know so so,things don't load as as well on these,older devices so you have to try to have,a middle ground where you have a you,know good load times for all devices you,know that people have you know so right,here you're looking at the default view,of what the dawn theme looks like and on,this version we have a little option,here where you just click load more boom,done you know i mean obviously if it,says no products are found i think,that's because actually i am on the,preview so let me close out of the,preview and show you what this looks,like so right here um you know you can,see that there's a load more button,click on that and it loads more so what,this is doing is it's it's eliminating,you know clutter it's also helping with,load time so you only loaded up four,products when they first came to this,page instead of six you know so you,don't want to load a ton of things at,once and then as they're scrolling down,they'll see oh cool i can load more i,can load more instead of having to click,these little buttons that go next just,clicks and it magically loads the,products so we're going to teach you how,to add this in right now let's close out,of this close this,and um with every tutorial we give you,we're going to have this nice file here,where you open it up it's going to tell,you exactly what to do and you can also,watch this video while you're doing it,when you get this download file you will,see the tutorial video here but,obviously i'm recording this now so i,can't put it there right,and then what you'll do is you also get,a file here so this is the tutorial this,is the readme and these are some files,that we have to add into the theme i'm,going to teach you how to do that right,now so hang tight let's do this so as,always you're going to end up in your,shopify admin you're going to click on,online store,and you want to go to the theme that you,want to edit so this is dawn version 5.,yes this does work on the latest version,and i believe it also works on older,versions as well,if you ever have any issues just contact,us support ecom graduates dot com you,can also go to our website ecom,graduates dot com um or you can just,leave a comment in the video down below,and we'll be happy to help you out,we back up all our work guys i promise,you we will make sure things work for,you,we care about you we love you we do this,for you anyways let's go here let's,preview the theme,and let's go and click edit code as well,we're going to edit the codes we've got,it previewed here let's go to a,collection page,collections,and we're just going to click on the,collections we'll go to our front page,collection there's no infinite scroll,option,and what we're going to do,close out all this and all right the,first step is to add the files to the,theme so we're going to create an asset,file so follow along please i'm going to,copy this,and we're going to go into our assets,right here,and we're going to add a new asset,create a blank file now you could go and,upload it but for this this tutorial i'm,just teaching you how to do it manually,so now we picked j.js we're going to,paste the file name add asset and then,what we got to do is we got to find that,so just go to here search files very,easy click into here boom you got it,all right so now the next step let's go,and open this up and i'm going to open,it with a text editor you can use,notepad you can use,whatever editor text editor you have,there's notepad plus plus which is free,there's also vs code there's sublime,editor there's a million editors out,there just go and google a free text,editor or free code editor you'll,probably get vs code as like the big one,which is what i use but for these,tutorials i use very simple editors just,because i know every now everybody has,it,a lot of people are and some videos ask,how do i open the file so i'm going to,show you how to do this i'm on i'm on a,mac,it is a little bit different on windows,i do find windows to be a lot easier,when it comes to editing,don't hate me mac users i am a mac user,you love my mac um but i also like,windows,um all right so we're going to open this,up and i'm going to use text mate which,is which is another free app there's,also text edit dot app which you know,i'll use that for this this tutorial,because it comes with,the mac so open that up x edit,this is a different tutorial,um so now we've got the pagination file,and we're so we what we did here where,did that go what i did here is i just,highlighted everything,right,just copy,it and paste,and then you just hit save,and i just,did that for an over,all right so we hit save,meant to close out of the file,hit save,and next what you want to do,is you're going to add the eg infinite,pagination.liquid so we're just going to,highlight this file name right here and,we're going to be making these a little,easier we're going to have little,buttons we can just click it instantly,copy we're trying to help you save time,too you know,all right so now we want to close out of,all this,assets,we're going to want to go to i believe,sections right is that what i did no,snippets i'm wrong all right go to,snippets add a new snippet here,paste that in great snippet,now we want to go back to where the file,was,this one right here,and we're going to open this,so,open that,highlight all of this,paste it in save,close up,all right so we just did that we pasted,that,we created the file,so,and now what we're going to do is we got,to go to our sections we got to find,this this this right here and there's a,lot there's a much easier way to do this,in my previous tutorials i'm over here,scrolling around looking for it all you,gotta do is search for it,um i try to show you how to do,everything every step like you know a,long way but i'm also trying to teach,you shortcuts so now we open this file,up and what we got to do is we got to,find render pagination so what i'll do,is i'm just going to search for a part,of the file i'm not going to look for,the whole thing because sometimes it,doesn't work so what i do is i do,command f or control f if you're on,windows,and boom we found it look at that just,like that so now what we got to do,is we're going to go and replace it so,instead of deleting things what we're,going to do is we're going to comment,things out you can comment things out so,they don't load that way if you say you,don't want to use this option you can,always just remove it and remove the,comments and things aren't gone so we're,just going to copy this right here just,like so copy i'm going to go here and,we're just going to go in and,find this,and boom,fix this little,weird,all right and there we go so we have,render infinite page imagination,just like that,and hit save,that's it that's all you got to do now,we're going to refresh this,and just like that you have an option to,load more so all you got to do is you,know it'll load up these four products,here and then there there'll be an,option it'll show you how many products,are in this collection and you can load,more so it loads two now obviously in,this case we don't have a ton of,products on the store so you can't,really see the you know see but like you,get the concept it does work and it will,improve your customer user experience it,also will improve your load times,because you're not loading a million,products all at one time you know every,single image that you see on a page is a,web request and every web,for your store to fully load it has to,finish requesting all of those resources,in a timely manner and this is why a lot,of people get really bad load time,scores from like you know gt metrics,google lighthouse all these various you,know optimization tools that you see um,so you want to cut down on the amount of,requests you can get now if you guys are,you know want a video on you know web,optimization um you know we'd like to do,those tutorials we're just not sure if,you guys are interested in them we're,going to start,you know posting polls in the community,area of our youtube channel i'm asking,you guys like what videos you want to,see next what things you're kind of,curious about because we could teach you,you know conversion rate optimization we,could teach you sp web uh you know page,speed optimization all kinds of,different ways to improve you know your,stores we want you to have the best,store possible um you know and at an,affordable price too that's our goal so,if you guys are interested in that let,me know but that concludes the end of,this tutorial adding the infinite option,infinite scroll option to your store if,you like the video if it's bringing you,value please like that like the video,and you know subscribe please just,please subscribe i'm begging you,pleading with you please subscribe,and then we'll make more videos,thank you

Congratulation! You bave finally finished reading how to add infinite scrolling on shopify homepage and believe you bave enougb understending how to add infinite scrolling on shopify homepage

Come on and read the rest of the article!