what is shopify sections

hey welcome to another video in this,video we will talk about shopify theme,sections and schema so in this video you,will learn how all the sections are,generated how all these settings are put,together and where the data for this,setting will be stored so let's give it,a try before we just check the code here,we have a section called announcement,word which that our down team already,have it we have a section called header,we have a section called image banner,and if you click on any of them it will,have a sitting in here for example this,announcing bar does not have any seating,but if you click on the header it has a,lot of settings in here for example you,can upload a logo you can change the,size of the logo you can position it,anywhere you want all of them are,settings in this sections,and if you check the announcement board,inside this one you can add more blocks,and blocks will come inside the section,if you check the documentation on,shopify this is where you find it you go,to overview,in here they will explain what a section,and what is a schema section is this,block and inside the section you can,have blocks as many blocks as you want,currently there are some limits like you,can have only 16 blocks inside one,section so if i come back to my team in,here i can change like add more blocks,in here what is good about this it is,going to add repeated data in here,why it is useful sometimes people put in,here free shipping to this part of the,country or free shipping over this,threshold or they put a discount code in,here that's just an example but for now,i'm going to just undo all the changes i,have done in here,this is one section this is another,section and these are rest of the,sections you can add more dynamic,sections in here when you add this data,it will be stored inside the index.json,so if i open my theme in here,inside the,templates,we have all this template called json404,article block card collection,and this is the index,index.json will save all the data,that you put in here,for example if you have this rich text,all this text here this is the talk,about your brand,all these,more information in here all of them,will be stored inside this json file,in your theme index.json so if you come,here and add more of this so for example,you add a image banner in here,it will add another data to this,json file in here and it will read those,data for you it will render it so where,this data is coming like where you put,the structure,that structure will be put inside the,section schema,so let's give it a try and see where are,where where are those schema and,as i explained here you have this,announcement bar let's check out the,code behind the ena server that way you,will understand it better so i'll open,the announcement button here,and this is the code for the,announcement bar not a lot of code but i,will explain it here,here you will put all your html code you,can remove for now all of this but i'm,not going to remove it so here's the,thing,if you scroll down this is the schema,the screen the schema attack is a liquid,tag that will contain an object this,object will be the structure,of this section the structure for all,those sitting,so if you see that the name this is this,is going to be the name,and all this text is inside the,translation if you want to find out what,is the name i don't know why shop will,make it too complicated to go inside the,translation but you can find it here,uh,scrolling down this is the let me find,the default one,uh it is not the default because these,are the other languages,i don't wanna go uh we should find the,english version of this,this is the en yes the default if you,check,add,the same thing that go here it says go,to translation go to sections go to um,announcement bar,get the name and display it in here so,this is going to be announcement dot,name it is called announcement bar you,can directly name it in here i don't,know if this is a requirement for,shopify to put it in a translation for,the themes that you submit but i,normally call it announce,announcement bar something like this,this is much shorter you can even limit,how many blocks you can you can have,inside it if you put it three is you,cannot add more than three blocks inside,and these are the blocks currently we,have one called,uh announcement announcement board when,you add in here it is going to add that,for you in here,now this is again the name will be here,again it is,stored inside this schema file now the,thing that you have to understand it,where all this,like how do you put all these settings,inside this settings you can have a text,field you can have a select box you can,have a color option you can have an,image speaker all of this will be,rendered like a sitting inside the,shopify,theme customizer so you have to,understand,how you put all those data if you come,to this schema,schema will have a type,you have the settings inside the setting,you will have different options so if,you click on the setting,for example if you want to have a text,field you can give it a text and give it,a unique id also a label and it will,render,a text input like this this will be the,level and this will be the default value,for that this is called schema schema is,what,all this sitting is about and if you,want to add more sitting you can add all,these settings in here if you want to,access those settings,you just come to your,html block in here using the section,dot blocks you can access since this,announcement board does not have any,seating,you can see it only have blocks,then you do need to use the,the section uh sitting in here but you,can add some sitting now i will comment,i will undo all these changes that i,have in here i will save it let's give,it a try and add some sitting so i'll,open terminal i will run the shopify,team serve now i should serve my team on,the development environment,might take some time but this is,basically what you do,also when you do this it is going to run,based on a localhost this is the theme,customizer which we can open let's click,on this this is where it will open i'm,going to close the other one probably we,don't need this,this is the theme customizer okay let's,add a sitting to this announcement bar,as i said currently it does not have any,seating so we will come to the schema,above the block or anywhere like after,the blocks you can put you can call it,settings and settings is going to be an,array,now inside this sitting you will have,objects different objects for example if,i want to add a text field just write a,text field and let me just auto complete,because i have a snippet i am also using,an extension so after like adding this i,will show you my,chrome extensions also so here we have a,type of text field,give it an id i will give you the title,and how about the level i will give it,also label of a title and with this,default value information placeholder i,will remove it for now just cleaning up,a little bit,now let's save it,once you save it should automatically,upload it to the shop file it should,sing it now let's differentiate and it,should you should see a setting in here,if we did everything correctly,we refresh our theme,here is the title,this is how easy it is,the same thing you can add let's say a,color picker or an image for example,if i write image speaker in here,this type is very important the type,should match the shopify requirements so,this is image speaker you cannot have,your own like you cannot say file picker,you cannot upload files in here but this,is unique so if i call it i give it an,id of image,and let's call it,test image i'm going to clean up,we should save it now the id is used to,be accessed in here you can access that,image in here,for now let's come back let's refresh,the page and see if we can access it,the image picker in here,yes this is the image speaker if i put a,test title this,is my title and let's pick an image also,let's pick this logo that we uploaded,long time so this is a logo that we have,in here now how do you display it in,here it is really easy now i want to,show you how you can access,this data that you have in here,inside your html so above all this this,is how you display before you want to,print the title just use this brackets,and this is how you output in liquid and,in here you can say section which refer,to this file that you have,dot,settings which refer to the object that,you have in here,and then the id of it id of any of this,field if i call it title it is going to,output the title in here for me now,let's render the image also so i'm going,to write image,in here an image stack and inside this,one it is going to give us a url so we,are going to output the image let's say,that is the logo again you can see,section dot,settings dot image we called it image,right,for now let's just put it this way okay,i'm going to do anything,this is going to up with the url let's,check out,now if i refresh it like let's save it,first,it is displaying the title but no image,okay let's refresh you might think like,if refreshing this will work but it is,not because when you are outputting this,image,image is not a url in here so you have,to apply a filter on this in the last,video we talked about shopify has some,filter there is a filter called img url,which give you an image url now it it,accept one parameter in here which is,optional you can give it a size if you,give it a medium it will give you a,medium size but if you put a master in,here it will give you the actual size of,the image or you can specify the height,and width of it for example you see here,400 x,300 it is going to crop that image for,you in that dimensions for now let's put,it as a 400 now we will remove,one of the pipes so this is the image,filter,actually it should extract the url out,of this image and display it for us if i,come here this is the localhost that is,running if i refresh it it is displaying,the logo in here and also the title here,this is side by side by the way,so it is not that the way is at the top,so this is basically how section and,schema work how you can access the data,and where those data will be saved as,soon as you you create all the sections,that you have in here,this data will be saved inside the json,file,now that is it for this video,in the next video we are going to,customize announcement bar add some more,option we will make use of television,css with some more practical example i,hope this video has been informative and,you learn how a schema and section work,and i will see you in the next video

Congratulation! You bave finally finished reading what is shopify sections and believe you bave enougb understending what is shopify sections

Come on and read the rest of the article!