BACK

how to create shopify templates

How To Make Custom Shopify Layout Templates, Sections, and Themes hi everyone Scott here with the fi

Scott Bartnick

Updated on Feb 07,2023

How To Make Custom Shopify Layout Templates, Sections, and Themes

The above is a brief introduction to how to create shopify templates

Let's move on to the first section of how to create shopify templates

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

How To Make Custom Shopify Layout Templates, Sections, and Themes

hi everyone Scott here with the five day,startup today I'm gonna do a quick video,on how to create custom themes in,Shopify so we're working with debut and,basically what this means is if you want,to make a page so we'll go in here I,gotta float the video alright so if you,wanna make a custom page so I'm just an,opening a new tab so normally you would,go create new page over here so I'll,just do this test so then you'd create,test page and then hi,and then theme is gonna be the default,which is what they bu gives you or,Shopify gives you and this trick will,work for all the themes or at least all,the custom or standard free Shopify,themes so I'll go ahead and save that so,then the problem with this is you all,havin a user interface you just have,this to control and edit the page and,then you can do code here but when you,go to view it it's very basic it's just,gonna be HTML and it's not very user,friendly so if we go in here that's the,test page so now we're going to do is,we're going to go into our themes,customize so this is gonna bring you,into it's kind of be your user interface,slide and basically for your homepage,you have all of these really easy click,and drop kind of user interface for,Shopify but none of the other pages had,that and what we're trying to do is get,the other pages to have a custom theme,like that where you can edit them very,easily by basically clicking dragging,and dropping photos in short bits of,HTML in different sections things like,that well that's loading we can view so,basically this is what I'm talking about,this is one I'm gonna use for example,but this section basically wouldn't be,here so you wouldn't have this or this,and so that's what we're trying to add,in is your different sections basically,that's called a page theme so you can go,here there we go so you can see that the,homepage has a whole bunch of options,here and that's by default on any of,those themes I didn't give you a whole,bunch of really cool features but that's,not anywhere else and that's just,basically because the coding is a little,bit complicated so if we go to our test,page I'll show you,so you can see there's nothing here and,the whole goal is to actually get,something into there so what we're gonna,do is you can couple ways get there I'm,gonna go here and then edit code so guys,this doesn't actually take a lot of,coding it's all copy and paste you just,need to know where to edit things it's,pretty simple there's I think one line,of code that I'm going to give you so,mine has a bunch of themes already so,what I'm gonna go ahead and do is I'm,gonna look at one that I already created,and you guys obviously don't have this,but I'll put the line of code in there,for you I in the description you'll see,this line but it's basically you're just,copying pasting this so look down for,that button so then this is your actual,theme so under templates we're just,doing new and then you wanna go down to,page because we're doing it pages you,could do it,I just never done it through blog I,think it works at the exact same way,it's just because it's kind of separated,I never in do I could name everything,that I've done mine just for,organization and the name of the page,that way you can stay organized gage,great so then who's this goes this so,basically we're just gonna go ahead and,delete all that and then put this in so,you have to make a new section now you,can't reuse them even if you've made,them before so my hero is one that I've,made before and the here is the big,picture at the top with text overlay so,what we're gonna go ahead and do is,gonna come down to section and then,we're gonna add a new one so let's do I,keep the same style my and the type of,page your row for the type of plug-in,and then just and you're gonna want to,copy this because it has to be exactly,the same,create so then back in your theme,you're just gonna take this section out,and put whatever you call your new,section in so then we're gonna go ahead,and delete this section and then you're,gonna scroll through here so basically,in sections is all the different types,so if you're on the home page just,though I don't have the home page up,that the home page had a whole bunch of,options on the side here each one of,those is basically in the sections some,of them are called a little bit of weird,things what I use the most is my custom,and my hero so here you can see your,hero,so let's take the original so I'm just,gonna open this on my copy it I'm gonna,move over here I'm gonna go ahead and,close it so I don't mess it up by,accident and then we're almost down this,guy that's it's super simple so right,here at the bottom scene you're gonna,see the name and this is the name that,would appear on your home page on the,left side so that's why you the way you,can correlate them it's kind of annoying,that they don't match up so like hero is,actually image with text overlay which,it's just once you figure it out you'll,be good but you do have to change this,and a semi unique so I'm gonna do I'm,gonna do image text test and then what,you're going to do is find it again so I,should have copied it before handful,going ctrl F or is it image with there,we go so it's only in there twice it's,except for the custom where it's gonna,be in there three times so we're gonna,go ahead and paste that in and then,we're gonna save it so we're gonna do,this one more time I'm gonna show you,with the custom the custom gives you a,whole bunch of features because you can,just continue to add new sections so,it's really the best that way don't you,use a whole bunch of different ones,because otherwise you have to basically,put in each section so if you saw the,about page there's a whole bunch of,these there's like four or five and each,one with a different,feature and I actually use the same,feature over and over again but I just,had to put it in multiple times on some,orient differently so as you use this,you'll figure out what you want to use,and you can play around with the home,page again to do that so we're gonna,come in here I'm in sections again my,custom affiliate so this is gonna be the,custom one that I've talked about and,we're gonna do a new page in your,section my custom test page create,section copy this over so we'll come,back into this my can close the done so,then we're just gonna repeat this and so,the order they are and here is the order,it shows up on your page on the,left-hand side which will make a,difference so might there would be my,hero,so you're gonna be forced to use see if,you can go to this page so I'm setting,up the exact same ice here me force use,my hero first and then the custom,section if you wanted to flip that or,you want to another my hero you just put,in the my hero again but you're gonna,have to make a whole new section so you,copy and paste this but you do my hero,test page two I just like that how have,you guys want to organize it so then we,got this just gonna select all copy,weight this and then we're gonna look,for name again so it should be in your,three times for this we're gonna go,ahead and change this to Mike custom,test page just because um if you go too,long it'll give you issue so we're gonna,see new custom,and to prevent any issues I always copy,and paste that way I don't like mess a,capital up or anything like that what I,do,of course I didn't oh is it my custom,okay it works so you can see it here and,you gotta change it in both spots,that's it so you save it,and this - a little complicated you guys,but if you think about it we've done no,coding all we've done is copy and paste,and change two lines and you didn't have,to understand any code to make that,happen so now we're gonna come in here,so you could refresh it it's still not,gonna be the way you want your the edit,this page all we have to do is change,the theme from the standard page to test,page this what we called it,all that's letting minor net run so when,I do these videos I'll show you guys,what it looks like here so you can edit,just click in and that it like you,normally would on a home page and then,the same with the custom you can click,in and you can add a section,and I've had issues before where it,wouldn't add the section for some reason,or they didn't show up and usually it's,just a spelling error that's why I copy,and paste everything so if you do have,that issue just basically go delete it,and try it again make sure with custom,you get those two spots and you line up,the name so let's see if it's loaded,there you go,so we're gonna do a page template and,then test page save this and now if we,did everything right when i refresh the,test page over here you'll see the same,once i refresh this there you go,so we refreshed there right here it's,what we called it and so guys that's it,you can repeat as many times you could,have 30 my heroes or anything like that,so it's basically gives you an on custom,eligible format it makes it extremely,customizable and then you can make as,many pages you want look awesome so some,people charge hundreds of dollars for,themes like you can pay to 300 dollars,for the theme that does this and they're,actually the user interface and there's,not as good and they're usually pretty,glitchy and you're gonna getting worse,engagement all my pages that they're,websites that I make are with the three,Shopify themes and then I just go ahead,and go in there and custom edit it and,then if you want to get really advanced,you can do all custom coding in that,theme so you can make it completely,custom for that I would use a freelancer,to write the CSS and things like that,but that should get you guys started let,me hope you have any questions also in,the custom there is the Asian HML so you,can do that HTML so you can put that,anywhere if you guys have any questions,let me know and check out the five-day,start up and have a good day thank you

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

Come on and read the rest of the article!

Browse More Content