how to create a new section in shopify to read liquid

hi everyone Jung here let's pitch Appa,Phi and today you will learn everything,about how to get started with Shopify,sections and how you can use them to,create new settings and new features for,your front-end customizer so you're,about to learn one of the key concepts,in Shopify should be a lot of fun let's,go all right as a starting point for,this video I already went ahead and,created two new page templates the first,one is called landing page one the,second one is called landing page two,and this is just a mock-up that gets,auto-generated when you create a new,page template then I went ahead and,added two pages page 1 and page 2 and I,applied these templates to the pages so,page one gets landing page 1 page 2 gets,landing page 2 and we could also view,these pages in the live customizer right,now they look super plain and they don't,have any settings in the live customizer,next I will go back to my theme files,and now I move through the sections,folder and in here we can create a new,section and maybe we can call it icons,with text create section and this will,generate some code for us as well but,you can remove everything except the,schema tag because right now we will,focus on that and you don't have to,worry about anything in here this is,just some data written in the JSON,format but we will get to that in a,minute for now we can just give it a,meaningful name and we can give it a,different name from the file name so,that you can see where the file name met,us and where this one will come into,play so for now we could do icons with,text above or something and then save,the new section and for now we can leave,the section as it is but we will include,it in our landing page templates so,below the page content I will do a curly,bracket followed by percentage sign and,then section and now the file name,matters so icons - with - text and,there's no need for the liquid extension,and then percentage sign curly bracket,and I will just copy this save the fire,and edit to the second landing page,template as well,after a quick page refresh on the,front-end you would already see our new,section icons with text above available,in the customizer but right now the,settings are empty because we didn't add,anything but I hope you get the idea,that the schema tag or more precise the,JSON data within that schema tag is,related to what is being displayed in,the customizer and now we have to talk,about Jason a little bit more okay so,first of all Jason stands for JavaScript,object notation and that means it's a,structured way to write out objects and,in the real world you all know what an,object is but in the context of,programming an object in the simplest,form is just a meaningful collection of,data and to introduce you to this,concept I prepared two examples and the,first one is the object student so we,would start with a pair of curly,brackets to enclose at the object and,now we have to think of a set of data,that would represent the student in a,meaningful way,and most likely the student would have a,name it could be Johnny and he might be,18 years old and his student ID might be,one two three four five and he would,also have a collection or an array if,you want of different subjects and a,collection is always indicated through,these square brackets while the object,is indicated through these curly,brackets and maybe he would participate,in math English and biology so what we,are left with is the object student,notated in the jason formed but let's do,one more and the second example i,prepared is a little bit more related to,Shopify and e-commerce so we have the,object product and we start with a pair,of curly brackets again and now the,product might have a title could be,t-shirt maybe a weight 200 grams but,then a product would also have a few,variants so a collection of variants but,these variants might be objects,themselves so we could have one object,for the red variant and it might have,the color red and the price 10 then we,would have one object for the blue,variant maybe color blue and price 11,and the color green and price 9 so you,would see now we have a collection of,different variant objects but everything,else stays the same like in the first,okay so now we have to transfer,everything that we've just learned to,Shopify and as you can see we have a,pair of curly brackets and in between we,will have our new section object and,every section is represented by a name,icons with text above in this case and a,collection of different settings but we,haven't added any settings yet so this,is the next thing we will do and every,setting itself is described with at,least three parameters so I will create,a new object a setting object and the,setting is described through the type,for the first one we could choose text,and then we will also need a label this,will appear in the customizer so this,one could be your headline for the,section and the third parameter is an ID,so that we can later uniquely identify,this setting and for now we could give,it the ID heading let's add another one,so I will add a comma and then a new,pair of curly brackets for the next,setting object and this one could be of,type let's say rich text so that we can,see a difference and the label would be,maybe your description your description,and we could give it the ID description,okay I think we can save this and after,another page refresh on the front end,you will already see the magic happen,because inside our section we should see,two new settings one text field and one,rich text field and we could now enter,some test values maybe test and lorem,ipsum some nonsense text but what you,would see is that these values never,appear on the page itself so the,question becomes how we can reference,these values and that's what we're,working on now and therefore we jump,back into our section fire and on top of,the schema tag I can define some HTML,markup and for simplicity we could just,add a heading level 3 and in between I,want to render the headline so I will,drop into liquid and reference the,second object section settings headache,so this is the section object we access,the settings and I want to access the,setting with the ID heading simple as,that,and right below we could add a paragraph,for the description so now I I will need,to render section dot settings,dot description let's save it and give,it a try and after the next page refresh,we would see that our values do appear,on the front end and we could even,update the value life but there's one,thing I want you to note and that is,that on our second landing page the,value would be exactly the same as on,the first one and that is due to the,reason that we implemented our section,as a so-called aesthetic section and we,included in both templates and these,static sections can only have one global,value and the counterpart would be a,dynamic section we will get within a,second but before I want to show you,something else because right now we only,have two static text fields but what if,the user wants to upload a few images,but I don't know how many then I would,need to make this extendable in some way,and therefore I go back to editing our,section fire and now I will add some,dynamic,locks to our section and this will be a,collection of blocks again and a block,is defined through a few properties so,it will have a type we could give it,let's say image for now and it would,have a name we could just name it image,block for now so you would see where,this appears and the block will have a,few settings on its own so a block will,have a collection of settings so you can,see this can get nested pretty quickly,and for the sake of simplicity we will,only add one single setting to this,block so new settings object and the,type will be image pickup image,underscore picker then the label could,just be your image and the ID would be,image let's say save it and now we check,the front-end to see what that does and,now you would see that we have a new,component here that says add image block,and we can add as many image blocks as,we want and for each of these image,blocks I can select one of the uploaded,images I don't know where these are,coming from but we can select them for,now so this one this one and this one,and now we will put these out to the,front end as well so on top of our,section file we can now add a for loop,so let's do for every block in our,section blocks and down below we will,end the for loop and for so for every,block we want to output an image element,and the source of that image element,should be equivalent to the block dot,Settings dot image and this would,actually only return an image object but,what we are interested in is the image,URL because an image object has a few,different things,aspect ratio hide with URL and,whatsoever so I will apply liquid filter,on that image URL and for the size we,will now just create the master image,save it and then you would see that,these icons get render to the front page,and even if I add a new one this should,appear in a dynamic way how cool is that,the next powerful thing I want to show,you right now is how you can turn this,static section into a dynamic section,that you can use on your home page,because right now you would see that our,section does not appear on the,customizer if you visit the front page,and actually that's a very easy thing to,do we just go back to our section file,and at the bottom we will add a new,parameter which is called presets and,this would be a collection again and the,presets object is very simple we will,just give it a category and the name so,we can start with captain Goree,we could just type image here it doesn't,really matter what you type in here and,the name would be let's say I can put,text then we can save this,and now you would find our new section,right in the front and customizer so its,icons with text and you could add this,section as many times as you want I,already went ahead and edited twice and,now I can drag and drop it around on the,page and all the sections are,independent from each other so this is,purely dynamic and now our new section,would require some styling but I wanted,to keep this tutorial as lean as,possible so you can easily follow along,and I think by now you have a solid,foundation to start building your own,sections but before we bring this video,to close let me give you my three best,advice on how to work with them so first,of all I will add a link to the video,description where you could read about,all the different types of settings that,you can add to your new section so in,this video we use text rich text and,image picker but actually there are a,lot more for example we have color,picker range slider dropdowns checkboxes,and here you will get a good overview,the second advice is to use an editor,with better formatting and better syntax,highlighting so for example I like to,use Wizards to your code and if I would,have the same file in here I could just,highlight all the JSON code and I could,just beautify the selection and I will,get cleaned up but actually I used the,Shopify,editor so everyone would be able to,follow along but usually I would use,Visual Studio code the third advice is,maybe the most powerful I can give you,because whenever you're writing some,JSON by hand it is very likely that you,make a mistake at one point so for,example I could just forget the comma,right here and maybe the quotes right,here and once I try to save this file,shop if I would just say me okay it's,embedded Jason but it gives no clue or,no hint on where to look for that error,and now it gets pretty hard to debug,that scheme attack so I would just copy,all of it and then I would bring this to,a Jason validator and this one is pretty,good I will link it down below,and here you can just invalidate your,Jason and it says okay there's a problem,in this line so I will add a comma right,here and then he says okay there's,another problem in this line and I will,see okay I missed some quotes and now it,becomes valid Jason so I can easily,bring it back to my fire,and now we'll save it and you can see,without an error we get the essence,saved alright that's it for today's,video,and I really hope you learned something,new I can imagine that this was quite a,lot for the short amount of time but,just let it sit for a while and if you,have questions you can always ask them,down in the comment section if you,enjoyed the type of content feel free to,subscribe to the channel and for me it's,time to get outside the house because,the weather is beautiful today I hope,you have a good day too and then I see,you in the next bye

Congratulation! You bave finally finished reading how to create a new section in shopify to read liquid and believe you bave enougb understending how to create a new section in shopify to read liquid

Come on and read the rest of the article!