Update an Old Shopify Theme with New Online Store 2.0 Templates

Orange background with gray and white rounded lines. In a gray block with white lettering it says, "Update an Old Shopify Theme with New Online Store 2.0 Templates" with text logos: The Pages Media and Shopify Experts

You can update your old Shopify theme to get the "sections everywhere" capabilities on product or collection templates, really any theme template, by adding JSON templates directly to your Shopify theme.

Whether you're a Shopify Developer or a merchant, adding Online Store 2.0 capabilities to your vintage theme can give you additional features without having to update your entire theme - which can be both time consuming and another financial hurdle.

Even when working on vintage themes, I now update most templates to be the new JSON templates because it provides merchants with better controls and options than the previous Liquid templates.

 

 

Introduction

Did you know that you can get 2.0 features on a vintage theme? Without having to update the entire theme, you can bring over the ability to add sections anywhere on that template specifically, just by creating a 2.0 template directly into your vintage theme. So, let's check it out.

Vintage Themes and JSON Templates

Okay, so I have done this before on a webinar, that I'll link directly within the description here. But basically, have this pulled up, this is Debut vintage theme. If we want to jump into the code here, I'll go ahead and open that as well. So clicking on edit code, it's going to bring you to this guy here. We'll take a look at that here in a second. But did want to call out vintage themes. This is from the help docs. So vintage is not my term. This is from Shopify that just to talk about basically pre 2.0 architecture. So again, that's where you'll find some of this info here as well.

So for now, you can see in here we've got all these liquid templates and we even have the ability to add a new template directly. And so this is in just, again, from the customizer or from your themes page in your admin, you can go in and you can actually edit code. Which you really shouldn't do unless you've done this before and know what you're doing. So be careful about this capability here. But you can see here, we can create a template and okay, well let's create a new product template. That makes sense, right? It's JSON. Great. We'll call it Updated-2-0. Done. Great. It's created a product template for us here and it's JSON. Awesome. So JSON is the new architecture format. Again, talks about it a little bit more in the docs and stuff, but we're not going to worry about that for the moment. That's basically how you know that these are different. All the liquid templates are basically the pre 2.0 architecture. They don't support all the fancy new stuff we have available to us.

But even after we've created this, you can see we don't actually have it in our templates. And even if you did a quick refresh because this is a blank document that we haven't put anything into, you'll see that we... Where is it? And it says, "Hey, this doesn't exist." And that's mainly because we didn't add anything to it. So there's no helpful filler content that comes in.

Add a JSON Template to Vintage Theme

We'll actually have to go and snag that. So I'll show you how to do that real quick. So let's start over again. From adding a product template, it's JSON, two... Oh, okay. And what we want to do then is we're going to want to go over to the docs. That's probably the easiest way to do this. So I'll link to this in description below. But basically in the Shopify theme docs under templates, they have an option for JSON templates. This talks about it a little bit more. Really great info for you to get into and stuff, but we don't really care about that at the moment.

Let's go ahead and snag the most important stuff in here and you'll see that it gives us an example. So this is perfect. So we've got this option here for what we can do and we'll talk about this here and the docs and stuff or whatever. But for now, let's just go ahead and try to add this to our theme. So we've got this file here, great. This is just copy and paste it directly over and we'll save, but we have a problem. So to kind of understand this a little bit more, this is just talking about what the name of this template is going to be. And then this is a wrapper. So this is exactly what it sounds like, it encases this template specifically. So you can use this to target specifically with different things. So I want to change this instead. So this is basically, it's going to wrap it in a DIV with an ID of DIV ID. Let's change this instead to product template, updated. Okay.

And then let's go ahead, and this little dot is going to then throw in a class. So again, let's just make it something we actually want it to be. So let's just do Product 2.0. Great. And then it also has attributes as well. So if you want to give it a specific data attribute, you could do that as well. For our purposes here, I think at least we're not going to do anything super fancy. I don't want to get into the weeds on that. So something like an ID class and Cs, this is something you should understand. So here, though, it talks about sections and it's got this main and then type. And you can see down here for this order here, it'll actually call out where that is. So you can see here pretty easily that these kind of correspond to each other. So you've named it something here.

Okay, great. So we know this is the main, and we're going to pull this in based on the type. So this is where it's actually looking for an existing section name. So before when we had the template architecture, we'd have to come in and we'd have to actually add that section in specifically. But now what we do, is just through these JSON templates. So if you scroll down here, the easiest way that I think to find this is if we open our old product.liquid file. You'll see here that it calls out product template and then product recommendations. Okay, awesome. Then we've got a little script and a couple of other things in here as well. Some extra fun stuff here specific to... This is for product data and stuff as well. So stuff we definitely want to bring over but for the purposes of what we're doing today, let's just keep it simple.

So product template here, the simple change right here. So you can see we were actually able to save this. And now if we go back into the customizer here. Let's go over to products and now we actually have 2.0 in here. So when we named it product dot and then Updated-2-0 and see here, that's going to be here. And there you go. And we have the ability to add sections. So this is super cool, right? Kind of the same thing here, just to kind of showcase the difference. We haven't done anything with collections. We would follow the exact same format here, where we'd come in and update this but to kind of show you what this looks like too, you'll see how this changes if we add a section. Let's go ahead and just drop a featured collection in here and we'll save.

And then if we come back into our code as well, quick refresh. So this is where Shopify does the thinking for you here and then pulls in all the specific settings. But this is the new section then that we added as well. And you can see here, this is the ID section, so it's not as simple and nice as main, but if you wanted to, you could name this different things if you wanted to as well. That's just in the future, again, for something that you'd want to do.

Old vs New Way of Creating New Templates

So another really cool thing about adding these templates. Before, if we wanted another collection template or something like that, we would have to jump into code, do a whole another deal where, hey, let's find our collections template and we want to create another one.

So let's add a new template for collections, then new collection. And you can see there, they actually brought that over and just basically duplicate it. So that's handy, right? And it references the section just like we want it to. And then in our code here, we'll be able to see that there's a new collection here, but there's no way for us to do this directly within the customizer. But now if you want to create another custom 2.0 template, you can see we get this button edited. This isn't just because it's under products, it's because it's a 2.0 template. Shopify can just create this for us. And so directly in the customizer, you're not having to jump in the code.

So having this one time dev gives the merchant a lot more control. So you can see here, you'll be based on the 2.0 template. So Updated-2-0-jr. I'm really clever at naming things, right? So there you go. So now we're on this new junior template. We can add a different section for something like blog posts. And you can see here under your blog posts, and it's going to be separate from our 2.0 template. It does not have blog posts. So again, really handy. You can have up to a thousand custom templates. So really, really nice that we have this capability and that you can do it all directly from the customizer if you just create a base template. Super cool.

Closing

So there you go. Really easy to do this. I thought it would be better to make a more succinct video rather than doing a long drawn out webinar that I did previously, though, I go into a bunch of other things like the meta fields, app blocks and things of that nature as well. So this is much more quick, digestible. If you want to go ahead and come and just basically add another 2.0 template to your store, you can do that on your vintage theme without having to go through an entire rewrite of everything on your store. So much more accessible than that. So hope this is helpful. Thanks.
 

Resources

Shopify Help Docs: Theme architecture versions

Shopify Dev Docs: JSON templates

Previous Webinar (Youtube)

Previous Webinar (Transcript)

 

 

Back to blog