how to hide header shopify

what's up guys today i'm going to be,demonstrating how you can hide the,header or the footer on specific pages,or specific templates on your shopify,store and the reason why i'm making this,video is because this is a really useful,concept and a useful skill for you to,have not just for hiding the header and,footer but actually for hiding or,conditionally outputting absolutely,anything across your shopify store not,only using you know the show hide,sections right as you may have noticed,the header and the footer are not,sections that you can remove or hide the,announcement bar as well and actually,not just entire sections but things,within sections as well if you want to,hide things and they don't have a way,for you to hide them through the theme,customizer then,you can do that in code using this,method and particularly if you're on an,older theme that is not on shopify 2.0,you won't have the ability to actually,show or hide sections like this using,the theme editor you don't have this add,section button and so this method that,i'm about to teach you is actually the,only way that you can hide sections on,specific products or pages collections,on a shopify 1.0 or a vintage shopify,theme okay so let's get into it i've,reset my store so it's back to normal,it's showing the header and the footer,across all pages i'm going to go into,themes and then click on actions and,edit code to enter the code editor,then i'm going to open up,theme.liquid as you saw it was already,open from last time but open up your,theme.liquid file i hope this is large,enough for you let's scroll down and,we're gonna find the section header,section footer and the section,announcement bar right so these things,are listed as separate sections because,they're not dynamic sections they're not,in your main like content area where you,can drag sections around they're,actually outside of it right so that's,why they're separate in the code and,that's why if we want to hide them we,actually need to edit the code here you,may have heard of if statements right,and that works like if,some condition,right,and end if at the end and so if some,condition is true then this code is,going to be included,well we kind of want the opposite of,that right now we want this to be the,default we want this to be on most pages,unless it's the product page so we're,actually going to use unless which is,kind of like the opposite of if,but this just makes more sense to me in,this context even though it might be a,little bit more confusing for you,but this is what we're going to write,unless template dot name is equal to,product whoops,like that and,you know for proper liquid,shopify liquid syntax we wrap logic like,this,in a curly brace and a percentage sign,so,that's the code that we're going for,unless template.name,is double equals,product,then we're going to output the footer,and unless,so this will output the footer on all,pages,unless it's the product page,the product page will not output the,footer now we can do exactly the same,thing around the announcement bar and,header sections if we want to so here's,our unless,let's paste our end unless,like so and let's tab both of these in,just so that's neat as you can see in,code we always tab in when something is,like inside of some other code so that's,done at the simplest level we've done,what we wanted to do now there's,different kinds of templates in shopify,we have the product template we have the,collection template so you can use that,we have the index template which is the,home page,if you want a list of all the templates,that are in shopify you can go to,shopify.dev,themes architecture templates or just,just go to shopify.dev or just search up,shopify templates right and you can find,a list of all the templates,of all the template names right so as,you can see product,and,index for the home page,page for regular pages like about us and,contact us static pages as i call them,the cart page blog pages and so on and,you can use all of these names inside of,this code here inside of this part so,depending on what page you want to hide,something on all right now let's get a,little bit more advanced with this you,might have a specific product,where,you're using templates you're on shopify,2.0 maybe you watched my templates video,and,you've assigned a specific template to a,specific product,and you want only this type of product,or products using this template to not,show the footer or header or any other,part of the page so we can target,templates with these names as well the,way you would do that is product dot,backpacks,so,unless template.name equals,product dot backpacks something like,that okay the only issue here is that,template.name actually refers to the,first part of the template so,template.name is product,and backpacks,well you can access this with,template.suffix,and then you could do something like,this,if template dot suffix is backpacks,right,or in general this is the easiest way to,do it unless template is equal to,product dot backpacks like so,that would target exactly,our template which is called,product.backpack so as you can see here,the header and announcement bar have now,disappeared from this backpack's,template,but not from the default product,template,if you're ever unsure of what the,template is what the template name is or,what the template suffix is you can,output the template like so double curly,braces instead of curly brace percentage,sign is just to output something as text,we can save that refresh our page we can,see what template we're on we can see,that on products it outputs product,on the default product page and if we go,to backpacks we can see that it outputs,product.backpacks so we can always see,what template,it is and,you can use that information to set up,your your condition,now the last thing i want to show you is,that you don't have to go specifically,for templates you can go for the product,name for example if product dot not the,name products have a title so unless the,product title,is equal to,maybe gift product like so,then we want the footer okay so this,would hide the footer from this uh this,product that i have called gift product,now the the issue here is that this can,be kind of unreliable you could rename,the product and then your code will,break it's also kind of might be case,sensitive anyway i just don't like this,kind of format usually i would use the,product.handle and the product handle is,what we have here and that's a lot safer,it will always be lower case,it's less likely to change if you rename,your product you probably won't change,the url,and yeah i would just prefer to do it,like that so now on this specific,product we won't have the footer,as you can see,but on all other products,we would still have the footer,so guys i hope that made sense that's,pretty much all there is to know and you,can really do a lot with this knowledge,the only thing is if you're finding it,kind of hard to remember all of this to,to remember the rules what's template,name template suffix,um i recommend using the shopify cheat,sheet okay this is from shopify.com,slash partners,slash shopify dash cheat,sheet,and here,you can find basically everything there,is to shopify liquid and this is really,useful whenever you need to do something,like this you can search for,template,and here you'll find the template object,and you'll find lots of examples for,what it outputs so template.name and,you'll see that it outputs product,template.suffix and you'll see that,outputs alternate if you are using a,template that's called product.alternate,right yeah the shopify liquid cheat,sheet is very useful lastly if you're,interested in learning a bit of shopify,theme development if you want videos,that are more about code then i highly,recommend watching this one for showing,the sku,this is a useful skill not just for,showing the sku but for any variant,information and updating that,information when you change the variant,this one on coding an accordion is also,a good tutorial that will teach you a,lot of skills that you need but in,general if you found this video useful,make sure you subscribe leave a like,leave a comment if you have any,questions and i'll see you next time

Congratulation! You bave finally finished reading how to hide header shopify and believe you bave enougb understending how to hide header shopify

Come on and read the rest of the article!