how to build a landing page on shopify

all right what's up guys this is jake,and in this video i'm going to be,showing you how you can go ahead and,create your own landing page,within your shopify store so first off,if you don't already have a shopify,store set up,you can go ahead and start your free,trial by clicking the first link in the,description down below,and once you go ahead and have a shopify,store set up,what we're going to go ahead and do is,we're going to use a app to go ahead and,create landing pages so creating a,landing page is something that you can,do to help increase the conversion rate,and the customer experience on your,store instead of just using like a basic,theme template or whatever you can,create a custom landing page that can,help to increase the overall user,experience,so in order to do this we're going to,use a app called zeno page builder right,here so once you're logged into your,store back end you're going to come down,here to apps and then you're going to go,to customize your store to open up the,app store,and if you just search through the apps,and just type in zeno page builder right,here,we're going to see that it's going to,show up right here so xeno landing page,builder by synonym right here,so you just go ahead and click on this,and then we're going to go ahead and,install this to our store and in this,case i already have it installed in the,store right here so once you go ahead,and install it in the store it's going,to show up here in your installed apps,so all you have to do is go ahead and,click and open it up and you'll be,brought into the app right here so this,is the app we're going to be using to,create landing pages and it's very,simple and easy to use and in this video,we're going to build a landing page um,step by step so that way you understand,exactly how to do it so inside of,the zeno builder there is two different,ways that you can go ahead and create a,landing page we can see here by default,we start off by default with landing,pages selected we can also create other,things like blog posts product pages,collection pages and a cart page or 404,page but this video is going to be,primarily focused on creating a landing,page so if we come up here and click new,page,we can see that we can choose to start,with a blank page or we can choose a,different template right here,so,when it comes to creating a landing page,what i would recommend doing is you're,typically going to want to have some,idea of what you want your page to look,like going into it,so you can go ahead and look up other,people's landing pages within your niche,or even people outside of your niche you,can just find a landing page that you,like and then you can try and take,inspiration from that when making your,own that's normally going to be the best,thing to do so think of some of the,biggest brands that you know,and then try and take some ideas and,inspiration from their landing pages and,use it for your own and that's what,we're going to be doing in this video,but first i'm going to show you how you,can use some of these pre-made templates,but we're going to actually be building,out one from scratch here in just a,second but if you want to use a pre-made,template you can scroll over these and,you can just click on preview and you,can see what the template will look like,here on desktop on tablet and on mobile,so you can scroll down,and you can see,what this template will look like and,you can go back and say we can pick a,different template here,and just click preview and if you want,to use one of these automated templates,all you'd have to do is click on choose,template,and then put in a page name here so,we'll just put template page,and we can see that the page name here,is going to auto create us a path,within our store which means that if we,go to our storeurl.com,template page we will be taken to this,page right here and we can see that we,can either enable the header and footer,from our store or disable it by toggling,this button right here and if we click,on create page we're going to go ahead,and see this auto populate here right,here so if we use the template we can,see that what we can do,is all of these elements and everything,are going to be in place and we could go,in and just edit them by clicking on,them so you could come in here,and,edit this text if you wanted to,so if you want to use a template you can,go ahead and do that but i think for the,sake of this video it's going to be more,useful if i go ahead and build a page,from scratch so we're going to go ahead,and close this page out,and what i'm going to go ahead and do is,create another page and we're going to,create a blank page this time so i'm,going to go ahead and,and,create this page here so i'm going to go,ahead and exclude the theme header and,footer and we're going to just start,from a completely blank page and i'm,going to click on create and this is,going to go ahead and load up,so like i said earlier normally when,you're creating a landing page you want,to have an idea of what you want the,page to look like going into it so if,you just come into this from scratch,and you have no plan on what you want to,build,you're going to be here for hours and,you're going to be all over the place,but if you already have an idea of what,you're trying to build out,then,you can go ahead and build it out really,fast so what i'm going to go ahead and,do,is i'm going to kind of take inspiration,from two different sites so the first,one here is going to be blue apron,so this is their landing page right here,so i'm going to take some elements from,this and i'm going to take some elements,from this landing page here,on infinite moon site,and i'm going to take some of these,elements from each of these pages and,i'm going to go ahead and build them,into,my own landing page right here so the,first thing that i'm going to do before,we actually start building up this page,is i'm going to get you familiar with,the editor really quickly so we can see,here on the left there's a bunch of,different things that we can add,to our,page right here and it's all drag and,drop so first off we have layout,so these are going to be the core parts,of our page so we can add in a row we,can add in a tab a slider an accordion a,banner or a video banner,so let's say we wanted to add a video we,could put this in here,and we can see that there is a video in,the background here and we could edit,the video link,by putting a video right here,we could do the same by putting in,different content here like a slider,and then within the slider we can go,ahead and edit everything within there,and then down here we have content now,this is the type of stuff that you put,inside of your layout so your layout is,like the core foundation of the block on,the page and then the content is what,goes inside of it so as a quick,demonstration let's say i drag in a row,right here and i make it a block of four,rows right here and if i were to back,out,and come in here we could see i could,put text right here,i could put an image,in this element box,i could put a video in this element box,and i could go ahead and,put let's say custom code in this,element box right here so that's how you,can go ahead and add in content inside,of these different layouts right here,and then down here we have the booster,section which is similar to the content,section these are just things that you,can add in,to your overall layouts as well and same,with social and products,so now that we kind of know the gist of,how everything works we have layouts as,a foundation and then we have content,and boosters that we put inside of these,different layouts i'm going to go ahead,and delete this and we're going to start,actually building the page for real so,what you want to go ahead and do is take,a look at the pages,that you're taking inspiration from and,try and figure out what,uh their sections look like and we're,gonna go ahead and duplicate it so,the first thing we're gonna do here is,we're gonna create a header with our,little menu right here,so in order to do that i'm gonna go,ahead and just create a quick row and,i'm gonna make it,a row of just,one right here,i'm gonna make it full width so this,means,that it's going to be the full width of,the screen,and what i'm going to go ahead and do is,come down here,and i'm going to drag an image element,into the center,i'm going to choose an image really,quickly i'm going to go ahead and upload,this right here,and then we can see right now this is,way too big,so what i'm going to go ahead and do is,change the width,and make it significantly smaller,so we'll make it,10.,so you can see now this looks like very,similar to this where it's just a small,little image here and if we wanted it on,the left just like it was here we could,do that just by aligning it left,aligning it right or aligning it center,and if we wanted to align it left and,let's say we wanted to go ahead and have,it spaced over a little bit right here,we could add some margin here on the,left so if i went 50 we can see this,spaces it over right here if i go to 150,we can see it scoots it over even more,so if we were trying to duplicate this,we can see that 150 margin on the left,would be about the same about the same,but in this case i'm going to leave it,at zero because i'm going to just go,ahead and center the logo right there so,i'm going to go ahead and go back and,now what i'm going to go ahead and do is,i'm going to go ahead and add,a banner similar to this,so what i'm going to go ahead and do is,i'm going to drag banner here,under this row,so now we see we have a banner,right here and i'm going to go ahead and,click choose image for this banner i'm,going to go ahead and upload an image,right now,so i'm going to upload this is a nice,wallpaper image right here and we can,see that on here their picture is a,little bit bigger so let's say we want,to make ours bigger as well i'm going to,go ahead and just drag this up and down,so that way we can see here,that our picture is going to be a lot,bigger very similar to the one here on,blue apron,so i'm going to go ahead and let's see,this is 340 so i'm going to just make,both of these even and then what i'm,going to go ahead and do now is i'm,going to back out and i'm going to drag,some elements in here now so the first,thing i'm going to do is we can see they,have text and a button so i'm going to,do the same thing by dragging text right,here,and i'm going to go ahead and center,this text,and then what i'm going to do,is go back and i'm going to add a button,next and i'm going to drag the button,right below the text,and then we can see right here there's a,bit of spacing between this heading and,this button so if i come to the button,right here we can see right here if i,come to here and i add some margin to,the top of the button this is going to,add some spacing between,this button and this heading right here,now you can change different things like,the font right here so i can make the,font bold so i'll keep it bold in this,particular case we can change our button,color as well so i'm going to just be,using the same basic color for,this site so obviously you're going to,want to be using your brand's colors,here,so i'm going to go ahead and just use,this color right here and i'm going to,just make the text,just black,or,we'll go with white and i'll make the,button hover just like a darker version,of the screen right here,and then right here we can go ahead and,add a link to where we want this button,to go so now if we want this button to,actually link to a product we can go,ahead and just click choose link and we,can choose the link to one of our,products right here so i'll just go,ahead and link to one of these products,right here,and then if i click on this text right,here i can go ahead and change this to,like shop now,and we can see that just like that we,have this button set up right here,and then if we click on this h3 we can,go ahead and change the font size and,everything right here so if we wanted to,make this bigger we can make this bigger,we can go ahead and make this text like,black,we can go ahead and change the actual,font in here so one thing i would,recommend is just make sure you use the,same font,for the most part throughout the entire,page that way your page actually looks,like um it makes sense if you have like,seven different fonts um not only is it,gonna start looking confusing but it's,actually gonna slow down your loading,speed as well so for the sake of this,video,i'm gonna keep the text and everything,here simple so i'm going to just say,like buy t here,i'm not going to really be writing out a,lot of copy for this video because i,don't want it to be too long but we you,put your h1 in right here and you can,see it just like that we went ahead and,created this section,for our page right here so now we're,going to go ahead and go to our next,section here so what i'm going to do now,is i'm going to go ahead and create this,section right here so we can see that if,we think about this,what you have to do is when you're,looking at these landing pages you have,to think about what they are in its,simplest form so what is this this is an,image and then this is a header and then,this is text,and this is a header this is text and,this is an image and then we have an,image a header and text,so what this would be be inside of a,page builder is we have three rows,with,two sections,in each one so if we were to come over,here and do that all we'd have to do is,come over here drag in,one row,two rows,three rows,and then we just have to start,populating these rows here so the first,thing you'll notice is that these rows,are actually not full width unlike how,this is full width this was full width,these aren't full width so what we want,to first do is click on the row here and,we want to change the width to let's say,let's see what 80 looks like,we'll do a little bit closer so we'll do,70.,so then we'll click on this row we'll,make this width 70 we'll click on this,row and make its width 70.,and we can see right here that now it's,going to mirror this layout a bit more,so now if we start populating it with,content here we can put an image right,here,we can put an image right here,and then we can put an image right here,and then we can continue following this,layout by putting a heading right here,heading here,and the head in there and then finally,we just need to put in the text box the,text box below there,the text box below here,and the text box below here,and now you can see if i click on this,image and we choose the image once again,i'm going to just use this image really,quickly i'm going to use the same image,for all of them for the sake of the,example here,and if we go ahead and choose these,three images,we can see right here that we have,already created,this section of this landing page right,here in this page builder very quickly,and if we wanted to come back in and,edit this width again if we wanted to,make it skinnier we could so we could,make it 60 so let's say we like 60 more,so we come back and make it 60 on all of,them,and we can see that just like that we,have went ahead and copied this section,of the landing page over to our store,right here,so now what we're going to go ahead and,do is we're going to create,a section similar to this right here so,it's just going to be a row with like,four different icons on it,so what i'm going to go ahead and do now,is i'm going to add another row,so this time we're going to add a row,again,but what we're going to do now is we're,going to change the layout here to,four different elements,and one thing that,and one thing to keep in mind is that at,any point when you're editing this you,can change the edit mode from desktop to,tablet to mobile so you can see what it,would look like on mobile right here,you can see what it looked like on,tablet,and it would look like on desktop so you,want to make sure when you're editing,everything,that you go ahead and actually pay,attention to what it looks like on,mobile because a lot of your visitors,are going to be on mobile,so now with this row right here what,we're going to go ahead and do first is,i'm going to,make it four elements like we have right,here,but now we need a solid background,so what we're going to do is i'm going,to click on advanced and i'm going to,come down here to background and i'm,going to make the background color and,i'm going to make the background color,the same color that we've been using,right here the same green,so now we have that in right there and,then now we just need to go ahead and,drag our elements in here,which would be four images,and,four,text boxes,right there,so we could come down here and we could,actually use the icon if we wanted to,so we could go ahead and choose from a,bunch of icons that they have here by,default so if you have your own icons,you can link to them or you can upload,them as an image in this case i'm just,going to use these,icons that they have provided in here,and what i'm going to do is i'm going to,just quickly change the text,to white i'm going to get rid of the,description because i'm going to make,this separate and i'm going to go ahead,and increase the size of this icon,to around 100 because that looks pretty,similar to that so now what i'm gonna go,ahead and do is i'm gonna go back,and what i'm gonna do is i'm going to do,that four more times i went ahead and,added four icons so now what i want to,go ahead and do is kind of center them a,little bit more because they are a bit,wide right here as we can see,so if i click on the row right here to,edit that i'm going to change the width,down to around 90. actually we'll come,down here to about 80 and we can see,that looks a little bit better and now,what i'm going to go ahead and do is,just add a text box,below,each one of these icons we're going to,make the text white,and i'm going to get rid of most of this,text,and what i'll do is i'll just keep this,and what i'm going to do is i'm going to,add a text box to each one and just like,that we have our four different icons,with our description text right here,so we've essentially copied this section,onto our landing page once again so now,we're gonna go ahead and create another,section so we can see that they have,their products here next so i'm going to,go ahead and create a products section,next so i'm going to go ahead and create,a another row here and what i'm going to,do i'm going to make it a layout of two,and what i'm going to do is i'm going to,go back and i'm going to come down here,to product i'm gonna go ahead and drag a,product in right here,and we can choose our product right here,so in this case i'll choose the black t,and then i'm gonna go ahead and drag,another product in right here i'm gonna,choose product and i'm going to make,this one the green tea right here,and then what i'm going to go ahead and,do is i'm going to click on this price,just so that way i can center it i'm,going to click on this add to cart,button,and i'm going to go ahead and center,that as well,and then i'm going to do the same for,over here,and now what you want to do is you want,to make sure that you keep everything,congruent on your pages here so if these,buttons,so these buttons by default come laid,out like this so what we want to go,ahead and do is we would want to change,the color of these buttons to match this,button up here so that way all of our,buttons,look the same because that makes it look,more congruent so we would change the,button color,to the green once again,we would make,the text white,make this darker once again,and then we would do the same thing for,this button over here and just like that,now our buttons are more congruent now,let's say we wanted to go ahead and edit,this a bit more so i want to go ahead,and center,these titles really quickly,and then we can see over here they have,a products header right here so let's,say we want to go ahead and do the same,thing,so i'm going to go ahead and do is i'm,going to come back and i'm going to,scroll up here to heading,and i'm going to put in a heading,so what i'm going to do is i'm going to,go ahead and put in another row in,between here,in between these two i'm going to make,it a long one,i'm going to make it just one row right,here i'm going to come over drag heading,in,i'm going to center it,and i'm just going to go ahead and type,in,our products,so we can see now we've went ahead and,kind of duplicated this out right here,let's say i want to add a bit more,margin so we can go ahead and add some,space in between there so that way it,looks more like a heading that belongs,to these products right here,and we can see that just like that,that's how easy it is to go ahead and,recreate,other landing pages inside of your own,store using zeno so the last section,we're going to create here now,is something similar to this so just a,quick little reviews section right here,so we can see that once again we would,come down here we'd create another row,at the bottom let me make it a row of,three,we would have to go ahead and make,the background the same color that we've,been using,and then for review right here we're,just going to have a couple different,text boxes,so we can come over here,and i'm going to just have,a heading,for,person name,and we can center it,and then down here i'd have text,and this would be the review and then we,would go ahead and duplicate this three,times so heading,text,heading,text,make sure that we,center these,and then this whole row i want to lower,the width a little bit,i think that looks a bit better and then,what i'm going to go ahead and do now,is add a heading on top of this row,really quick,and,we would call it,reviews,center it,will make the background of this,the same color,and then we'll add a bit of padding to,the top this time,and we can see that now we are good to,go now in this case i would actually,want to make all of this text white,since that's essentially what we've been,using throughout the rest of this of the,page so like i said you want to go ahead,and keep everything congruent,so obviously when you're building out,your own landing page you're not going,to be using dummy text but we're just,using dummy text for the sake of this,video to keep this a lot easier and,quicker,so that's how quickly you can go ahead,and create a landing page,inside of shopify using the zeno page,builder and like i said if you're,creating a landing page based off of,other landing pages that you're looking,at while you're building it it's not,really going to take a very long time,it's going to be quick and easy to go,ahead and create,so after you've went ahead and done all,of this you could go ahead and click on,save,and then if we wanted to preview this we,can go ahead and click preview really,quickly and that's going to go ahead and,load up we can see that we're previewing,this landing page right now it's a,pretty basic landing page right now,currently it could definitely still use,some improvement however i just wanted,to show you how you can go ahead and use,the functionality of the page builder to,go ahead and duplicate some other,landing pages now obviously in this,particular case i think we'd want to go,ahead and shrink the width on this a bit,more as well as on these because a lot,of this is just a little bit too wide,and you want to clean up some of the,margin and spacing to make it look a bit,a little bit cleaner so you'd want to,add a little bit of spacing in between,here as well,but i'm not going to be super nitpicky,in this video or else we might be here,for a couple of hours,so i just wanted to show the gist of the,functionality of how you can go ahead,and use,all of the different editors within here,to create a fully functional landing,page within shopify,so now i'm quickly going to come over,here to the settings just to really,quickly show you that there are other,settings within xenopage builder you can,use,so we have page settings right here so,we can change the,different settings like the seo settings,of the page,we have the page styles right here,that you can edit,there's a currency converter that you,can use so if you want to go ahead and,enable a currency converter if you're,going to be selling to different,countries with different currencies you,can just click this to turn that on,you can go ahead and add a live facebook,messenger chat to the page if you want,to go ahead and do that you can put in,your page id right here,you can add an announcement bar to the,top of the page if you want we can see,that that shows up right here so similar,to within regular shopify right there,and you can add lazy loading if you want,so what this does is this means that,images below the folds the ones you,don't see will load later on which makes,the page loading speed quicker so,they'll only load when people actually,scroll down to see it instead of loading,up the entire page,as soon as you land on it so normally,enabling this is a good idea,and then we have breakpoints right here,so you can change these you're probably,not going to want to mess with this too,much and then you have custom css so if,you want to add custom css to this page,you can do that right here so at this,point once we've went ahead and edited,everything i'm going to go ahead and,click save and if i come up here to,publish,this is going to push the page live,so i'm going to go ahead and go back to,home now and we can see that this page,is published so i'm going to go ahead,and click on these three dots real quick,and we can see that we can set,our page here as our home page so if we,wanted to use this landing page as our,home page we could do that by clicking,these three dots and clicking set as,home page so for example i'm going to,open up the home page right now,and we can see that this is the home,page currently,and if i were to come over here and,click set as home page and click confirm,this page is set as home page so if i,come over here and refresh,we can see now the landing page we just,made is our home page so that's how you,can create a landing page within shopify,using xenopage builder if you did find,this video helpful be sure to leave it a,thumbs up and subscribe to this channel,for more videos and that being said i,will see you guys in the next one thank,you for watching

Congratulation! You bave finally finished reading how to build a landing page on shopify and believe you bave enougb understending how to build a landing page on shopify

Come on and read the rest of the article!