how to add email form to landing page of shopify

hey hey Layton Taylor here from,e-commerce plus calm and in this video,I'm going to walk you through how to add,a landing page like this to your Shopify,store now this landing page is is useful,for helping traffic convert traffic into,email subscribers and the main method or,way that does that is by offering,something like a newsletter or a free,course or something like that in,exchange for an email address as you can,see here we've got a headline a,sub-headline some bullet points with the,offer details a picture related to the,offer here we have an email signup form,that's nice and big with a bright arrow,pointing to it and then some more,information here to help convert or,convince anybody who Scrolls down,farther by giving them some more,information so I'm going to show you how,to create a landing page like this the,same general layout in your Shopify,store and then I'll show you how to,customize it to match your brand and,your specific offer so you can start by,going to your Shopify dashboard and,actually the first thing you need to do,is there's a link just below this,tutorial that you can click to download,a zip file and the zip file has all the,files there's some code and images that,you'll need to complete this tutorial so,go ahead and download that if you,haven't already and then unzip it so you,have all those files ready to go and,once you've done that go ahead and go to,your Shopify dashboard then go to themes,and we're going to be using the template,editor and if your shop is active and,you have traffic going to it you might,want to duplicate that theme and work on,an unpublished theme just to make sure,you don't mess anything up and it's,always good to have a backup of a theme,as well so you can duplicate your theme,and have a backup but I'll be working on,the live publish theme here so we'll go,to template editor and the first thing,we need to do is create a new page,template so you'll see over here in the,templates folder we have all these,different page templates you'll click,add a new template choose page from the,drop down and you can name it whatever,you want but I'll just call mine landing,page and then click create template and,depending on what theme you're using,this might look a little different I'm,using the minimal theme as I know,pretty popular one go ahead and select,any code that is automatically put in,that template and delete it and next,you're going to go to the the folder the,zip file that you downloaded a minute,ago and open it up and you'll see a file,called landing page code this is just a,simple text file and you can open that,up then just click your cursor in the,file somewhere click command a or,control a or you can just go to edit and,select all once you've selected all then,copy and then you'll paste it here into,this template that we just created okay,and once you've pasted it in there go,ahead and click Save okay the next thing,you need to do is you need to paste in,your MailChimp form action URL so this,assumes that you already have a,MailChimp account and that you've,already created a subscriber list on,there once you've done that go down to,let's see here it's line 289 and you'll,see this line says form action and then,this code here that says insert,MailChimp form URL here if you're not,sure what that is there's a Shopify,documentation page that explains what it,is and where to find it in your,MailChimp account and so if you just do,a Google search for Shopify MailChimp,form action URL it should be the top,result there and that'll explain how to,find that so once you've got that just,select that delete it and paste in your,form action URL code I'm just going to,put a pound sign there for now as a,placeholder for mine okay the next thing,we need to do is upload the images in,the file that you download it as a zip,file from from this tutorial page so to,do that go to the assets folder and,click on it and you'll see some CSS,files probably some j/s files and some,images so this is where we're going to,upload all of the images for this,landing page so click add a new asset,choose file and then in that folder or,file a zip file you downloaded there,should be a folder called upload to,assets open that and you want to upload,all of these images I'm going to just,upload a couple and kind of show you the,process and then I won't bore you with,uploading all of them as,so--but a bit tedious so click on the,first image I'm actually going to,alphabetize them here so that I can keep,track better so we're starting with,arrow and you need to click open and,upload asset and there shows you that,image and then you do it again for the,next one the next one we have is blue,arrow and so on so basically you have to,click one by one add a new asset choose,file and then I'll put all these images,so I'm going to skip ahead in the video,to the point where I've already uploaded,all of those and I'll see you after that,okay so now I've uploaded all those,images and if you if the file names that,you see in your folder don't exactly,match mine that's fine I may have done,some editing after the tutorial and,consolidated which files you're actually,uploading so don't worry about that if,you do see different file names okay so,now that you've uploaded all of those,images we are almost ready so the next,thing we need to do is go to pages over,here in your sidebar click add page and,I'll give it a name of landing page and,you don't need to put anything in the,content just go ahead and click Save and,then scroll down to the bottom after,you've saved and by the template menu,click page landing page as that's the,template that we just created ok once,you've saved the page again go ahead and,click view in your store and it pops up,with our new landing page and as you can,see here this is just a demo Shopify,site there's not really any content on,it it's pretty plain but the most,important thing to focus on is just the,content and layout of the landing page,because every site will be different,depending on what theme you're using and,what other pages and products you've,already got in your site alright so it,looks like everything is working fine,the layout seems to be working all our,images are here no broken image links or,anything like that and also as you can,see this is a responsive meaning that if,you resize your browser it'll show you,what it would look like on a smaller,device like this is probably what it,looked like on an iPad or a tablet and,it gets smaller so this layout here is,probably what it would look like,phone so this layout is responsive and,it should be even if your theme isn't,which most themes are these days so you,can be sure that landing page will look,good on any device okay so since you're,probably not selling knives like I am,you need to be able to customize this,layout to have different text different,pictures probably different colors you,probably don't like this bright,construction Orange we're using so I'll,show you how to change all of that so to,do this we are going to be back in our,template editor so go back to themes,template editor and it might have,already left all these items open I'm,gonna go and close all these images that,I just uploaded alright so the reason I,have these different color arrows is to,make it easier for you to change those,out so let's say that you for example,you wanted to use a blue arrow instead,of this orange to do that you could go,to your assets folder and you see here,that there's a file that we uploaded,called blue - arrow PNG so if we wanted,to use that image we just go back to our,landing page template and we'd scroll,down see what line is that on here okay,it looks like it's on line 287 and we,see here that it's referencing orange,arrow PNG all I need to do is change,that to blue arrow dot PNG and save and,we'll refresh and it's up what its,updated to the blue we also have a green,arrow you can use and there you go so,you can also change the color of this,button right now it's orange so you,wanted to change it to a color that,matches the screen will do that you can,go into your template editor again,and up here on line 162 starting line,162 but actually down on 164 you see,background and you see a hex code here,so what we what we want to do is find,the new hex code that matches that green,color if you're not sure how to get hex,codes you can do a google search and,find different like hex code selectors,but one easy trick you can use to do,that is to open up your theme settings,and most themes will have a color picker,I think all of them do actually so here,where wherever you see a color picker,like this just click on it and then pick,the color that you want so let's say you,wanted that green color or it's not,going to be exact let's get a similar,one so there we've got this hex code so,I'm going to copy then copy and then,paste that here and let's see all right,so yeah it's not the exact same green,but you get the idea you can you can,change out that button color if you did,want to match it exactly you could just,open up this arrow in a photo editing,program like Photoshop do use the,eyedropper tool to grab the color that,you want and then paste it in here you,can also there's a PSD or Photoshop file,of this landing page layout in the,assets folder that you downloaded so you,can always open that up if you use,Photoshop or if you have a designer who,can help you and just change the arrow,color to whatever color you want and,then use the same color for the button,alright I'm actually going to change,that color that arrow back to orange as,that think that green kind of clashes,with the arrow alright okay so what if,you wanted to change this title get free,survival tips and gear reviews well as,an example I'm just going to set up a,landing page as if you run a clothing,store for women and so let's just change,that to get free,fashion tips and brand reviews let's say,just you know whatever delivered,straight to your inbox so if you notice,there that was online 266 of our landing,page code so if you just change that,that line to whatever you want it to say,click Save and then refresh you'll see,that that is updated and then down here,we got these bullet points so let's say,you wanted to change those well you just,scroll down to line 278 in the code and,here you've got those those bullet,points so let's change survival to,fashion change survival knife reviews to,clothing reviews change gear lists - I,don't know hot new items and then a,coupon code for an instant five dollars,off any item in our store alright so we,refresh the page we'll see those bullet,points have been updated and of course,we need to also change out this image,well if we look here on line 284 this,image is called knives JPEG one of the,assets that I had in the folder that we,uploaded earlier was called women,underscore shopping JPEG and this is,just a sample image that I was that I,wanted to show you so if we wanted to,use that image instead of the knives,image we just need to change here on to,84 change knives jpg to women shopping,JPEG and we refresh and there it is okay,these icons here you can also change,those out and those are down on line 302,for the first one line 307 for the,second one in line 312 for the third one,so what you need to do is find the new,find new icon images that you want to,use you can find icons on,istockphoto.com if you just search for,icons in the the niche that you're in,you can also go to a site like find,icons calm and get some free icons and,so you could find icons that fit the,products that you sell,and upload those here so what you want,to do is just make sure that all three,got the same size they don't have to be,any specific size just make sure that,they're all three of the same size and,then upload those to your assets folder,here like you did earlier and then just,changed out these file names here to,match the new file names make sure,you've got the PNG matched up if you,upload PNG files make sure that's the,same or JPEG whatever it does and then,again you can change these the titles,and subtitles of those three widgets,there to be whatever content you want so,that's basically it it's how you change,out all the content on the page I showed,you how you can change the button color,I believe that's about it one other,thing you might find useful is oh yeah,but about the lower section here you,probably want to get some sort of a,background image that you can upload,here and this one is called the one that,you uploaded it's called wilderness JPEG,so probably the easiest thing is just to,get a new background image and then,rename it wilderness JPEG and upload it,and that way it'll automatically switch,it out or you can if you have a,different file name you can just go up,to its line 126 and here you've got,wilderness JPEG so you can change that,that file name so you use a bit a,different background image you can also,change the text on that that section,down here it's line 320 and 321 change,out that text to replace what you've got,right here and that can be a good place,to put something about your store a,little bit about your brand who you are,and that can be a nice a nice way to,communicate with the visitor there,alright so there you've got your landing,page um I think that's about it if you,did run into any problems feel free to,leave a comment below I'm I'm usually,pretty quick to respond if you have any,questions or run into any issues let me,know if there's a color of the arrow,that you really want would like to use,for your store I can create a custom,error like that for you and provide you,with the right color code used for the,button so just leave a comment and let,me know what color you want if possible,have a link to like a swatch or a,picture with that color in it,I can grab from it that can be kind of,kind of hard to guess what picture what,color you want so yeah just leave a,comment and I'll be glad to help out or,if you have any problems with the code,or anything like that so if you're,interested in getting updates from me,from my blog ecommerce pulse you can,head over to e-commerce pulse comm and,sign up there I have a free course on,how to choose a product to sell you can,get that at e-commerce pulse comm slash,course and that's a free five to email,course I'm also happy to answer any,questions over email so you can shoot me,an email at contact at e-commerce pulse,calm and let us see you around so have a,great day and let me know if I can help,you with anything

Congratulation! You bave finally finished reading how to add email form to landing page of shopify and believe you bave enougb understending how to add email form to landing page of shopify

Come on and read the rest of the article!