how you doing graduates so today i'm,going to show you how to add a parallax,section on your store and this now the,now these snippets that we're going to,be releasing in the future and today,they're all compatible with every theme,now of course every once in a while you,may run into an issue but as always just,leave a comment in the comment section,below and we'll respond with support and,help and you know get you back up and,running now,this i'm going to be using dawn theme as,it's the new shopify 2.0 ready theme and,we all love dawn it has a lot of great,features but it's lacking a lot of those,premium,uh you know theme section features right,so you know here's dawn it looks pretty,bland kind of boring now in this video,series you're gonna be able to add all,these different sections and we got,parallax custom html and so much more,but today we're focusing on parallax and,i'm going to show you step by step how,to add this particular section to your,your theme and again i'm using dawn,theme but this does apply to all themes,so,anyways let's get right to it shall we,so,what you're going to have you're going,to have,all types of you know options so as you,can see the parallax feature you'll have,an option to use an image you also have,an option to use a video,you can set the minimum height you can,crop the image you know depending on,which way you want to crop it you can,set now for videos you can actually set,the start time and the end time you can,loop it you can play it when it's only,visible so that way you know here at,ecom graduates we focus on speed we want,you to you know have a very optimized,store and you don't want things loading,unless they're visible there's no point,in loading something if it's not visible,so that's exactly what it is and then we,also lazy load the video to to improve,even more performance,you can set the uh the max with um set a,title different different uh title sizes,descriptions description sizes your,button text where it goes to,the color and different overlay,opacities you can blur it and you know i,just want to show you these settings now,i'm going to get to the tutorial now,when you go to the download and it's,free yes it's free for now for now it's,free uh you will have your folder,parallax with media you'll have a,another folder called sections now if,you use theme kit they should look,familiar to you i do have a tutorial on,how to use theme kit so just click here,somewhere you'll see a video on how to,use themekit,so right here so you have a section file,and then you have this one simple uh,file now what you want to do is you want,to get some sort of code editor a text,editor does work but if you really are,going to be getting into the development,i highly advise you use vs code or you,know sublime or some sort of text code,editor for this tutorial because a lot,of people have notepad on windows and,i'm sure they have a notepad on mac,i'm going to use notepad,so you just want to open up notepad,right here drag this file right into,here and boom you've got your file ready,now what you want to do is you want to,go to the theme that you want to,actually edit so what we're going to do,is we're going to go and when you log in,usually you're you're on the home page,click on online store like so and we,have this dawn tutorials uh theme so now,i'm gonna go and close out everything to,the left,okay close where is it close other tabs,there we go leave so i'm going to close,out of that and we're going to go in and,we're going to actually go and open this,customize in a new tab then we're going,to edit we're going to edit code right,here so actions edit code,and you're going to laugh at how easy,this is we try to make it as simple as,possible for you and that's what we do,so anyways you're going to go right down,to sections you're going to click on add,new section,i'm going to call it,eg,p para,wax i can't spell if my life depends on,it you know and you can actually just,call it you know you what you could do,too is you're gonna rename this,copy that,paste it in and then click the green,create section button now that you have,your your you already have your code,ready you're just going to go here and,you can actually highlight everything or,you can do control a or command a if you,want,then command control c or command c,and then control v,now for people who are old school you,can just go and hit paste,right click paste and then all you got,to do is uh hit save now i'm going to,show you you know we don't have a,parallax section right we have the,default,we have all the default sections here,that,dawn comes with,no parallax so now we're going to go,back we're going to click save,and now what we'll do is we'll refresh,the customizer,and we're going to scroll all the way,down add section and you see eg parallax,image how awesome is that it's cool,right right i know i know,so now let's go get a let's go grab a,youtube video,and what we'll do is we'll just copy,this link right here,boom,it'll start loading you just have to hit,save of course,and look at that it just starts playing,you got the cool parallax effects i mean,what more could you want in a section,now the reason why i like parallax,effects is because it draws attention,you know use it as a way to draw,attention to people who are on the page,because they because you know humans we,notice movement you know we're very,we're very observant and when you see,something moving kind of with the page,you know you can try different effects,and try and see if you get more people,to you know click on a button or,whatever you know there's different uses,for parallax do some research um you,know go on google best ways to use a,parallax you know effect on this website,now you can add yourself an overlay you,can add like a purple overlay you can,adjust the opacity,you know it changes the opacity of the,actual content,you know so so less you know decrease to,enhance the text legibility so we have,labels everything everything labeled out,for you can even blur it,now so if you want to blur that you can,do that there's all kinds of cool things,you can do with this and anyways guys i,don't want to keep you too long i hope,this helped you out i hope this you know,we're going to be you know creating a,video every friday well that might that,day might change but we're going to be,releasing a video every single week,teaching you how to add new features to,your theme and these sections and these,snippets are all going to be compatible,with,most themes like you know there are some,very strange themes out there that do,not work well um you know so we're gonna,be doing that,and uh i do apologize anybody who uh,might have left comments in other videos,we haven't gotten back to you yet we're,trying to get back to everybody you know,we have some tutorials that are outdated,that we have to re-update because you,know with shopify 2.0 a lot of things,have changed so we're going to be,releasing more videos we do have a,facebook group so please make sure you,join the facebook group and if you want,to subscribe to us i do appreciate that,you know it it motivates us to make even,more videos so that way you can add,awesome new features to your store that,help bring in sales because that's the,end that's that's the goal right make,more money you know live that lifestyle,you want to live and everyone just make,people happy that's that's the goal,that's the goal in life,so i hope you enjoyed the video guys,thank you so much for watching
Congratulation! You bave finally finished reading how to add scroll homepage in parallax shopify theme and believe you bave enougb understending how to add scroll homepage in parallax shopify theme
Come on and read the rest of the article!