how to add a link to image gallery on shopify parallax theme

hello my shopify users in this tutorial,i am going to show you how you can apply,parallax effect,to,dawn theme,for those of you who don't know what,parallax effect is it is,this as you scroll,you can see that image,kinda,stays there,and the rest of the page kind of scrolls,over it,so,i have this dawn theme here you can see,this is usually how the default,is so it scrolls with the page,um on this page you'll notice i have,these other animations if you're,interested in all,this other stuff please check out the,links in my description i have a couple,of other videos,so in this video we are going to focus,on how we can apply the parallax effect,to this top banner,one difference,mainly between,this dawn theme and,this debut theme is,that this image here is a background,image while dawn theme this image is an,html image tag,so,it is much easier to apply powerless,effect on this and,on dawn theme it takes a little more,work and that's the reason i did not,apply to,this banner the effect earlier,so let's get into it how we can achieve,this,right click here it doesn't matter which,browser you're using i am using chrome,so in here it will open up this dev,console and,click on this div that says banner media,and when you select that open this,and you will see this bunch of paths,here so shopify,has different sizes created for that,image banner so what you're going to do,is,click on say,750 you see the 750 right click open a,new tab,you can see it opens this up,go back,and then click on say another version,you see these are width so say 2000,and i will open that,it opens up a bigger version of the,image,so i will tell you later where we are,going to use these so what i'm trying to,get here is this path of these images,you could totally,do this differently you could just,copy the paths from here put them in a,notepad file or something so you can use,them later it's up to you,so first thing very important that you,would want to,create a backup of your theme and i have,already created a backup of the theme,right here so you will just go here and,then duplicate and then rename it to,whatever you want i have,already done that this is where i'm,going to be working in so i am going to,go in here,and then you are going to,go in the file image,banner dot liquid which will be in your,sections you will see image,banner.liquid,in here,go down,to,the line that says around here,settings.image is not equal to blank,and,in here what you will do is this part,here where the image is,you will,first,get rid of this,it's all the way from here till this is,the closing tag,and,we will get rid of that and then i'm,going to save it,and then let's go take a look at the,page,and you'll see that it disappeared of,course so,that's what i was,looking for now we go back,and go,into,section,dash image dash banner i have it open,right here but this will be in your,assets,section.image.banner.css,so in here,go all the way down,and down here i am going to,copy paste some codes,this part here,is the part that i got from one of those,paths that we saved earlier so i have,this 2000,width version which was this one bigger,one,so,save,and let's check out,and there you go you can start to see,some effects right now,you can see that the image kind of stays,there as we're scrolling,okay so this is good but there's still,some things we need to do,all right so if i,start to drag this window,oops,from up down here,and we start moving it this image looks,good still the effect is there,as we start to come down we're still,okay,right around here you see how the image,isn't sitting right like the,positioning is getting cut off so of,course this is gonna vary image to image,but i am going to make some changes here,so this looks,better at,smaller resolutions like mobile and,tablets those type of screens,so what i'm going to do is we go back to,our code,and i am going to add some,of the styles here specific to certain,screen sizes so,i'm going to extract out some of this,common area,so this here,can stay like that what i am going to do,is,like this,now,get rid of,this and the position,like this and i will explain,this here,later so,we save,let's go back,so this was expected because,if i,go you can see this smaller screen is,still good and the reason we're not,seeing the image on the,wider screen is because the code we,wrote is,this media,screen right here media query,it is going to apply this only till 749,pixels after that it doesn't have,anything for the image so it's not,showing the image,so next i am going to add another media,query here,and now i'm going to save this,go,back,here,refresh,and,you can see the image is back,alright so now if we go all the way up,and then down,around 750 is where,it started to kind of,yes so you can see,this is still good,so i am dragging the image if you want,to quickly,check the resolutions you have on the,step tool just click this icon,you can have,this moved,down in different positions,like this,and,refresh this,so you have this,mobile view here,and then you can change different,screens here and sizes,so i am going to get out of here,and,that's it this is looking good on all,screen sizes now,few little things about the code,so,here one thing you will see is this,background position is different between,these three sizes,so,when you have the background attachment,as fixed that's what that,background is doing is attached,it throws up the positioning it goes,relative to like the window and you have,to adjust that,so,if your image is not looking good in,this smaller view here,a few things where you can adjust is,you can play around in this dev tool,inspect it brings up this dev tool right,here i have it stacked to the right side,so you're gonna click on this div for,the,banner media,and,in here you see this background position,you see you can check uncheck,and then on desktop this is center,center which works fine,here you can play around with these,values so you will see if i,just select this and on your keyboard do,up arrow,down arrow you can see them is changing,so play around here to see what works,out for your image same with that one if,i do that that is in pixels,so this way you can,adjust what works better for you and,then update that value in this code here,also the path here you see there's a,little difference at the end,i am using a smaller width for,the smaller screen size so this is the,reason why i saved those urls in the,beginning for different images so,you can also try different image sizes,here to see which works out for you,so that's it you have a parallax effect,on your dawn theme now,on all screen sizes,and,if you like this video please give me a,thumbs up,and subscribe to the channel i will see,you in the next video thank you

Congratulation! You bave finally finished reading how to add a link to image gallery on shopify parallax theme and believe you bave enougb understending how to add a link to image gallery on shopify parallax theme

Come on and read the rest of the article!