how to add sections to a page in shopify

all right what's up guys this is jake,and in this video i'm going to be,showing you how you can add,sections to any page on your shopify,store so one thing you'll probably,notice,if you've been setting up your store is,that when you're customizing the home,page right here you'll see that you can,add a bunch of different sections on,here,and that's cool and all but you'll,notice that you can really only do this,on the home page so if i were to switch,to like just a blank page here,like my about page for example you'll,see that it only really has,a header and a footer section as far as,this template goes there's nothing else,on it,and we can't really edit or add or move,any of these,different sections right here you'll,notice most themes don't really come,with,many templates here so what this,essentially means,is that your home page is pretty highly,customizable and has a lot of different,sections to it but then the rest of your,pages might be looking a little,bland or boring so in this video i'm,going to show you how you can go ahead,and add,sections like this to any page that you,want,so what you want to go ahead and do here,first is we're going to go ahead,and exit the editor but i'm going to,open up the editor in another,tab here for later on and the first,thing that we're gonna do here really,quick is create a test page so i'm gonna,go to pages here,add page and just create test and you'll,notice here that we have,theme templates here default page and,contact is the only one that comes with,the debut theme,right here and what we're gonna have to,do here,to add sections to any page we want is,to create a new,theme template which we're gonna,actually have to do by going,into the theme editor and editing some,code but it's actually really easy,and i'm going to show you the exact code,you need to use so it won't be,that hard so i'm going to go ahead and,just save this test page really quick,and then i'm going to go over here to,online store and i'm going to open this,in a new tab to keep the pages open for,later,and what we're gonna go ahead and do,here first before we actually edit,the code we're going to first just make,sure you duplicate your theme just in,case you accidentally uh,missed click on something and you mess,up something within the theme,you just want to make sure you duplicate,it so that way that mistake,can immediately be erased so once you,duplicate your theme we're going to go,down here to edit code,and what i'm going to do now is show you,how you can go ahead and,create a new template so we can see,right here we have different templates,here,and we can see that if we go down here,to page we can see we only have two page,templates we have the contact and then,just regular page.liquid,and depending on what theme you're using,you may have more or less,page templates so what we want to go,ahead and do here is just click on add a,new template and we're going to make it,a page,and i'm going to just name it test and,i'm going to click,create template and what we're going to,go ahead and do,is whatever code is in here already i'm,going to go ahead,and get rid of it and what i'm going to,go ahead and do now is scroll down here,to sections and open this up and we're,going to use this,as a reference right here so these are,all the different sections that are,available,within your theme here and we can add,these sections,into our page template with,this simple code right here so this is,going to be the code i will provide it,in,the description as well so all it is,is the curly bracket a percentage sign,space and then type section and then,you're going to put a quote,a single quote and then you're going to,go ahead and find a template down here,that you want to go ahead and add in,so let's say i just want to go ahead and,add in a rich text,section i would just type rich text,just like it says down there close the,quote do another space,do a percentage sign and close it with,another curly,quote and that's it and you'll notice,down here,that what we're putting in between the,quotes is going to be whatever,text comes before the dot liquid,so we've went ahead and added a rich,text section in here so i'm going to go,ahead and copy this,and paste two more just so that way we,have,just that we don't have to type all this,out once again so let's say now i wanted,to go ahead and add in,instead of a rich text we wanted to add,in,newsletter so i could type in newsletter,and let's say we wanted to add in a map,so i could type in,map and we could go ahead and add in,a bunch of different ones if we wanted,to but one thing you'll notice is that,certain,ones won't actually work,when you do this method and certain ones,will so you can go ahead and test out,um different ones so for example i know,one of these i know this one right here,won't work so i'm going to go ahead and,use that now just to show you what,that'll look like,so once we go ahead and put in these,sections we're going to click save,and keep in mind that the order in which,the sections are here in the code is the,order in which they're going to show up,on the template,so now that we've saved this template,we're going to come back over,to pages and click refresh,and then we can come down here to,templates,theme template and we'll see here that,our new template we just created test,now it shows up so we're going to go,ahead and,switch this template to test but,actually really quick first i'm going to,open up,the default page right here just to show,you what that looks like so we can see,this is the blank page template we,already have,and now once i switch that to test i'm,going to go ahead and click save,refresh this page and now we can see,that we have a couple of things showing,up on our template so this,is the rich text section so this is,rich text right here and then we have,the newsletter,section right here and then we have the,map section right here and then you can,see this is what i was telling you right,here we see liquid error,so we can see that we cannot add the,collections product,template so this collection template we,cannot add that,in this particular manner so that's why,i wanted to show you one that wouldn't,work because certain ones,over here just are not going to work,with this method,and certain ones will so you'll have to,go ahead and split test,depending on which sections you're,looking for now let's go ahead and take,a look at this page in the editor so if,we come over here to the editor,i'm going to go ahead and open up this,test page in the editor,and now we can see we have our sections,here over on the left,now one thing you'll notice is that you,won't be able to drag and drop this like,on the home page and this is because we,manually,created this template so if you want to,actually go and change the order of,these,you have to actually change the order of,the sections here in the code,so if i wanted the map on top of,newsletter,i'd have to go ahead and do that and,then i'd have to click save,now i would recommend that before you,make changes in the code,that you make sure and back up all of,your content here that you have so let's,say you have a bunch of text in here,before you go ahead and move the text,section,make sure that you go ahead and actually,save this text like in a separate,document or something,just in case sometimes there's a glitch,where when you,move the sections around the content,will actually disappear so you want to,make sure you don't actually run,into that issue so this is how you can,go ahead and add,sections to pretty much any page on,your shopify store and like i said you,can go ahead and look through all these,different sections,to go ahead and figure out which ones,will work,which in the case these three do and,which ones don't work,in the case this one doesn't and since,that one doesn't i would just go ahead,and get rid of it,and then click save and if i came over,here and refreshed once again,it's gone if i come over here and,refresh on the editor,we will see here once it loads up that,it,is gone and then you can edit these just,like any other section,you normally would just type anything,and you'll see that it goes ahead and,shows up right here so that's how you,can go ahead and add custom,sections in your pages,in your shopify store so if you did find,this video helpful be sure to leave it a,thumbs up,subscribe to this channel for more,videos and i will see you guys in,another one

Congratulation! You bave finally finished reading how to add sections to a page in shopify and believe you bave enougb understending how to add sections to a page in shopify

Come on and read the rest of the article!