how to use alternate navigation liquid in shopify

hi this is care from Shopify in this,screencast we're going to have a look at,layout files I'm just going to open up,Safari I've got a test or kids test shop,set up already and a very basic starter,theme installed there's no styling going,on here and very minimal markup just so,we can see what's going on so I'm just,going to open up the editor by clicking,the three dots and edit HTML and CSS and,yeah we're going to have a look at,layouts so the layouts can be found in,the layout folder it's the first one,that you'll see in the sidebar here,you're not familiar with layouts the way,I like to describe them is there's a,master template for your entire store so,anything that's repeated throughout the,site such as your you know doctype head,maybe your navigation your side by your,footer can all live within the layout,file and what happens when Shopify,renders a page depending on the URL it,will know which type of template to,render within this layout file and it'll,do that when it encounters this,placeholder here content for layout so,let's say we're on a product page,Shopify would know this from the URL,structure it would grab themed liquid,and at the point where encountered,content for layout we'll go and grab,product or liquid or an alternate,template if that was specified as you,can see in this example there's quite a,lot going on we have some if statements,around the formatting of the title,you've got some descriptions we've got,customized ID and some classes that,we've created depending on the different,templates and so forth,apart from that you'll see that we've,got a header here with some cart,information a heading one just for the,shop name and some very very basic links,to output from a link list and what this,enables us to do is if we want to edit a,change then we'd like that affected,across the whole site if it's in the,layout file we only have to change it in,one place which makes maintenance very,very easy two things that you do require,to make a layout file valid for a theme,the first one is another placeholder tag,called content / header and this allows,the platform to inject things like,logins if you already logged into the,admin you'll have a bar that you can you,can log back into the admin from the,front-end and analytics and that kind of,stuff and as I said earlier the second,one,is content for layout this allows you to,position the provide the space therefore,the the templates from the templates,folder to be injected but what if you,wanted a different page a page that,wouldn't necessarily adhere to the,mark-up that you've got within the main,layout theme a code where you can,actually create an alternate layout file,in a similar way as you can alternate,template if you're in the admin here,it's very very simple to do you can just,go add a new layout and we can create it,from one that we've already got we've,only got one which is the default theme,so we will call this alternate and we,will create it so at this point it will,be identical in nature but let's say we,don't want for whatever reason the,navigation and the header to be included,in this one so we're just going to take,those out now once we click Save nothing,really is going to happen we actually,need to specify that this alternate,layout file be applied to a particular,page so let's sir have a look at product,or liquid now in order for us to specify,that this particular layout file is,applied as opposed to the default all we,need to do is set open up some liquid,code and then type the name of the,alternate layout file without the dot,liquid extension okay so I'm just going,to save that now it's going to open up,the store here in the de valera tur as,you can see this is just the home page,very very difficult on so I'm just going,to go to the catalog and have a look at,the big breakfast special now you can,see here that none of that site,furniture that I mentioned has actually,been rendered that's because the,alternate layout file has been applied,so we don't actually have a way to get,back to the home page and but I'll just,use my mouse to do that and if we browse,around the site you'll see that,everything else has the default applied,and we go,to that you'll notice that that,particular one doesn't so that's how,easy it is to apply an alternate layout,file now you could also specify and,there may be occasions when you would,want to do this that no layup file is,applied let's say for whatever reason,you were rendering your collection to,JSON and you can do that in liquid but,obviously that's not going to be very,useful to you if you've got all the,wrappings of a layout file in there as,well so in order to and have nothing,applied in terms of layout to a,particular template you can just type,layout none so let's have a look again,and go to the catalog and if you,inspected the code there you would find,that that would literally just be plain,markup in actual fact let's go and do,that let's go to the store let's go to,the catalog big breakfast special so if,we just go to the develop menu and go,show page source you'll see that the,only content we have in there is the,HTML from our product da liquid template,we don't actually have any of the,wrappings of the layout file that we had,previously,so that's layouts in a nutshell very,very easy to use really really powerful,give you lots and lots of flexibility a,use case often that you may come across,for an alternate layout file there would,be something like a splash page for a,particular product or promo where the,market that you have for your main theme,liquid just isn't suitable you want to,take a lot out and you would end up,hiding things in CSS which really isn't,the best way forward so yeah you can use,these in a variety of ways and they're,very very easy to do if you are using an,editor of course it's just a case of,creating that file within the editor,giving it the appropriate title and then,synchronizing it with your store I hope,you found that useful thanks for,listening

Congratulation! You bave finally finished reading how to use alternate navigation liquid in shopify and believe you bave enougb understending how to use alternate navigation liquid in shopify

Come on and read the rest of the article!