Transcript
Hey, Scott Austin here from Jade Puma. In this video, I'm gonna show you how to make new templates for products and for pages in online store 2.0 themes. And this is a super easy thing. It's you have to edit code, but it's an easy thing to do. So even if you're not comfortable editing code, you should feel comfortable going in and making this change yourself. So let's first explain why we'd want different templates. So here on a product page, the gold medal power package I have this gallery of images down here, and if I look at another package, the next button up here, go down to its gallery. It's got a different set of photos and a different number of photos. So because of that difference in content, I need different templates, right? Because you know, if we just have different product descriptions, you can change that content inside the Shopify admin on the product level.
But if you want to add a section with online store 2.0 section anywhere is functionality and have different content in those sections, you need different templates. So in this store, most of the products actually have their own unique template made. And then the same thing for pages. So let's just look at the contact us page, right? This contact us page is built with sections, obviously with, you know, the image with text and maps and all that stuff. And this FAQ page is built with sections also with the accordion functionality. So the content, the sections are different and the content in the sections are different. Therefore, these two pages need different templates. So we go to the back end, let's just look at pages first and just show you contact us.
Alright. It has a template of contact and FAQ has a template of FAQ. So they have different templates. And just to show you the same thing inside of products, let's just go to our packages really quickly here. This package product has one template, body builder, and you know, the other, other products have different templates. You can here, you can see the full list of all the templates we've made for the products inside of this store. So let's show you how to make a duplicate one. And the really nice thing about this in sections anywhere is before sections, anywhere, depending on your theme, you had to edit multiple files and now in sections anywhere, it's just one file you need to edit. So what you want to do to get started open up a new tab. You want to go to the theme that you want to add the template in, which is probably your live theme and right here under actions, you want to click on edit code and what you're gonna wanna do.
Let's close out all our existing files there. And what we wanna do is under templates. You want to add a new template and you're gonna want to say, do you want to do a page or a product or all the different types, what we're doing page and product today. So let's just pick page. Now, you're gonna want to keep it as a JSON template. And I'll explain that in a second here. So I'm just gonna put it in test and, and JS O is a file format in online store 2.0, and it's super powerful and I absolutely love it. And here's one of the reasons, right? It used to be when you created a new template before online store 2.0, you had to create multiple files and then you had to load all the content up in that template all over again. So let's look here under on the front end.
Let's look at, you know, this FAQ page is a great example where we got all this text, you know, this is all stored in the theme customization settings, right? We wanted to type that all over. If we wanted a, another FAQ page that was similar to this. But maybe you have an FAQ for one type of product and a different FAQ for another type of product, but a lot of the same base content. The beautiful thing with sections anywhere is I can now say that this test file or the test template that I'm creating. Well, I want it to have all the same structure and all the same content to start with as my FAQ template. So the way you do that is, and right now, by the way, if I save this and get out, there's nothing in this file. So the file will not be saved.
It's just an empty file. The theme editor realizes it's empty and just deletes it. So what you need to do is you need to occupy or place some content and some structure inside of this new template you've created. So you want to go to your existing templates. Here's all my page templates here. And you wanna find the one that's closest, the closest starting point that you wanna start with. You could start with an almost empty one, just use the default page one, which is usually just page dot JSON right here. But instead I'm gonna use the FAQ one, right? Which is this one here, page dot FAQ JSON. So I'm just gonna open that up and I'm gonna put my cur under here and hit control a to select, all right, click and copy, go back to my page dot test my new template, make sure everything is selected, delete it and hit control V for paste. And now this template has all the structure and content of the FAQ template, but it's an independent template. So let's create a new page that we're gonna call test, and we're going to add the template. We just created test to that.
And now if I go and view that page, you'll see it has all the structure and all the content from FAQ. So I don't have to retype all this over again. So it gives you a great starting point from which to edit your page. Now you'd want to go into your online store theme customization and go to that test page. And the way I'm gonna get there right now is gonna use this top navigation when it comes up, which is basically you can select by template what you're editing. And the nice thing is the most recently created template that you create will show up at the top of the list to refresh that page. If you can get this thing to show up, our Shopify servers are really fast and speedy today. There we go. So here under this template selector, I go to pages and you'll see that test is right at the top.
Cause it's the most recently created one. So I'm gonna select that. And now I've got this FAQ structure and content as a starting point, but I can easily go in edit any of the content, add new sections, hide existing sections, but it's really helps you fast track the creation of a new page. So when you're creating a new page template, look at your existing site, figure out which of the existing templates has the structure and the content that you most wanna replicate and use that as the starting point for your new template. So let's do the same thing for and it's, it's the exact same process for your products. So what we're gonna do now is we're going to go into theme customers or edit code again, right under actions.
And we're gonna create a new template. This one though is gonna be a product template and we're gonna keep it as a JS O file. We're gonna name it test. And then we're going to find the existing template we want to use is the starting point. So in this case here, let's just say, we want to start with the endurance plus product template, control a copy, go back to test, select all, delete, then control V to paste the product endurance. I'm gonna save that. Now I'm gonna go into my products, create a new product called test.
And I'm going to add the new template. We just created test to that product. And when I go and make that active and preview it. So you'll notice the product doesn't have a carousel or any of the product description, cause that content is stored in Shopify admin at the product level right here. Well that's our page. Sorry, here. Right? We didn't add any media or any prices and, and variance or anything like that. So in description, so that's all blank, but the rest of the sections anywhere content, the sections that we added are showing just like the ones that we saw in the other template and the other, the other product. So it's a, like once again, it's a great starting point to get some content and structure in place on your pages. So that's how easy it is to create templates, new page template, new product template, and sections anywhere using an existing template as the starting point for your content instruction.
Hopefully that helps. Thanks for watching.