One of the best features of the Flex theme is its ability to create rich, engaging pages for content pages like About Us and Contact Us.
Each page does require that it gets its own page template in the theme code. So this video walks through the process of creating a new page template. It's not that difficult and just requires some copying and pasting.
Transcript
Hey, Scott Austin here in this video, I'm going to explain how to create new page details templates in the flex theme for the new version of the flex team for online store 2.0. So they launched that in October, November, 2021. The version number is a flex three dot oh, and above. So the process is a little different in the online store, 2.0 version of the theme than it was in the older version. So here I have a, a test store and what I've got is two pages down here, the, about us and location. And if I go into about us, you can see it's got a page dot details template. And I know that because it's got an, you know, a nice banner with overlay and then it's got content blocks and all this good stuff, right? It's some rich content in there. And if we click on the edit page link and open it up in the Shopify admin, what we'll see is I've already designated the template to be the detailed template. And these are the templates provided out of the box and the flex team that you can choose from. So that's the about page. Now, if I go to the location page if I click on the edit button there, I'll see that the template is the same template. It's the details template.
And what you'll see is the content on both the pages is the same. And here's the thing is with the details template, the content is embedded with the template. Therefore, if you want two different pages to have two different content, but you want them to both have the rich flexibility that the details' template provides, you have to create two different templates for them. And that's what this whole video is meant to show you is how to create those extra templates that you're going to need. And just one more thing to show you is let's, you know, here I am on the location page. If I go in and customize this in the theme customization, and let's just take content block one, right? And add a little text here you know, location and save that. If I go back to the front end of the website if the servers have kept up with me here, yep.
I'll see it here on the location page. It says location. But if I go to the about us page, it also says location. So that's just further proof that we need to create separate templates for each one of these. So the way we do the creating of separate templates is we go into the Shopify admin for our store and click on themes over on the left menu. And then under this actions button, there's going to be edit code. So we're going to edit code here. Now we're not going to be writing code. So if you have no experience with code, that's totally fine. All you're going to be doing here is copying and pasting. So most people have enough computer skills to be able to do this task. So I'm going to go into the edit code and under templates here, I'm going to look for the pro the page dot details.
So that's our page style details template that we're using right now. So what we want to do is create extra ones of those. So what I'm going to do is I'm going to click on the add new template. And before I do that, I'm going to show you here on the page dot details. Notice it ends in dot Jason. The, in the older version of the theme used, ended up liquid. Now it ends in dot Jason. So if I click on, add a new template, I want to add a new page template right there. I want a template type of Jason that is already preselected. And then I'm going to put in details and I'm going to put a dash and about, and that'd be for my about page. So I'm going to create that template. And it's got a bunch of empty content in there, and I'm going to create another one for location while we're at this. So if I go to page Jason details, location, create that template. So now I've got two templates that I can assign to those two different pages, but they're not going to work as you'll see here in a second. So this is our about page. We're not going to work yet.
Here's our about page. I'm going to change the template. I might need to refresh this a little bit, or I might not have saved these new files yet. Nope. They've been saved. We should be able to see them here. And maybe, you know, maybe we need to make these a little more fleshed out. I'll show what I mean by that. So if I click on the page details, Jason template, the original one, it has more content in it than these do by default. So all I'm going to do is I'm going to control a, to select everything I'm going to right. Click and say, copy. So all this content that's here on now gonna paste that into here. So paste, and I'm going to paste it into this other one taste, save them, save this one.
And now, and I'm going to check to see is if they show up in this list of templates, there's our about, and our locations. And now they show up that we've saved some content inside of chase Jason files. So that's the about page. And then we're going to go to the location page, and we're going to say location template for that one, apply that. And now if we go back to the front end of the website, refresh our about pages working, or this is a yes or about page, and this is our location page. So now, and it's got the concept from there, cause that's stored in that Jason file. Now, if I go in here and I say edit the page and now we're editing, oh, I don't want to hit it. I'm sorry. I wanted to customize the page On this one here. I can say, well, maybe I don't want to have the content block and I can remove that section. And for the header, I might want to say, I want to show a instead of sun page details template. I want it to say a location. And for the about page, I can go to the about page. And I can say, well for this one, I want it to say about us,
Maybe have some text underneath me for the team. And for this one, maybe I don't want to show the images with text. So I'm going to remove those sections,
Save that. And now I'm going to go back to the front end and just show you how that content is now updated. So on the location page, the header now says location, and we don't have that contact form. And on the about page, we got rid of, and we showed the about us up here. And we got rid of the image with text elements. So that's how you create new templates for your page dot details. You just create a page dot details, dash whatever, you know, you want to name the template dot Jason, a template file. Copy the text from the existing page, details into it, and then apply that unique template to your pages in the Shopify admin. I hope that helps. Thanks a lot.