BACK

how to make a page template in shopify

Shopify 2.0 Templates Tutorial - Create Different Layouts for Product Pages & Collection Pages all r

Ed Codes - Shopify Tutorials

Updated on Mar 13,2023

Shopify 2.0 Templates Tutorial - Create Different Layouts for Product Pages & Collection Pages

The above is a brief introduction to how to make a page template in shopify

Let's move on to the first section of how to make a page template in shopify

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.

Shopify 2.0 Templates Tutorial - Create Different Layouts for Product Pages & Collection Pages

all right what's up guys i did a poll,recently on my youtube channel where i,asked what my next video topic should be,and the most voted for topic was shopify,2.0 so today i want to talk about page,templates which is a new feature of,shopify 2.0 that many people aren't,using yet it's a really underrated,feature and it can really be quite,powerful one of the most common,questions that i get on my channel when,i talk about adding a specific feature,to a product page,is how can i add this to one product,but not to another product right how can,i add a feature to one product page,without affecting the rest of the,products on my store and a good example,of this is this tutorial where i showed,you how to add a gift message field to a,product so obviously this is for,products that have some kind of note,attached to them or maybe they have an,engraving or maybe there's something,written on the shirt whatever it's a,customizable product right and maybe not,all your products are like this maybe,not all your products are customizable,so you want to add this on one product,but not on another type of product and,that's really easy to do in shopify 2.0,you just have to use page templates so,i'm going to show you how to do that,today another good use of page templates,is to make a completely different design,for different product pages so you may,have some products which are like your,flagship products your main products,and you have a lot more to say about,them right you have you want to talk,about their features a lot more so the,example that i've got here is all birds,you know they've got their merino wool,or or tree actually tree fabric sneakers,and they have this product page right,the top of it is a typical shopify,product page but then they've got these,extra features that they want to talk,about below and we can do this now,thanks to shopify 2.0 and sections,everywhere you know how previously you,only had sections on the home page now,you have them on every page so you can,add sections,underneath your main product section on,your product page but maybe you don't,need that for all products so here,they've got their beanie and you know,they just don't have that much to say,about the beanie because the beanie is,like not their main thing their main,thing is sneakers so they have these two,different product page templates one for,the shoes and probably the other one is,just the default product template for,regular products and you know this,doesn't have to be limited to just,product pages either so here they have a,collection page which is like your,typical shopify collection page right,you have a product grid and you have,your filters on the left here but they,also have this other collection page,under new arrivals when you click on,warm weather,they have collection pages with this,nice image banner and look this is for,warm weather and it's really warm image,it really gives the mood and they have,this kind of image banner for every type,of collection that is for a specific,use like when their shoes are for a,specific scenario for example running,they have these people running and to me,as a potential customer of all birds you,know that really appeals to me right so,think about the psychology of a shopper,here i was actually looking for shoes,for summer i was looking for some,lightweight breathable shoes i had heard,of all birds before so i go on their,website and then when i'm looking at,their website i open the nav and i see,this like best for warm weather so i,click on that and immediately it kind of,confirms my expectations right like i'd,heard that they make lightweight shoes,and then i see that they actually have a,collection for warm weather and that,makes me a lot more confident as a,shopper that this is the product that i,need and yes i actually did end up,buying these tree runners made of,eucalyptus,so,it worked beside product and collection,pages you can also do this on your,regular static pages like your about,page your team page or whatever so like,all birds has this um,our story page right and they're using a,big image banner with a video background,then they're using kind of like i would,say that this is a page section and by,the way i should have mentioned this at,the start but all birds is on shopify uh,they're one of the most successful,shopify store examples yeah these are,all pretty regular sections i mean this,is a gif image which is pretty cool,but you can do something like this on,your store as well using page templates,and sections everywhere which is now on,shopify 2.0 by the way if you haven't,upgraded to a shopify 2.0 theme yet i,hope now you're starting to understand,why you should,because it gives you so many more,options in terms of the design of your,website and yeah i think that's all the,examples that i wanted to give so now,let's jump into my computer i'm going to,show you first how you can add something,simple like the note field to just one,product template and then how you can do,a product template with a an additional,section like the alternating information,sections that all birds is doing and,then also how you can do the same for,collections and for a static page it's,pretty much the same process for all of,them this is going to be a pretty quick,tutorial so yeah let's get started okay,so let's first talk about templates what,are templates i think that the most,common use of templates is on the,contact page so if you've ever made a,contact page in your shopify store using,a contact form,then you've had to create the page,contact right and then down here,in the theme template,you choose contact because every theme,in shopify comes by default with a,regular default page template and a,contact template right and enabling this,contact template would enable the,contact form on your contact page and,you'd have the same with products right,so,on every product page you might have,noticed already,that you have this and that there's,pretty much nothing there i mean i have,one template already you may have no,templates at all or if you're using a,more advanced theme like turbo you might,have two pre-built templates that they,allow you to use maybe three but you,never had the ability in the old shopify,to create your own templates right to,create as many as you need and so one of,the biggest advantages of the new,shopify 2.0 is that we can now create,our own templates we create as many,templates as we need so here i am inside,the theme customizer,looking at my gift product example and i,have this message field,and it's currently using the default,product template so this message field,is on all my products now you might be,used to navigating inside the theme,customizer by simply using your,navigation and using your site as a,customer would,but you should get used to using this,drop down as well so to get to the,default product template you just go to,products and then default product so i'm,on the default product template i've,added this field and every product now,has it but that's not what i want what i,want is just for this gift product to,have this field so what i'm going to do,is actually duplicate this template or,i'm going to create a new product,template on the basis of the default,product template which already has this,so,let's go to products and then i'm going,to click create template,and i'm going to call it,with gift note right,i'm doing it in dashes like this because,if you save it with spaces,shopify will just convert it to dashes,anyway so i'm just doing that,immediately,um so let's just create the template and,it might take you to a different page,this is just a preview right it might,take you to a different product just go,back to previewing the product that you,want to,see this template on just so it's less,confusing to work on so now that we're,on this template we're looking at it,this is the with gift note template and,we see that it has the gift note that's,great now we can go back,to the default product template and we,can remove that section that has,the,gift note and again it doesn't matter,what product you're looking at remember,it's not about the product it's about,the template here in the drop down and,we're looking at the default product,template it's just that whenever you do,something it kind of defaults back to,showing you your first product by,alphabetical order i'm not sure but,ignore the product,we're just going to remove this block,okay from the default product template,and we're going to save and now we're,going to go to products and look at the,width gift note and okay great it still,has this field,and the last thing the most important,one that i think that people forget when,they use this is that you need to assign,the template so we've just created our,own template now we need to go into,products and remember how i showed you,that here,we didn't have anything except this one,coffee template that i created before,well let's refresh and now you'll see,that we have access to the new template,that we just created,if you saved in the theme customizer if,you remember to save,then you will see this new template now,we can apply it,and save and now when we preview this,product we will see this okay just,remember that part if you haven't,applied the new template here if this is,still on default product and you're,previewing this product and wondering,why it doesn't have the thing that you,just did in the theme customizer,that's why because you need to apply it,here so now let me show you quickly how,you can make this kind of layout that,all birds is using where you're talking,about the features of your product below,the actual main,default product section on shopify,firstly we're still on the gift product,right,and now i'm going to change to look at a,different product i'm gonna look at the,shoes but oh no it's still got the,message field why it should be using the,default product template that's because,i'm actually still looking at the gift,note template so,changing it here just changes the,preview just remember that what product,you're looking at here does not,necessarily,change the template that you're looking,at here so let's make sure that we,switch the template again go back to the,default product template it'll switch,back to your first product in your in,your product list or whatever so just,change it back to,you know whatever product you're working,on and once again i'm going to duplicate,the default product i'm going to,create a new template called shoes,product,create template it will throw me back to,that product i want to look at shoes i,know this is annoying but yeah okay i'm,looking at the shoes and i'm looking at,the shoes product template and now i can,go ahead and add whatever section i want,so,you know i'm using dawn theme and there,probably isn't a section that looks,exactly like this alternating layout,here a lot of other themes have it uh,dawn doesn't i think but dawn does have,this multi-column layout,we can add a slideshow or a collage or,something like that right we can add,whatever we want to talk about our,product and how cool it is,we can add rich text right and then,we'll hit save,and so we have this choose product,template and it has all this stuff in it,and then once again we'll go into,the product that we want to apply the,template to and we're going to apply the,template now,one important thing to take note of is,that the content in your template will,be the same,across every product that uses this,template right so if i talk about,like if they're talking about the men's,tree runners here,then,all the pages that use this template,will be talking about the tree runners,so you see tree upper,now i bet that if we look at their other,shoes which are made of wool,they don't want them to show,um you know the information about,the tree upper right or silky and breezy,they want different content on it and,they want different images so,there we go on this product they're,using a wool upper and they have,different images about wool so these are,actually two different templates okay so,they don't have,just one,template for shoes,like i showed you,and then a different template for the,beanie as i was saying earlier they,actually have,two different shoe templates they have,tree shoe template and they have a wool,shoe template because the text is,different,and the images are different there is a,but,okay,it gets a little bit more complicated i,hope it's not getting,too into the details here,but,you can use the same shoes product,template and then use meta fields so use,the insert dynamic source here,so that you can use the same template,across say tree shoes and wool shoes but,have different content inside here so,the meta field would be outputting,whatever content goes here right,um but that's kind of a different topic,that's meta fields i've already made a,video on metafields and i'm planning to,make another one because i think that,video,wasn't very good i'm going to talk about,metafields directly in the context of,making something like this like all,birds i might use all birds as an,example again so if you want to see that,make sure you subscribe and hit the,notification bell so that you're,notified but basically the main takeaway,here is be conscious of what kind of,content you're putting on here because,if you want to use the same template for,different products,then this stuff better be applicable to,all those products otherwise you're,going to have to make a different,template or use meta fields okay,now again if you want to do the same,thing for collections the process is,exactly the same you have a default,collection template right,and then you can create a template,duplicate that default collection,template call it whatever you want you,can call it with image banner right and,then you would add a slideshow section,at the top or an image banner section,top whatever it's called in your theme,so let's add an image banner here,and move this to the top,and then we can,remove this text whatever,so that we just have the image,and then what image would go in here,well if you want to use the same image,across all the collections using this,template then you don't have anything to,worry about just select an image,and,upload something however if you want,like all birds to use a different image,for every single,collection then i recommend using,metafields right so,you would select an image from here,and lastly of course there are your,static pages in shopify like the about,page now the reason i call it a static,page is because it doesn't have a,product or a collection right it doesn't,connect to your store data,but i mean it actually does i mean now,it's quite dynamic right it has sections,on shopify 2.0 you can finally add,sections and we don't have to have just,a block of text,obviously,i have some work to do on my about page,i haven't done anything yet but,as you can see you can add whatever,sections you want to it,and then,you can save that as a template i,already have a template from my about,page,but again you can create a template base,it on any page you want you can base it,on the default page,which doesn't have any sections,or you can base it on your about page,for example you can like a page that,you've already created whatever and you,can make as many of these as you want so,that you can do completely different,templates like all birds does with our,story and they've got like our materials,right,which is really cool really nice so yeah,that's it guys i think now you know,everything there is to know about um,page templates in shopify 2.0 you know,how useful they are what they can be,used for and you know how to create them,and also a little bit about how to use,them together with metafields although i,will elaborate on that in a later video,all right lastly i do have a small,announcement to make,and that is that i'm launching a members,only community kind of is an experiment,i want to see if there's any interest in,this so there's this website called buy,me a coffee.com here it's usually where,you can you know donate money to help a,youtube creator but i'm not asking for,that today i just wanted to tell you,about my membership which is going to be,a discord group right,discord is a popular chat app that is,used by many youtube creators for member,communities it'll be a chance for you to,basically get consultation from me to,always have someone to ask questions at,any time right i'll be active on that,group every day i'm also hoping that,you'll be able to talk to each other so,you'll all be shopify store owners that,are maybe facing the same kind of,problems,you'll also have a 30 discount on my,development services which you can find,here under extras,this is sometimes what i do if you email,me i'll tell you that i can help you for,this feed depending on the size of,project right so if you're a member,you'll have a 30 discount on all of my,services there will also be extra,content there that i don't usually share,on youtube so if someone asks me a,specific question and i make a video for,them specifically answering it then i'll,also be sharing that video in the group,and also there will be a small behind,the scenes on the projects that i'm,working on for my like real job right,which is freelancing um for various,shopify stores of course with their,permission,but hopefully i'll be showing you,the kind of technical problems that,they're facing features that they want,to build and how i'm going about,building that so i hope that will be,interesting for you as well and of,course lastly you'll be supporting this,channel,and you know that will allow me to make,more videos to post more frequently uh,but for that i need to free up some time,time is money you get the idea so you,can go ahead and join now you will,automatically be added to the discord,group and i really hope to see you there,it will be so cool if this catches on so,that's all for today guys thanks for,listening subscribe and like let me know,if you have any questions in the,comments and i'll see you next time

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

Come on and read the rest of the article!

Browse More Content