how to create custom section 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 go ahead and,create custom sections to use in your,shopify store inside of your shopify,theme as well as being able to create,complete custom pages from scratch as,well so this is going to be really,useful if you want to go ahead and just,add a little bit of personal touch or,flair,to whatever shopify theme you are,currently using right now,so in order to do this we're going to be,using an app called be here which is a,landing page builder so you can go ahead,and install b by clicking the first link,in the description,and then once you go ahead and install,it we'll be brought to,the main dashboard of be right here so,this app is really easy to use and we're,going to go ahead and go through it now,so the first thing that we're going to,do is we're going to create a custom,section within our shopify theme and,then next we're going to complete create,a completely custom,page as well,so starting off with the section here if,you're not completely familiar if we go,ahead and go,to our online store really quickly,and we just click on customize here,so when we're customizing our base theme,we can see here that these are going to,be the sections right here so this is a,image with text section a slides to show,etc and if we were to come down here and,click on add section we can see that we,get,a list of a bunch of these theme,sections right here,but let's say that we want to go ahead,and create a custom section so maybe,these sections aren't providing exactly,what we want for our design we want a,little more flexibility so that's what,we're going to be doing right now so,inside of the b app if we come down here,to sections,we can go ahead and just click on create,new section right here,and wait for this to go ahead and open,up,so we can go ahead and create a template,title so this is going to be a template,that can be reused over and over again,just like any of these other sections,right here,so we'll just call this,test section,and we'll go ahead and we can either,start from scratch or we can choose a,template so in this particular case i'm,going to just start from scratch,and we can see right here that what it's,going to do is it's going to open up,your store right here and then it's,going to go ahead and,give you a blank section right here that,we can go ahead and actually start,creating,so if i go ahead and click on add new,we can go ahead and select a layout for,the section that we want to go ahead and,use,so we can go ahead and select a full,width just one section here or we can,split it into a bunch of different,things so let's say i want to go ahead,and make this section,using this particular shape right here,and then i can now come up here to,elements and i can actually start,populating the section with elements,so let's say in the center of this,section for example i want to get i,wanted to go ahead,and have an image,and then let's say,on the left side,i wanted to go ahead,and have text,and on the right side i wanted to go,ahead,and have,text as well and we're going to go ahead,and,put this text under this heading and i'm,going to go ahead and actually add a,heading above this right here,so let's say this is the custom section,we wanted to go ahead and create,we can see that just like that just by,dragging and dropping we can go ahead,and create a section so after you've set,up the actual template for the section,you just have to go ahead and fill in,the actual information so let's say i,went ahead and put it an image here so i,could click on the image,and then click on change so we can go,ahead and put an image in here so i'm,going to just go ahead and pick a,pre-existing image here that's already,uploaded to the store for the sake of,the example and i'm gonna go ahead and,just keep this text as dummy text just,for the sake of the example not taking,too long,and if i go ahead and save this right,here,we can see that now we can go ahead and,utilize this custom section,in our actual design here if we come,over here and i click on refresh,i can go ahead and come down here now,to the bottom,click on add section and we'll see now,that the test section here is showing up,so if i go ahead and click on test,section we can see that we've added in,the custom section that we just created,right here and i can go ahead and drag,and drop it just like i would,any other section,so it's definitely a pretty cool feature,right here and it's extremely easy to do,so if you're feeling limited with the,sections that come with your theme you,can just use the b app to create your,own custom sections and if you want to,create more,you can just add a new section right,here you can create,any different shapes you want and,there's a bunch of different elements,here as you can see that you can go,ahead and create your sections with so,you can go ahead and get really,creative with your custom sections here,because there's a lot of different,options and it's all drag and drop so,it's extremely easy to go ahead and set,up,as you can see right here,so just like that you can go ahead and,create another quick section and this,could be a section for like the bottom,of the page showing the map of where,you're located so that's how you can,create custom sections inside of the b,app to go ahead and use inside of your,shopify theme editor so now let's go,ahead and create a complete page from,scratch right here so i'm going to go,ahead and exit this,and head back to the main dashboard of b,right here so we can see here now if we,want to go ahead and create a custom,page,we just have to head down here,to pages,so we can see that there is a lot of,different options for pages,as well so by default,we have the option to,build our home page would be so the,actual home page of the store or you can,create a bunch of different pages here,so we can see here we can create,product pages,we can create collection pages,collection list blogs and blog post,pages as well we can make all of these,custom,so,in this particular case i'm going to go,ahead and create a product page but,first i want to show you all of the,different templates that are actually,available,inside of the app so if i go ahead,and go to pages once again and i click,on create new page,we just have to wait for this to open up,here,and this time i'm going to click on,choose template just that way we can see,all of the different templates that we,actually can choose from here so there's,a bunch of different default templates,here that you can go ahead and use so,these are essentially just landing page,templates so let's say i went ahead,and just open one up so if i just want,to click view we can preview any of,these landing pages by clicking view,here and we can see what it looks like,on our store here so we can see that,this is,this particular landing page and if we,wanted to go ahead and use a template we,could just click on edit template and,then,that would allow us to go ahead and edit,all of this stuff inside of here,so you can go through these different,templates if you want to go ahead and,use the template here we can click on,see all,and if we go ahead and look through here,we can see that there's popular page,templates right here so we have homepage,templates here we have privacy pages we,have faq pages we have some trending,ones up here as well,so we can see for example here is a,template for a contact page,so it kind of gives us the map up here,up top and then the,contact info over here as well as the,contact form on the right,so this is a very clean contact template,right here so there's a lot of different,templates you can go ahead and use for,your different pages as well it's going,to save you a lot of time if you choose,to use the templates so real quickly if,we wanted to edit a template here i,could go ahead and click on build,default product template here,i could click on choose template and if,i just go ahead and choose one of these,really quickly and i just click on edit,here,we can go ahead and see that what it's,going to do,is it's going to fill up our store here,with the pre-built template and in this,case it's showing our particular product,price and everything as well,so,the template is completely built in,already so if we wanted to go ahead and,edit anything we could so we could come,in here,and click on edit on this for example,come in here and edit the text if we,wanted to we can come over here to the,design and change the colors here for so,for example if i changed,this to,change these different text colors here,under the add to cart we can go ahead,and edit the hover as well so we can see,right now that when we hover over this,button for example,that it is turning green and it has blue,text but let's say for example we would,just want,this color to match with our store's,brand in here so i could go ahead and,just change,this actual color,to go ahead and match what this is so in,this case what you probably want to do,is you'd want to change the colors of,this template to go ahead and match with,your brand in here so i could change,this color to the,hex code here that's associated with my,brand and i could keep the text color as,say,just black and i can go ahead and keep,the border,as black as well,and now we can see that this button fits,a lot more in line with our branding so,you would just go ahead and do that with,the other buttons here on this page as,well,so editing everything is going to be,pretty easy and when it comes to,templates all you're really doing is,you're loading up the template and then,you're just going to be editing,everything over here to go ahead and,make the actual page,fit in with the branding of your store,and if you want to go ahead and add,additional,sections,to a custom template you can so you,could click on add new section here,and let's say i just added this in right,here,and let's just say i wanted to go ahead,and add in,some type,let's say just drop in,the accordion here so let's say this,accordion for example could just be like,different faqs about this particular,product so let's say i wanted to add,this into the product section i could go,ahead and do that as well so in this,example this would be a template you can,use for all of your different products,you can customize the section to your,liking just by dragging and dropping,different stuff in here and by clicking,on the different sections and actually,editing them like we did with this,button and then when you're done you can,go ahead and just click publish,and,your,template will be ready to go so now i'm,going to go ahead and show you how you,can actually create a,page from scratch without using a,template all right so now we're going to,go ahead and create a product page,template completely from scratch so i'm,going to go ahead and click on create,new template right here,and we're gonna get started so i'm gonna,go ahead and just do this name and,testing and i'm gonna click,on select products to apply,and we're going to apply this to,the candy cane,and i'm going to click on start from,scratch now if you want this template to,apply to all your products you can go,ahead and select them all but i'm going,to go ahead and just click on start from,scratch here and then what i'm going to,go ahead and do is start actually,building this page so i'm going to click,on add new section here and the first,one i'm going to do is going to be,this double-sided one because this is,going to be pretty standard for,a,product page here so i'm going to go,ahead click on this,and i'm going to go over here to,elements,and we can see here that now when we're,creating a product page we have custom,product elements as well,so i'm going to go ahead and put the,product image right here,i'm going to go back to elements and,start populating the right side now so,i'm going to go ahead and,first put in the product title,come back to elements,i'm going to put in,the amount that we have in stock,then i'm going to go ahead and drag in,a,quantity selector come back to elements,here,drag description in put it right there,and we can see how quick and easy it is,to go ahead and populate these landing,pages it takes just a couple of seconds,to,create the custom landing page that,you're looking for i'm going to drag in,and add the cart button and put it at,the bottom and the main time consuming,part of this is just going to be,figuring out how you want to go ahead,and design the landing page but if you,know what you want it to look like,already then it's going to be extremely,quick and easy as you can see,i'm going to go ahead and put payment,methods down here under the add to cart,button,for a little bit of social proof and we,can see that just like that we've went,ahead and created the first part of our,product landing page the product section,here and the only thing i'd want to,change,is if i come right here to the add to,cart button i'm going to edit it and i,want to go to the design right here,and what i want to go ahead and do,is just actually change,the color,to,this accent that we have right here so,just paste this code in right there,just so it matches the rest of our theme,here,and now i'm going to go ahead and scroll,down and we can go ahead and create a,new section so,now the first part of the section was,created in just about one minute we can,go ahead and create the next section so,if you don't know,how to go ahead and design something,like you don't have any inspiration i,would recommend looking up landing pages,for your specific niche so you can check,on sites like dribble or landing folio,to go ahead and try and find specific,inspiration,for,sites in your niche so you can even just,google your niche landing page to go,ahead and get ideas because once you,once you know what you're setting up,it's going to be really easy to go ahead,and build the custom page inside of here,so this next section here i'm going to,add a full length one,and this time,i'm going to add a basic element of an,accordion i'm going to drag that in,and this will serve as like an faq,section right here for the product so,let's say i'm going to go back to,elements go to basic again and i'm going,to put a heading,above this,and i'm going to just edit the text to,frequently asked questions,and then,obviously we'd want to go ahead and fill,this in with the actual questions,however for the sake of this example i'm,not going to do that because that would,make the video take too long,but we can see here that we have this,next section already created now i'm,going to go ahead and add another,section here at the bottom and i'm going,to make this one full length as well,i'm going to go back to elements and,under products and this particular,scenario another common thing to have on,a product landing page is going to be,related products so i'm going to go,ahead,and,drag that in,and we can see that now we have the,related products here showing up on our,page,just like that and we can see that just,like that we've went ahead and created a,pretty clean looking product page,template,now before we go ahead and publish this,what i want to go ahead and do is show,you one other thing that you can do,inside of the b app and if you come over,here to extension here,we can click on add new and you can see,that the b app,goes ahead and integrates with a ton of,different apps inside of the app store,so if you go ahead and scroll down you,can see that there is a bunch of,different apps here that b integrates,with you can see there's a whole nother,page as well,so if you're using any of these apps,what you can go ahead and do is you can,actually,integrate these apps inside,of your landing page builder so let's,say for example you were using looks,product reviews which is a pretty common,app to use you can go ahead and link,that up right here and show your looks,product reviews somewhere on your,landing page as well so let's say i,wanted to go ahead and do that i could,click on install now for looks and we,can see that the looks extension has,been successfully installed because in,this case on this demo store,i'm using looks so now we can see here,that i could go ahead and add in,these different extensions here so for,example let's say i wanted to go ahead,and add in,the reviews widget so i could drag and,drop this in right here,and we can see that the preview of this,isn't going to be available in here but,this is where your looks reviews will,actually go,so,let's say i wanted to go ahead and just,drag,the reviews,up above,the related products,and this would be the end of this,particular design here i could go ahead,and just click on publish,and we can see here that once this goes,ahead and load up we'll see it live here,in just a second so now i'm going to go,ahead and click on view so we can,actually take a look at the landing page,we created here,so we can see here that we created this,quick landing page here with our reviews,our related products our frequently,asked questions and our product up here,as well and we can see that we went,ahead and used an extension to integrate,with looks the char looks reviews right,here which in this case we don't have,any reviews but if we did this is where,they'd all be showing up right here,if i were to compare this,to,a different product like the lollipop we,can see that,this landing page here for this product,is a bit different because we only,activated,this template for the candy cane product,so that's how you can go ahead and,create custom sections and custom pages,for your shopify store using the b app,and a couple other things that i want to,mention before i wrap up the video,is that when you're using the b app at,any time they have live chat 24 7 you,can go ahead and access by clicking this,right here so if you have any questions,or you're struggling with the app you,can go ahead and ask those questions,right there,b also has multi-language translation,support with third-party apps so if,you're using,a app that allows you to have multiple,languages on your store that's going to,work completely fine with all of these,landing pages as well and all of these,landing pages also have support,for the custom designs on every device,so it's going to be mobile friendly so,no matter which device you're on all the,custom landing pages and sections that,you create are going to look really good,so with that said that's how you can go,ahead and create custom landing pages,and custom sections on your shopify,store,be sure to check out the b app by,clicking the first link in the,description and if you did enjoy this,video be sure to leave a thumbs up,subscribe to this channel for more,videos and i'll see you guys in the next,one

Congratulation! You bave finally finished reading how to create custom section in shopify and believe you bave enougb understending how to create custom section in shopify

Come on and read the rest of the article!