how to integrate new landing page to theme shopify

hello everyone and welcome back to,another pentitude video,i am so excited it's been quite a long,time and this video is going to be a,little different because i'm actually,going to be showing you,how to add landing pages,to your shopify debut theme website,as some of you may know i've decided to,take the plunge,into shopify it's got a great e-commerce,platform,love the services so far but one of the,things,that was kind of left wanting was,the shortfalls when using the debut,theme when it comes to,using sections in your landing pages,so for example when you first go on,and go to customize your website,you're welcomed with this beautiful home,page it has a bunch of,different sections about 17 section,options,that you can add and,in addition to that you know you can,click into it,it's very easy you select your image you,add your content,adjust the size you can drag and drop,the sections to wherever you would like,them delete them,add more whatever you like so you start,out,really happy and it's super easy very,simple,it's great then you go,to add a,page so for example i've got a,shipping policy page and,you know all you're really left with,when you add your page is the title and,the content and it's like,going back in time to those early 2000s,when people had wiki blogs,and you would do a little bit of html,and feel,super proud of yourself but the world is,not like that today especially,when you are a small business and you,are trying to visually attract,all of your customers and keep them on,your site for as long as possible,so having this very simple layout,uh it doesn't really work and you'll go,on to uh the customized page,after you've added your,your specific landing page and you'll,notice on the left hand side,all of those customizable features and,ability to add sections,drag and drop them is not there,so you're left wondering what what do i,do,how do i organize my page and make it,look,nice for both mobile users and computer,users because that's something,really important that we need to,consider nowadays is that most,shoppers are actually on their phone so,does it look nice on a phone and a,computer uh,not usually if you're just using the,standard,wiki content information,so today i'm going to be showing you,how i was able to go from,something like this which is relatively,simple,um to something like my calligraphy,services page,and you'll notice on the left hand side,i've been able to add,the same sections that were available on,the home page,and edit the information to look,something like this it looks very nice,very well laid out,it'll automatically adapt to mobile and,computer views because,i'm using the pre-existing section code,and overall it took a little time,to dig around and figure out exactly,what i was doing,but now that i know what the process is,and,what i'm doing it's it's fairly simple,there's not too much code involved,there's a lot of copying and pasting,and that's about it so i'm gonna walk,you through how to create your very own,test landing page we'll just go ahead,and create a sample landing page for you,guys today,walk you through the process and,hopefully you guys come out of it being,able to create,a similar landing page just with your,own content,that looks really nice friendly for,mobile users and computer users and,ultimately just gives your customers,a much better overall visual experience,on your,website so that they're not having to,look at just,plain black and white text and weirdly,formatted,pictures that don't quite align the way,you would like them to,so without further ado we're gonna go,ahead and jump,into part one creating a landing page so,hopefully you guys have gotten this far,it doesn't take too much um effort,but we're just gonna go into pages and i,want you to click add page,and i've already added a test page add,page you'll add a title,i've named mine test for the sake of,today's video so that you can follow,along with what i'm doing from the,get-go,and i want to draw your attention to um,this template,section right down here this will be,used,in the future i just want you guys to,remember,that template is a thing and remember,that it is found,on the bottom right hand side of your,page,view awesome so we have added our,test page and the next thing you want to,do,is go into navigation and add the page,to your menu because if it's not on your,menu,your website doesn't really know that it,exists,and your customers won't be able to find,it very easily so,what i've done is i've just added my,test page to my main menu,which uh you know right now we'll just,go on to,my website for example and you'll see,test page so it's literally that easy,fairly simple,right so you've added your menu item,you'll name the title and you'll link,the page test or whatever landing page,you want to add and it's fairly simple,right so we've already done parts one,and part two,and no issues no coding nothing too,intimidating,and part three is where we start to get,into a bit of fun,so we're gonna head on back to our,online store section of our,shopify admin page and next,we're going to go into actions,and click this edit code section now i,know,you're clicking it you're getting really,intimidated your heart's beating really,fast,because you're looking at all of this,text,and going what the heck is this i don't,understand any of it just x all of it,out just,x all of it out don't worry about it um,just don't feel intimidated,we don't need to know everything about,code we just need to know,how to add sections to landing pages,today,and you'll walk out of here feeling a,lot better that you don't,need to know code to make this happen,so we've x everything out i've minimized,all these folders on the left hand side,the only two folders we're going to be,focusing on today,are templates and sections so we're on,part three,and it's going to be create a page,template so go ahead,and click that template file,now i'm on my website page so you'll,notice that i have,a bunch of additional,page templates that do not show up,on yours what it will look like for you,guys,just so you have a clear visual go ahead,and,click back here,and i'm just going to go into this copy,of debut this is just a very fresh start,i haven't done anything to it i'm going,to click edit code,you guys don't have to do this i just,want to show you guys,what you guys will be seeing so this,is what you guys will be seeing as far,as it's very simple there's only,a handful of templates there's no blue,dots or anything,don't be intimidated it's really easy,and what we're going to do,is click on the page dot liquid template,this is just to show you guys how,the templates and the pages associate,with one another,so you click on the page dot liquid it's,gonna pop up you'll see,that there's a little bit of code here,and,i'll go ahead and highlight you've got,your page title here,and page content and if we go back,to our page,so for example we're on my pentitude,shipping page,we'll see we've got a title and we've,got content,and on the right hand side here remember,i said to remember this section,we'll see that there is a template,and right now it's linking to the,page template so it's going to pull in,the title and the content and that's it,because that is as simple as it gets,that's what's happening that this is,what,the code is doing on your website,what we're going to do is add a new,template,click page and we're going to name,this page whatever the title,of your page is going to be so for,example,i have my calligraphy services page and,i,called it uh calligraphy services now we,have a test page,so i'm just going to write test,landing page all right,so two tips here,first tip when writing your title for,your template,no uppercase letters and if you're going,to add a space,just use the dash symbol just keep it,simple,use dashes no uppercase letters and go,ahead and click,create template and we'll see that we,have the,page test landing page and what it's,done is it's already copied in,all of the pre-existing page code,because it's gonna pull in that title,and content,automatically the next thing we're going,to do,don't even have to click save it just,automatically saves so the next thing,we're going to do is we're going to,tie this new template,to our test landing page so we're going,to go back to pages,go to our test landing page,and see here where it says template and,page we're gonna click the drop down box,i have a bunch of different templates,already created for my other,landing pages um for your guys sake,you'll have just created,a test landing page you'll click,test landing page or whatever your,landing page is called that is the one,you want it to tie to,and you'll want to match your template,page,to your title just so that it's clear,and you can understand and you don't get,lost and confused all right so,not adding anything to content we're,just changing the template,from page to page test landing page,all right click save cool,and that is the end to part three so we,have our template,and now we get to do the exciting part,which is planning out,our landing page layouts this could be,part four planning out,the landing page with the sections,that you want to add this in my opinion,is going to be the most important step,because the more organized and the,clearer picture you have,for the sections you want on your,landing page,the easier it is gonna it's gonna be to,add that section code,in the future without having to go back,re-edit,change your mind and things so you'll,you'll be able to edit things,in the future but if you can have a,solid idea,of what you want your landing page to,look like section by section,before you even start messing with the,code it's just going to be a lot easier,so for example um i have a blog,that lays out this process that,accompanies this video,if you go to part 4 i have an example,layout,and it's just gonna have the different,sections,list by list of uh what i want it to,look like,so for a visual i'm just gonna go back,to customize home page,and we're just gonna add okay get rid of,all of this stuff,and we're just going to pretend for a,quick second,that our home page is our landing page,all right,cool so this is our home page and we're,gonna add a section,what section did i have so for part four,we've got,image with text overlay so we're gonna,add,image with text overlay,add image with text,all right image with text,cool text with columns oh,that's not fun,there we go text with columns,and image with text overlay again you,can tell i really like image was text,overlay for my,opening and closing um,let's see add,oops got lots of columns in there,one second,just gonna remove all of the grids that,i just meant,did not mean to make all right last,section,image with text overlay and you have,about again you have about 17 different,sections,available to you that do a bunch of,different stuff so,really you're not going to be too,limited um on what you want to do and,how you want it to look,okay so a way that you can,test out your,layouts without editing your live theme,is by creating a copy of your debut,theme,so you'll go to theme library debut,actions and click duplicate,and that will create a copy and,once you have that copy you can click,customize and that's what pops up this,kind of,fake environment that you can play,around with,without affecting your live site so,for planning purposes if you want to use,this feel free to,again make a copy of debut,and you'll click customize and it'll,take you to the home page where you can,add and edit,the pages however you'd like,so for the sake of part four and just,following along with the example i've,made,we've gone ahead we've added the,image with text overlay image with text,and so,when you go through it,you'll be able to see visually what it,looks like,and if you don't like it just being,black and white,and very plain you can go in and you can,add,you know the images of exactly,what you'd like it to look like and the,text of what you'd like it,to look like you can get as specific as,you want um,but since this is planning purposes,and you can change it later just,you know have a simple layout and,that'll work out really really well,cool so we've planned out our layout for,our test landing page,um we see what it looks like here,visually it looks pretty good does,exactly what i'd like it to do,and we've got it bullet by bullet listed,out section by section,with the name and what you're going to,want to do,is you can see that after the section,title i've added a short,subtitle and this is going to be,important because,um each section is going to be unique,and having a very specific subtitle,will make it easier for you to identify,it,as you create the code for all,of all of your landing pages,awesome so now we're moving on to part,five adding sections to,landing page we're one step closer to,making a beautiful landing page,and this is where honest to god i got so,confused because,what shopify has decided to do,is on your customized section page,so we'll go back on our home page right,you've got this,customization where you've got all these,sections,and there's 17 sections and each of them,has their own unique name,so gallery image with text image was,text overlay,and you go into the code,where see notice how it says section and,sections,and some of them match so for example,custom,content in the code section,under sections folder it says custom,content,but let's say for example we go,into edit code,right and again we're just going to,minimize,x everything out don't worry about it,go into sections so let's say,that i want to add an image,with text overlay so,that's this top section right here,right we've got image with text overlay,you can see on the back it has this,image and it says,image with text overlay we want that,that's the section that we want to add,there is a section of code,and there's a specific file that has the,code,for that particular image with text,overlay section and in the sections,files you're looking through,and you don't see anything named image,was text overlay,for whatever reason i'm not exactly sure,the names for the sections in the code,area are different so what i've done,to make your lives easier and just,imagine how long this took me to figure,to figure out uh is i've created a key,for you guys,it's just a nice pdf powerpoint,and it goes section by section and it'll,tell you the name,of the section based off of the,customization home page,and the name of the section based off of,the code name so we'll just go ahead and,scroll down,it's alphabetical go to,image with text overlay and the section,name,in the code is hero.liquid,it makes no sense at all,but here we are figuring it out doing it,one day at a time,so we're gonna go back into edit code,go into our sections i'm gonna click,hero,and oh my god you're looking at it and,you're like what the heck is this,this ladies and gentlemen is the code,that creates this,right nice and easy you don't have to,code anything,all we're gonna do is,add a new section all right,real quick just hopping back over to my,live site so that we can,add the section to our test landing page,okay,so all we're gonna do is we're in our,sections,we're going to click add a new section,and we're going to use the code name for,the section,so the code name for image with text,overlay,is hero and we're just going to do this,so that your brain can associate,which code you need to copy for what,section,all right so go back we're going to call,it hero,dash and what did we have our,one called so we have image with text,overlay,landing page title is the title of this,particular section,all right so we're going to go hero dash,landing,page title,hope i haven't lost you guys yet if it's,confusing please leave,questions down below happy to help you,guys out i know this is confusing,but again we're calling it hero because,the name,for the section,in the edit code area for image with,text overlay,is hero hero dot liquid,all right what we're going to do,is we're going to copy all of this code,just go all the way to the bottom,we're going to copy,go into the section that we just created,go ahead and delete all that stuff that,it just popped up with automatically,and we're gonna paste the code,into our new section,hero hero with the specific subtitle of,landing page title this is where,our landing page title is going to go,all right so click save,because what will happen if you just,you know used this pre-existing section,and you added it to your landing page,anywhere else that you are trying to use,image with text overlay,so for example we're trying to use it,twice,on our test landing page if we're trying,to use it twice and we just copied,and pasted the hero section,onto our landing page it would duplicate,and show the same exact content so let,me show you guys real quick so we'll,have,hero dot liquid right,so next step,we're going to go into our,template for,the test page,all right,and under page content we're just going,to click enter,we're gonna add the code to add the,section,right so just go ahead go ahead and go,to the blog,and just scroll down to section what is,it section five,yeah section five,and we're just gonna copy this,section of code right here go ahead and,copy and we're just gonna paste that,right into our template,okay and instead of insert section name,here we're going to delete that,and we're going to add uh let's just add,hero just so i can show you guys,all right so we're going to add hero,twice because let's say that you want to,have image with section overlay twice,okay we're good click save,what's going to happen we're going to,pop over,to our customize area,so you'll click on test page and you'll,see,that it has two image with text,overlays but,it's going to copy the same exact,content you won't be able,to change and have two different,styles of image with text overlay so,that's why we don't want to do that,that's why we have to,individually create and specifically,name,every individual section that we are,creating for our landing page,i hope that made sense right,so instead of hero,so we're back in our edit content,remember we created that,hero dash test,landing page title right so hero landing,page,title okay what we're going to do,is we're going to just enter that name,so hero,landing page title,okay and the other one,that we wanted to create let's just go,back to section four for our example,all right so let's just real quick let's,just create,these four remaining sections okay,kind of showed you the first overall,process with the first one,but ultimately what you'd want to do is,add all of your sections for the landing,page,first and then we'll add it to the,template okay,so that's what we're going to do we're,going to add image with text,mission statement all right so you'll go,over to the key that i have for you guys,on my blog post,you'll scroll to the slide that has the,section of the content you want,image with text and you'll see that the,code for it is labeled as feature,dash row okay,so we're gonna go to feature dash row,click it open go ahead and click out of,this stuff real quick for you guys so,it's nice and easy,we'll go ahead and click save real quick,all right so we've got feature dash row,again copying the section,that you want to use,create a new section,and use the same code title,so feature dash row is image with text,section,and we're gonna call it,mission statement,right,create section okay so we've got our,feature dash row mission statement,and again we're just going to delete,everything that's in there,paste the feature dash row code into it,click save,okay and we've got,a couple more to create so we have,another feature dash row,meet the creator okay so same exact,thing,add new section feature dash row,meet the creator,create section delete,and paste the feature dash row code,into feature dash row meet the creator,this is the image with text code,okay all right just a couple more to go,okay we've got text with columns awesome,don't remember what that one is called,so we're going to swing back over,to our key scroll down again,alphabetical,just going to go for text with columns,and it is called feature dash columns is,the name of the section in the code area,i'm going to go back to edit code go,into our sections folder,uh what did i say it was future dash,columns yeah,future dash columns click on feature,dash columns,copy the code for future dash columns,just gonna scroll on down there,copy and then add new section,we're gonna call it text with so you,know,it's the text with columns section we,want to label it,engraving process i'm just going off of,the example again,you'll want to label the sections with,whatever subtitle,you deem fitting and that won't repeat,on,any other landing page make it as,specific as possible,okay add new section feature dash,columns because that's the code that,we're copying,and pasting into the section and,engraving process is the name,of the section that we are using for our,example,create section alrighty,and the last one we're gonna do is image,with text overlay,engraving contact link again image with,text overlay,the code section name for it is hero,okay let's go go back to hero,and feel free to x out of these as you,finish creating them,just so that you've got a clean clean,tab thing to look at,copy the hero code add new section,i'm going to label it hero again that's,the code that we are copying,we're going to label it engraving,contact link,create section and go ahead delete,and paste the hero code in there,click save and now,what we're going to do so you've,finished adding all of the sections,now we're going to add all of those,sections,to our template of the landing,page that we want to edit so we're going,to go,from sections over to templates,we're going to go into our page,test landing page again this will be,whatever landing page title you,give and assign to this template,and uh okay we've got our hero landing,page title,um i'm just gonna go ahead and delete,this,we have about four more sections to add,so one,two three,four all right,and we had landing page title mission,statement,okay so we're going to minimize this go,into our sections,and remember image was text,so we're going to go to feature dash row,mission statement,is what is what the section name is,feature dash row,so we had our mission statement we had,meet the creator,okay so feature dash row,uh what was it meet the creator,we're just making the section name,here between the single quotation marks,we're just,matching the same,exact name that we have assigned,to the section right we're not including,the dot liquid part you don't need the,dot liquid part you just need,the section name okay,uh and going back we've got engraving,process,and engraving contact link those are the,two that we have left,okay so text was columns was,feature columns so i could go on to our,feature,columns and see engraving process,so we'll type in engraving dash process,feature dash columns,dash engraving process,and then hero since that's our last one,hero,dash engraving contact link,all right and then we'll click save,so you've got your five sections again,we're going off of the,example that you can find on my blog,one two three four five we've clicked,save,and now we're gonna go back,to our online store click customize,and you will be welcomed when you go,onto your landing page,all of those sections will be right,there,pre-populated for you you won't be able,to drag and drop like you can on the,home page,if you want to edit the order of the,sections,you'll have to go back into the edit,code,and rearrange the sections individually,by just copying and pasting them in the,order that you'd like them on the edit,code section,but now you can click into your sections,on your landing page you can add,an image of whatever you'd like,got a whiskey bottle so we can celebrate,uh you can add um so you know we we had,the heading,and it's landing page title,and whatever sub content you want,awesome you'll click into all of those,edit them just like you would on the,home page,click save and that,is that that is how you add sections to,your landing pages,so i know that took a little bit of time,i know there are probably a couple,confusing parts in there,again feel free to go onto the blog post,that i have which writes,all of this out step by step for you,guys,feel free to re-watch this video as many,times as it takes,ask questions in the comments all of the,supplemental material,will be available to you so,this pdf that has the section,keys for the customization name and the,edit code name for all of your sections,and there's also a shorter version key,document that i have,available that doesn't have the visuals,it's just a nice simple one-pager,that will be available for you in the,description box down below on just click,into the blog and it'll have the links,to all of those documents in there,thank you guys so much for watching i,hope this,has helped you figure out how to create,nice landing pages and it's very,satisfying because,you can just click mobile view,and look at that it just it fixes,everything for you automatically,with those sections nice and easy,very simple looking as opposed to,you know going trying to,get it formatted and stuff just makes,life a lot easier so,feel free to share your success i hope,you found this video helpful,let me know your thoughts on it um if,there's anything else that you're kind,of struggling with on shopify,let me know um definitely want to create,more of these videos,and i hope you guys enjoyed watching so,thanks so much and i will see you in the,next video,bye

Congratulation! You bave finally finished reading how to integrate new landing page to theme shopify and believe you bave enougb understending how to integrate new landing page to theme shopify

Come on and read the rest of the article!