How to create new Theme Sections and Blocks

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

Channel: Coding with Jan - Shopify Developer

Views: 69,570

Keywords: Shopify Sections, Shopify Blocks, Theme Sections, Shopify building blocks, Shopify Theme Development, shopify tutorial for beginners, Shopify Custom Sections, Shopify custom theme, Shopify web development, Shopify tutorial, shopify how to, Shopify, Shopify developer, shopify experts, shopify developers, shopify theme, shopify store design

Id: jzhsYMxUp8s

Length: 14min 17sec (857 seconds)

Published: Mon Mar 23 2020