Shopify Dev Tips: Liquid Objects to JSON

[Music]. hey everybody, i'm sam webb and this is shopify dev tips. today i want to tok about how you can take your shopify objects, convert them into json objects and then use that in your javascript. so let's get started. the foundation for a lot of complex and interesting interactions that you see across the web is usually powered by javascript. so if we take this product page, for example, and let's say we wanted a more robust product selection, well, we would accomplish that through javascript. but one of the issues you run into really quickly is that your, your liquid templates and the data you get back from those templates is detached from your javascript, and so the first thing you might look to is ajax. there's an ajax api and you could pull that data with your javascript so you can have access to it. but the problem is that that creates an extra request for information you already have access to information you've already requested. one extra request isn't that big of a deal, but throughout the life of any build you know there will be one extra request here, one extra request there, and over time it becomes a lot. so by taking a proactive step in keeping the number of requests down, your- your website will run faster for longer. shopify has thought of this and they've added in a json filter to be able to convert those shopify objects into json. so let's take a look at how you can access that. so i'm going to create a snippet and i'm going to name it object data and i'm going to render that snippet in theme in the head. so back in our object data we're going to make a script tag. i like for my javascript to be contained. so i'm going to create an immediately invoked function expression and basically what's happening here is we're creating a function, then we wrap it in parentheses so that it's uh, evaluated and then we call it with these second pair of parentheses and that will run everything within the function body. i'm going to add window dot- object data equals window dot object data or and empty object. and what this is doing is is basically saying if object data already exists, just you know, assign it back to itself and don't change it, but if it doesn't exist, create a new object with that name. and this is where we start mixing our javascript with our liquid. so i'm going to say if product. then we're going to say window dot object data. dot product equals open closing double curlies and we're going to say product and filter json, and what this filter does is json filter. it takes the product object and converts it to json and then returns that which will be then assigned to this product. if i refresh the page and i inspect, we'll see that we have object data, dot, product, and that has all of the product data. so it's got whether it's available. it's got the content- uh, a bunch of information, the images, the variants, right? this is where we get into product selection and it's got all the information about the variants. and because if we go back to themeliquid- right, because we added this in the head right here and our theme javascript isn't run until the end of our body- then that means in our normal javascript we'll have access to to this object and be able to pull data when needed, go into scripts in themejs. i can hop in here and say: consoleinfo- object- dataproduct. so now, as you see, in our javascript we have access to this product information and this will allow us to be able to use that data to make more complex features without having to make requests for this data. this is not only useful for products, but it's useful for blogs and artikles, it's useful for collections and so anytime you feel like you need data that would usually be on the front end and you want to make, and you and the first thing that comes to your mind is to make a request to the ajax api. just think to yourself: is it possible for me to get this information from the liquid before you go in that route of ajax? thank you for watching this video. if you found it helpful, make sure you like, comment, subscribe and hit that notification bell and i'll see you next time. [Music] you.

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 tok 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 partikipate 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 aesthetik section and we included in both templates- and these statik 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 statik 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 com.

More:shopify test mode

Shopify Theme Build: Simple Cart Page - Episode 8

hey everybody, i'm sam webb and this is part eight of my shopify theme build series. today, we'll be building a simple cart page. so let's get started now. where we left off last time was setting up this, uh, this product page here, and we have this add to cart and when you click it, it adds the product to cart and it takes you to the cart page. as you can see, we haven't set anything up for the cart page, so although the items are in your cart, you just can't see them. so we're going to change that today. similar to other features we've built, we're going to need a few pieces of shopify documentation. first, we'll need the cart object, which is the object associated with the cart page automatikally, and if you look at the things that are covered on this page, you'll see that we have a cartitems value, and that value returns a list of cart items, also known as line items, and so the second piece of documentation we're going to need is line item documentation, and this object contains all of the information associated with a partikular line item. so this is similar to other pages. right, we get the documentation that's associated with that page or that's associated with whatever we want to build on that page and we just keep these open so that we can refer back to them when we need to. the last piece of documentation isn't an object, but it's the actual documentation about the cart page. there are some things that are specific to the cart page and we're going to want this documentation open just so we can easily refer to some of those things as well. so the first thing in here is: we've got the template that we need to use is called cartliquid. if we go over to our code, you'll see that in templates we already have a cartliquid file and i have that file open. also, since i know that i'm going to use a separate file to to contain the html for line items, i've created a snippet called line item. so to start out, let's add a little html and so if we go back to that cartliquid documentation and we scroll down, we'll see right here that we've got this form and it's a pretty simple form. it's just a form that submits back to the cart page and it's a post method. and you see, they've got this abbreviated code here where you'd be looping over the cart items and then after that you would have a submit button. now, in this case, i've already written all this code, and so instead of going through and writing every line of it, i'm just going to paste it in and i'm going to explain what's happening. so we start out with that same form that we just saw in the documentation. it's got the action that submits the cart, and it's got a post, and then we just gave it a class- uh, just for our own styling purposes. and then down here i've got this div that has this, that same loop right, it's looping over car items. and then we've got this line item snippet which is currently, which is currently empty, and it takes in the line item. so that's going to list out all of our line items. and then down here we have the total right here, which just shows the total price. and then we've also got two buttons right: one button for updating the quantity and one button for checking out. as you can see, both of these buttons are submit buttons. the only difference is the one for updating quantities doesn't have a name associated with it, and the one that is supposed to take you to checkout does have a name and the name is checkout. so if i go to the front end and i refresh the page, we're not going to see the line items because again, that line item file is empty. but we will see the update quantities button, checkout button in that total price. so now let's get the line items displayed. so in the line item file, similar to the other file, i'm just going to paste in all this code and then i'll walk you through it. and so i've got this split up into kind of the left side and the right side of the line item. so if we look at the left side, that's where pretty much all of the information about the product will be. so first we've got the image and we can pull that using line itemimage, similar to how we can pull an image from sections, how we used before, or how we would pull the featured image from a product, something we used before. so it's, it's the same thing, this, just it's called image on the line item. and then down here for the title, we're using lineitemproducttitle and so the line item keeps a reference to the product and the variant that added it to cart. and so when we do line itemproduct, this product is the actual product object and then we could go back to the product documentation and use anything from from that documentation. in this case we're using the title. next, we're looping over the line items options and we're using options with values. here, and what this will return, or what options with values, is it's a list of all of the uh option and value, uh connection, those key value pairs. so, right, it will be. you know the name, size and the size of the item of medium, right? so the option would be size and the value would be medium, and so we loop over that and it gives us an option object, which then we can pull optionname and use that and then optionvalue. so then down here we've got a line itemfinal line price, and that's the price of all of the items, like the entire quantity of that. so say that you have an item in your cart and it's 30 and you have two of those items, then you know this price would be 60 instead of you know that 30.. and then, finally, on this left side, we have this input here, and so let me go back to the documentation, and this is the documentation on updating quantities. so, on the line item, we're going to want to put this input here, which the important things here are: the name, and the name should be updates, with the square brackets after it and then the value needs to. you want that to show whatever the current quantity is. and there's a second thing that's needed. uh, we need a button for updating the quantity and this and this. this uses the input as the button. you're also able to use the button tag, which is what i'm using on the site. so back to the code. looking at, we have that name updates and then we have that value which is linearquantity. if i close the left side and open up the right, now in here we've got the remove button and this requires this specific href here. so slash card, slash change with a question mark and then line equals and this is going to be whatever the line number is. so usually you'd be looping over with a for loop and it would show the index. now, since we're inside of this, uh, the snippet, this for loopindex won't work properly and we'll get to that in a minute. but then we also want to pass in the quantity of zero, which will remove it from the cart. so what we're doing is we're updating the quantity of a specific line item to be zero, which means it's removed from the cart. now the fix for this: we're going to go back out to cart dot cartliquid and we're going to add index equals for loopindex, right, because this file is where the for loop is happening, not within this file, and so i just want to make sure we have that index. we'll update the comment as well as add that in here, and there's documentation for this as well. so let me show you that if we scroll up a little bit, it's right here. shopify is omitting, you know, the actual line item code here. but but in your line item code you would add this anchor tag with the, you know, with this specific information, and then clicking that will remove that item from your card. so now let's have a look at the card and let's test it. if i refresh the page now, you see that we've added all that and i've gone through beforehand and added a bunch of styles of this just so i don't have to do that during this video. so, as you can see, here's the product we just added a little right at the beginning of the video: this heather girlfriend material crop sweatshirt and let's let's look at updating the quantity. so let's update that to three and then hit update quantities and, as you can see, the it refreshed the page and

More:Shopify Backlash |Dealing With The Negativity Of Dropshipping

10 - Shopify Store 2.0 Section & Schema Explained

hey, welcome to another video. in this video we will tok 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 indexjson. so if i open my theme in here, inside the templates, we have all this template called json404- artikle block card collection and this is the index. indexjson 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 tok about your brand, all these more information in here- all of them will be stored inside this json file in your theme indexjson. 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 automatikally 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 i.

How to integrate your product in 3D and WebAR on Shopify - Sayduck

hello and welcome to the zeta platform guide. in this video i will show you how to embed the setup 3d viewer to your shopify theme. i will be using the dbot theme for this video. let us begin first we need to create a product. i will just create a simple channel and then i get an image. i will add the image here. then we'll just mark that active and we have our created. then next step is to go to your store and edit the code. you will have to find this product template, liquid. it's located in the sections. from here we can find the media position. so here we can just test. we can just embed the 3d viewer right here, save and preview. as you can see, the 3d viewer is pasted here, but we also have the product image still here. so to one way to remove. this is what we use in the guide, which allows you to paste the 3d viewer to the website and then if the product lacks the meta field, then it will not be displayed. now i can show this here. so for that we need to take this and position it after the media's here, and then we'll add a if parameter here that states that if this product is missing the meta field data, it will not show the 3d viewer. here we will add, obviously else and and let's save that and preview: perfect, now you can see. there's only the product image. then we will have to go to the apps and for this i will use the meta field guru. you can use any app or any meta build app found in the shopify store. this is just an example to them. in the field you have to input, key the name and then the product uid. assigning the meta field to product allows us to know which 3d viewer to display in which product. let us save and go back to our store. let's return to the product and code and you can see here it's still. and when we now preview this, you can see the 3d viewer. this is because the product has a uid number. but if we leave it like this, it will always display the same product because we have the same uid number here. so we have to adjust that to the meta field code that we just made and it will mirror something like this: perfect, and then we just save and preview. thank you for watching. if you have any other questions, just let us know.

Shopify Design Tutorials The blog liquid and article liquid templates

hi, this is kier from shopify. today we're going to have a look at the templates relating to the blog functionality in shopify. first of all, it's probably important to have a look at how blogs work within the admin and hopefully that will give you a good idea of how the templates relate to it. okay, so i'm in my shopify for designers demo store and i've just logged into the admin here and on the left hand side down in the navigation you'll see we've got something called blog posts, so i'm just going to click on that. this is where all the different posts for our numerous blogs- you can have more than one blog effectively within shopify- would be listed. first of all, let's have a look at manage blogs now. a blog in shopify is effectively a a bucket for content relating to a partikular theme. so we already have a blog called news, but equally we could create a blog called, uh, new products. so let's create one already called new products and i'm just going to add in the title here, new products. i don't have a feedburner url for it, so i'm just going to leave that. now you can have comments within shopify blogs. some people use those quite a lot and some people don't, for the sake of this demo. i'm just saying comments are disabled. then we have our seo controls. this is very similar to pages and products and that kind of thing, and you'll notike that we also have control over the handle that we can use. so all the posts relating to this partikular blog will be available at slash blogs, slash new products, and that's all well and good for this demo. okay. so now if i go back to blog posts and i add a new one, you'll see that we have a new screen here and a few things to fill in. so, let's say, new coffee grinder now available. the newest member of our range is now available. okay, so we can add an excerpt if we wanted to as well. this is just another option for pulling out a short piece of information within our templates. we'll leave that blank for the moment. now i can pick off the author. if there were multiple authors there, i could select who did it. i can also pick off the news or new products blog. now i want this to be in our new products blog, so i'm just going to click on that one. i can change the publish date accordingly. i can add in tags that we could use for further categorization, if i needed to, and again, further down, the seo controls, the page title and description and our visibility as well. now i'm just going to save that out and view that in our store now, as you can see, this is our blog post: new coffee grinder now available. we've got a published day, which is today, the day i'm recording it, and then the content and, as you can see from on your url here we've got slash blogs, slash new dash products and then a unique reference for this partikular blog post. okay, what if we wanted to add a link to our new products blog? well, that's also pretty easy to do. i just want to add that into my main menu. so i'm just going to go to the navigations tab, click on main menu, add a new link. now i want to call this blog and then new products. you'll notike that. i've already got one for news, so let me just do this. okay, that's the title. i want to give it the link name. now i pick up a blog and i select new products. right, let me go back to my website and go to the home page here. now you notike that. we've got a link to our new products blog there. now, if i click on that, you'll notike that this partikular template will list all the artikles relating to the new products blog and again, if i click on that link, we get back to our blog post. so if you followed that, hopefully you'll realize that there are basically two templates that we're rendering there. there's a template that lists all of our posts and then there's a template that actually displays our artikle. okay, let's go back to the text editor and have a look at which templates we have to play with. so i'm just going to open up my theme and open up the templates folder. okay, uh, it just happens that they're alphabetikally next to each other, but the the first one is artikleliquid and the second one is blogliquid. these are the two templates that we have to control those partikular views within our front-end themes. let's start off with blogliquid now. blogliquid is the page template that will get rendered when we click on this partikular link. so if we click click on the link to our new products blog, this is the blogliquid template that's being rendered within our themeliquid layout file. as you can see, it's just a list of an ordered list, unloaded list, i should say, of the blog posts available. if we had more, these would obviously go down the page. so let's have a quick look at that template. okay, so the top: here i've got an h2 followed by the word blog and i'm outputting the blogtitle. now this will be specific to the partikular blog that we're looking at. so in this case it's the new products, but if it was the news, then it would be uh, that it would say news as opposed to new products. then i'm using some liquid logic here. you'll know this by looking at the curly brace and the percentage. i'm using a for loop. so what i'm actually saying is for every artikle. now this artikle is just a container, we could call it whatever we wanted, but it's just a handy term for this partikular instance in blogartikles. so, reading backwards, blogs have many artikles, so blogartikles- we're going to put output a list item here and we're going to output the artikleurl within our href and the artikletitle also within our href there and we're just going to close off the anchor and the list item and once it's got to the end of that list, we obviously have to close our end for and our unordered list. so that's really really simple and as a result of that partikular template, this is what happens now. just to show you that it's not specific to the new products blog. i'm just going to click on the news blog here and you'll notike that this one actually says news and we have a different post here called first post. so if we click into our new products- uh post here, this will actually be our artikleliquid template. now if i go back to that in my theme, you'll notike that all i'm doing here is outputting the artikletitle. i don't have to do any loops here because it's a single artikle. i don't have to loop over anything, i'm just accessing the individual post data. effectively, i'm also putting a paragraph element here with artiklepublished underscore out and i'm using the date filter and then putting the day, the month and the year there. that will get replaced by the data from the shop. you also notike. i'm now putting the artiklecontent. now i don't have to wrap that in a paragraph element, simply because the wysiwyg editor- that's not the easiest thing to say, the wysiwyg editor- will insert those for us. likewise, any images that we want in our posts will get inserted that way, so we don't have to worry about them. okay, that's the two main templates that we have access to for our blogs. you can extend it slightly further, if you wish, by having specific artikle templates. and again, if you've watched the pageliquid tutorial, then you'll notike that this will be really, really similar way of doing things. all i'm going to do now is just create a new file. i'm going to copy in the markup that we have for our artikleliquid page and paste that in, but i'm actually just going to put in the word video at the beginning. this is just so that we can demonstrate here how you can have a specific template for a specific purpose. okay, so i'm just going to save that and what i'm going to do is going to call it artikle dot. video dot. liquid and save that in the templates folder that's now uploaded. and if i go back to my admin and i create a new post, let's create a new post. um, i'm gonna call it new video to watch. please watch our new video now. i've not done anything special with the markup for this partikular template. it really is just to show you that you can have different templates for artikles within the blogs. obviously, that could be differen.