how to migrate to shopify 2.0

hello and welcome to this final video in,this series on shopify online store 2.0,in the previous videos we covered some,of the other big announcements with,online store 2.0 such as the new meta,field functionality the github,integration and the extension of shopify,cli to work with themes in this video,i'm going to talk about the new theme,architecture and show you guys how to,move a theme created with liquid,templates into the new templates as json,system,so as part of the online store 2.0,announcements shopify finally announced,the arrival of a feature they've been,talking about for quite some time,sections everywhere previously the home,page was the only template that,merchants were able to add reorder and,remove sections from,now with the advent of json templates,that functionality has been extended to,all templates such as the product,template the collection template and the,page template to name a few in the new,system templates can be of either liquid,or json the choice is yours however if,you choose to stay with liquid templates,the section functionality that you've,been accustomed to on the home page will,not be extended to the other templates,that's why in this video i'm going to,show you how to replace your liquid,templates with json templates therefore,allowing you to take advantage of this,new feature so let's get started,all right so in this tutorial i'm going,to keep things in the browser i've got,three tabs open at the moment number one,my development store chris testing shop,as usual,and in the second tab i've got the,official documentation from shopify on,how to migrate a theme to the online,store 2.0 system which is essentially,how to migrate your liquid templates,into json templates as you can see,there's quite a lot of detail here if,you want to follow along this feel free,to but i'm here to make the process a,little simpler and to show you a visual,representation of how you can move,through this process,as you can see there's nine different,steps here what i've done is i've,simplified it into four different steps,which are remove the section tags move,surrounding code into their own sections,replace the liquid template with a json,template and add in the references to,the sections in your new json template,okay so this is based off of what we,have here,obviously they're going to suggest that,you back up your theme,but,the real process starts here when you,identify and remove section references,then we move code from the template into,a section which is either adding code to,an existing section or i would say more,commonly adding code to a new section,we're going to delete the liquid file,replace it with a json template file,and then add the references to the,sections so as you can see there's some,extra steps in here but essentially this,is the process removing the section tags,because we can't have a section within a,section,and then moving the surrounding code,around those section tags into their own,sections as we can no longer have,liquid code in our templates and then,we're going to make that official switch,from liquid to json and then add in the,references to our new json template so,we're going to take out those liquid,references to sections and then add,those references in the new json,template which makes them dynamic and,therefore allows you to go into the,store editor and rearrange sections,because it's stored in data rather than,liquid and right at the end we will,start to see that so as an example if we,go into a theme that was created before,june 2021 which was when dawn came out,and this new online store system was,announced you might remember that debut,was the default theme that was installed,on your store when you created the store,this was previous to june 2021 and as,you can see here i've got a few,different version numbers here it,doesn't really matter the specific,version i'm going to click on this one,which i believe is the latest one i have,and click customize,as you can see here we have the same,theme editor that we would on an online,store 2.0 theme and on the home page at,least we can rearrange the sections add,new sections,and remove sections that are already,existing right but if we go to a,template like the product template here,you'll see that we have our section code,here but we don't have the option to add,a section and if we go in here there's,no option to remove that section and,that's because it's hard coded with,liquid templates so essentially the,benefit of these json templates is that,they allow this functionality this,sections everywhere functionality and,lucky for us it's pretty simple to,migrate a theme like this into a json,system,and that is exactly what we're going to,do right now alright so i'm going to,exit out of here,and i'm going to make my modifications,directly in the online code editor i,obviously recommend you work locally,whenever you can but for the purposes of,this video we don't really need it i'm,just going to demonstrate how we can,migrate these liquid templates to json,templates so it's perfectly fine to,demonstrate on the online store what i'm,going to do is duplicate this out,and up here i'm going to rename this,debugging,and maybe just say os,2.0,to denote that we are switching to json,templates,all right so now i'm going to go into,actions edit code and let's get started,migrating our liquid templates into json,templates i'm going to expand this over,here and zoom in just one step more for,you guys so you can see clearer,let's just recap our steps one more time,before we jump into it we're going to go,through each of the liquid templates,remove any section tags move that,surrounding code into its own section,and then delete the liquid template,replace it with a json template and then,add in those references to the sections,okay,so let's get started right away with our,first template which is the 404 template,all right so i'm going to click into,that one right now and as you can see we,have some liquid code,the first step,remove any section tags so i'm going to,i can see here that it doesn't but just,for complete mistake let's actually,search the code and search for,any section tags there are none so all,we have to do is move this code into its,own section so i'm going to copy this,scroll down here to sections,and following this convention here with,the sections i'm going to call this,404 template,this is an arbitrary name but it's just,going to be nicer because it's going to,follow this format here that has already,been set in the debut theme which is to,write the name of the template followed,by dash template okay in here i'm going,to give this a section name,404 template you can call call it,whatever you want just as long as it,makes sense and then i'm going to paste,in that code then i'm going to hit save,on that,and so that's now step two completed,and now i'm going to replace the liquid,template with a json template so that's,a two steps within one there i need to,delete this file completely make sure,you have that code stored in this,section before you do this otherwise,you'll lose your code so i'm going to,delete that,and now i'm going to recreate it by,clicking add a new template i'm going to,select 404,and i'm going to have this selected as,json not liquid i'm going to click,create template it's going to give me a,little bit of boilerplate code to work,with here and right now is where you'll,need at least some knowledge of how to,write json templates i talk about this,concept specifically in lesson 11 of my,skillshare class shopify theme,development how to build and customize,your own online store so i'm not going,to go into great detail about json,templates and the theory behind them,essentially here is the convention we,need to create a new object here with a,key here i'm going to call it main,because it is the main section that's,going to go in here,and all we need as a bare minimum inside,this object is a type attribute,and the type attribute,is equal to,the file name of the section file minus,the dot liquid okay so all we have to do,is 404,dash,template and then to complete this,process all we need to do,is to go into our order array here and,put in the section name which matches,here okay so a few steps there but it's,pretty simple we create a section object,with a key if it's the main section a,good one to use is main and then inside,that object all we need is to put in an,attribute of type which is equal to the,file name of the section without the dot,liquid and then we just add that object,key to our order array here,okay so i'll hit save on that,as you can see asset is now saved and if,i go to customize theme now i'm going to,do that in a new tab,and let's jump over to,our 404 template i believe it's under,others 404 page,and as you can see here we've got a,section for our 404 page template but we,can also add in other sections,underneath it so we could add in a,gallery randomly and we can move that,gallery above our standard 404 template,now we have a json template we have just,enabled reorderable sections on this,template and that is essentially the,process we've just done it with a simple,example which is the 404 template and,theoretically if you understand this,process you can just go through and do,all of the other templates yourself,okay so you can skip the rest of this,video now if you understand it and,you're done if you know how to do these,four steps over and over again but like,i said the 404 example was a pretty,simple example,so i'm going to go through a few more,examples to drill it home for you guys,okay so let's go through some of the,really important templates such as the,product template,okay so i'm going to,remove,these here from our tabs and as you can,see here we've got references to two,different sections plus we've also got,some additional surrounding code so,we've got our two sections here product,template and product recommendations,what i need to do is make sure this,becomes a section as well so i'm going,to take all the code that comes after,these section references,cut that,and i'm going to create a new section,and i think i'm just going to call this,product bottom for lack of a better,title,create that section i'm going to call it,product,bottom then above the section tag i'm,going to paste in that code,okay so i'm going to hit save on that,and before we remove this liquid file,altogether we just need to remember the,sections that we want to bring in we,want to bring in product dash template,product dash recommendations and product,dash bottom so maybe i'll just open,those up now so we have them,in our tabs so we know exactly which,ones to do in which order so we're going,to go,product dash template product dash,recommendations and product dash bottom,so now that we have that in mind we can,then delete this liquid product,template,and create a product template again but,this time in json,so i'm going to create that template and,here's where we link up those sections,so here i'm going to go,main again,and then here one attribute which is,type which of course equals the,file name of the section minus the dot,liquid so product,dash template,then i'm going to create another object,here which i'll call recommendations,open up that object,and then again type which is going to,match this which is,product,recommendations,and then our final object here which is,bottom,again type is equal to the file name,minus.liquid so it's just going to be,product,bottom,all right so now we have to just add,those to our order array so i'm going to,go main,comma,recommendations,comma,bottom,and that should be that,so i'm going to hit save on that one,it looks like i've misspelled that i,think i put in an extra m there,correct that and hit save and looks like,we're all good and now if i go to,customize theme to verify that that has,come across correctly,and i go into,my product template here,i need to refresh,to grab that new product template,sometimes there's a bit of a delay here,but refreshing should do the trick and,then you can see we've got our default,product template there,so now you can see our product template,is just like it was beforehand it all,works fine we've got our three sections,here,but now we can rearrange them so we,might want to put recommendations above,the standard product template which is,probably not a good idea and we can add,new sections rearrange those sections,and remove those sections all through,the theme customizer all right so i'm,going to move a bit faster through the,other ones here as we've already,demonstrated the concept so i'm going to,go,with the next template which let's go,with collection,so here you can see it's just one,reference to the collection template,which is already in a section so we can,delete this file we don't have to go,through the first two steps and all we,have to do is create a collection,template,in here give the object a key of,main,just like we've done before,and then for type,that's going to be equal to the section,file name minus the dot liquid as i've,said time and time again which i believe,was just collection,then in our order array put in main,hit save on that,let's test that one,click up here to find our collection,template we're going to need to refresh,click into here collections,default collection,and there you go we've got our,collection section there and we can add,new sections and remove those sections,okay,so essentially that's the process maybe,i'll do one more for demonstration,purposes the product one was pretty,complicated,as far as examples go,but um let me see if there's another one,here that i can show you,all right here we go the article,template seems to have a bit of,surrounding code,let me search for section references in,here,okay here you go we have at least one,section reference,so we've got,article template,so this one's a bit of a trickier one,because we've got code that sits above,it and below it okay so,what we could do is move all of this,into this section file here and then,create a new section for blog comments,and whatever else is at the bottom of,the page,or we can create a section for above and,below,i think in this case it makes more sense,to move this surrounding code into the,section file itself so that's what i'm,going to do in this example so i'm going,to open up this section file and let's,add in that surrounding code so i'm,going to take this,we're going to have to fix the nesting,here,so i'm gonna go,in like that,and then take the other part,and put it at the end,i'm gonna hit save on that,we've got some code liquid code here,that needs to go somewhere i'm going to,take that as it relates to comments and,just put it,below here,and what i'm going to do is create a,whole new section for everything below,this article template so i'm going to,take all this code,up to,here,cut it,go into my sections folder here add a,new section,and let's call this,article,comments or article bottom whatever you,want to call it,bottom,then i'm going to change the name in the,schema article bottom,and then above the schema tags i'm going,to paste in that code,so that should still work,i'm going to go over to our article,template here and we've got our article,template sectionized into two sections,article dash template article dash,bottom so i'm now free to remove,this file altogether,and let's recreate our article template,in json format click create on that,head into here and just like we've done,time and time again i'm going to create,a object with the key of main,type,article,template,second object here of,bottom,which the file name for that one is,article,bottom,and then just putting those into our,order array main,and bottom,all right let's hit save on that one,and let's double check that that is all,working correctly,if i go into my customizer here,head into my template selector up here,find the blog post which is essentially,an article,and hit default blog post you can see,here that i've got the first section,which is posts and article bottom and,again as this is an online store 2.0,theme now because we've used json,templates i can go in here create,references to new sections remove those,and reorder them that is the power of,online store 2.0 and it doesn't actually,take that much to migrate a theme from,liquid templates to json templates which,is essentially what an online store 2.0,theme is so a lot of people are getting,caught up in the the drama of oh my god,there's this new version of shopify has,everything changed not really we can,simply move our liquid templates into,json templates and get the same,functionality as any online store 2.0,theme so if you want to upgrade to 2.0,you don't really have to create a whole,new theme you can simply migrate your,existing theme to online store 2.0 we've,obviously got some other templates here,like blog and cart,these ones look pretty simple they look,quite similar to the situation we had in,the collection template but i encourage,you to go through,change all of these update these to,jason and let me know how you go if you,have any issues leave them in the,comments below but that is essentially,the process and if you're lost at any,stage of this process obviously have,another read of the documentation but,for me it's four simple steps we need to,remove those section tags remove any,surrounding code,around those section tags into their own,sections,replace the liquid templates with a json,template and add in those references to,the sections in your new json template,your store will look exactly the same,but the difference is when you go into,this customizer now you will have the,ability to add new sections remove those,sections and reorder them all through,the customizer which is something we,never had as a possibility using liquid,templates before june 2021 when online,store 2.0 was announced,so that's it for today's video i hope,you enjoyed this video series on online,store 2.0 again a reminder for my,skillshare students,all of these changes have been addressed,in my three shopify classes via,additional videos that go further in,depth on the shopify cli for themes and,the new json templates,if you learned something new today i,encourage you to leave a comment and a,like on this video,and i'll see you on the next one

Congratulation! You bave finally finished reading how to migrate to shopify 2.0 and believe you bave enougb understending how to migrate to shopify 2.0

Come on and read the rest of the article!