Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences

Editing Pages in Your Shopify Store

Shopify pages can be created in a couple of different ways. This video explains those different ways and shows you how to edit content depending on how the page was built.

Transcript

Hey, Scott Austin here from June Puma. And in this video, I'm going to talk about the different ways to edit pages in your Shopify store. So here I am in the Shopify admin for a store, and I'm going to click on this little icon, which is going to open up the front end, the customer facing side of the store, but because I'm logged into the admin and I'm now on the front of the store, I have this gray bar at the bottom that only shows up for store admins that your customers will never see this right. And this great bar allows me to quickly navigate into the Shopify admin in relevant ways on a product page. It'll take you into the product and the admin and that kind of things. That's going to be useful for us as we are editing pages. So now the first thing I'm going to do is I'm going to show you a page on this site is a contact us page. And you can see up here in the URL, right? It says pages content gets stored in other ways, right? If I'm on a product, for example,

Let's just go to a product page here. And this one here says products, and, you know, you can also be on collections. So this is a collection page, and there's a couple of other product types of information. One is blogs and articles and another one is policy pages, right? So these aren't stored as pages. These are stored as policies. And you'll notice here as a privacy policy page, and we got page pages and policy pages and product pages. Most of them have page pages here, but I want to talk about policies really quickly. And you'll notice here on this little gray bar, I have no menu, one I'm on a policy page that helps me out where if I go to the contact us page, right, I get this, this menu down here. So policies and just cause I labeled these all policies doesn't mean they're all policies. Now in this case, the shipping refund and privacy in terms those four policies are stored in your Shopify, admin, under settings, and then under legal.

And if there's nothing in these fields, you know, they'll just show it. They'll just show us empty. Right? and the four policy pages, and this is what's called the, the Rick rich text editor, the RTE, this section up here where we can, you know, have headings and make things bold and put in hyperlinks. This is very similar to the rich text editor that shows up on pages also. But if you're editing your privacy content, you're wanting to go. I don't want to go into the admin to settings to the Eagle. And then you'll see the four different boxes for the four different policy types that you can add. Refund privacy, terms of service and shipping and these policies, all, you know, I, in most doors, I put a nav link that shows these policies here, but they also automatically show up in the checkout experience.

So if you put text into one or multiple of those boxes, those links will automatically appear in the footer of the checkout. So let's go back to regular pages, things that are listed as pages in the in the URL. So there's different ways that pages get edited depending on how the page is built. So one way is just using the normal pages content bucket, which I'll show you here in a second. And the other is storing the information, the content about that page in a template. So let's first go to this example page that I created. And you see here, I've got these two, two buttons down here, edit page and customize. When you're in doubt on how to edit a page, the first thing you should do is click on the edit page button.

It's going to open up that page inside the Shopify admin. And what you'll see here is I've got content that looks like the content here, and I'm also got a template. That's just the normal page template. This is a good indication that this content here, if you edit, it will change the display here. Not always a guarantee, but it's, it's pretty, pretty common now in all the themes that are all the stores that I built for clients, I'm either using the turbo theme or the flex theme. If we're building a new store or doing a new redesign. And what you'll see is there's also all these other different templates that we can choose from that come with the theme or their templates that I create an add to the store experience as part of, as part of the store build or redesign. So we'll talk about a few of those here in a second, but the first in this page editor, right?

I was rich text editor up here, just like I did on the privacy. There's a couple of different elements in it, but what it allows me to do is, you know, I can just take some this content here and reformat it a little bit. And it allows me to easily say, well, I want those to be bullets, for example, or I want this content to be center aligned, or I want this, you know, line here. Let's, let's just make a separate line. Let's say you want this to be a heading so you can make this a heading level three, or if you want certain texts to be bold. So you have this rich text editing experience and you can even insert videos and photos into this experience if you wanted to also, and let's actually just add a photo real quick. We'll just take one of the photos that's already in the store. And I'm also going to then center that.

So now if I save this. If I go back to the front end and refresh that page and my take the servers a little bit of time to catch up to the seams that we just made.

Okay. And Shopify servers have been slowly lately. There's so much volume going on. I just want to sure. I saved it here. If I hadn't saved it, there'd be a little save button, right? Notice what happens here. If I start editing, then the see button shows up, but if I save it that save button goes away and that lets me know that I've already saved those changes. Let's go back to the front end, refresh that page. And now our changes have showed up. So there's the bullet and information. There's the sensor aligned. Here's the heading three, here's the bold. And here's the image. So lots of different manipulations that you can do with display of content using the rich text editor and the default page experience from Shopify. So now let's talk about other page types or ways to edit them, right? So let's go to our contact us page here.

You'll notice we've got a full-screen banner, we've got a contact form, an image with text and a link. We've also got a maps. There's different content types in here, and you can't do this using the rich text editor that we were just doing on that example page. So if we look at this edit page, right, he clicked that button go prove that page in the Shopify admin, you'll notice that the content section here is blank. And even in the HTML view, there's nothing there. And you'll also notice that this template is page dot details dash contact. Now the details template is one that gives us the ability to add different types of content, you know, different blocks, like the contact and the banner and those kinds of things. And it's a fee. It's a template that comes with turbo and flex.

And it's a common, it's one that I commonly use when creating what I call rich rich text pages or rich rich pages. And you'll see here that each page that I create has to have a unique template. You know, the information that is stored, you know, th this content, right? The fact that this is FAQ right here, that is attached to the template. So if I took this template and applied it to another page, it would have the exact same content on it. And if I edit it in one place, it would edit it both. So we have to do is when we're using the details template, you'll notice all the different ones that we've created here. Each page has to have its own template. And that's a little bit of work inside a code, and I have a separate video on how to do that.

But for every new page that you want with a details template, you have to create a new template for it. And then you assign that to, I got a dog coffin, a preferable behind me, hopefully it's not too annoying back there. And each one of these has to have a unique template. You'll see here, you know, this, this holidays and events experience which has, you know, all these different pages and this store is still under construction, which is why we've got placeholder images in there. But all these, each one is, has a unique template, which is why we see so many templates in this list. Now, if you're using a page details template and some other templates, and I'll show you here in a second, also where the contents not stored here, the way we edit those pages then is in theme customization.

So on a page, let's go back to our contact page. We've got these two buttons down here in our gray admin banner, right? We already opened up the edit one so that there was no content there to edit. So now we're gonna open up the customized one. And what this is going to do is open up in customization to the page that we're okay. And that will allow us because we're using the product details template. This is where that content gets added and edited for the page. So you'll see here, you know, on the left-hand side, all the different functions for the page, you know, the header and the footer and those kinds of things. There's also a section here called paid sections. If I click on that, each one of these blocks like that I can add and move and edit, right? Each one of those correlates to the information that's on this page.

So this contact us banner image right, is edited there. And we can also, you know, have the map and all these are edited there. And the nice thing about this is the template allows us all these different pre-built content modules. There's one for blog posts. There's a divider, which is ad space or our horizontal line there's featured collections. So you can show products from a collection there's customized HTML. It lets you do anything you want. If you know how to edit at HTML there's contact form, which is this contact form that was up here, there's a gallery which allows three photos to be shown in a horizontal layout. There's a feature product. You can show just one specific product inside of the page. There's image with text overlay, which is what this banner is. There's a map, which is what this map here is.

There's a page which I'll talk about here in a second. There's rich texts, which just allows you to put texts without an image associated with it. And also videos. So you can embed a video, whether it's a YouTube video of Vimeo video or any show of five videos stored inside of your Shopify store. So there's lots of different types of content blocks that we can use as building blocks to create the page experience that we want. And what I like to say is start with the content that you have first, and now I'm choking just like my dog is sorry. Start with the content you have first and then determine which blocks to use or which, which building blocks here to use to build out that page experience. So that's one type of template, the details template, right. And what I said is we have the ability to use a page inside of that also, and this gets a little confusing, right? So what I'm going to do here is in our contact us page, I'm going to edit the page and I'm going to add a little content in here.

That content is going to be, you know, whatever sort of content you want to put in here. And the reason we would do this instead of using one of those walks is because here I get to put in the rich text, editing abilities and look up fast. I type when I typed gibberish, right? And I can say, all this is going to be a heading to this is, you know, a bullet list. This is a numbered list. I bolded those, this is a numbered list. And we could also even put in like a hyperlink if we wanted to. And then, you know, also we can, you know, add photos and videos like I showed you before. So this ability, this rich text editing, this is richer than we can do inside of those blocks that are inside that detailed template. So there may be times where you actually, I'm going to save that. And now I'm going to go back and customize that page.

And I'm going to add a section or a block to the page section, and that is going to be the page. Now we can select any page, right? So I could select any of the pages that we built out, but I'm going to use the contact us page. Remember that content that we just added, right? It's going to show up here in a second. Let's move this up a little bit. And now there's that information that we just added. Now, this section allows us to put a background color to it. We don't have to give, make that transparent and you know, allow that to fit right into the page background that's already there. But this section, this block allows us to put in rich text editing abilities, like bold and bullets and numbered lists and all that good stuff that we couldn't do easily.

Otherwise you could actually technically do this if you added the HTML section, but you would have to know how to edit HTML to create that type of formatting. So this is how you can actually have a page that has content both stored in the admin, on the pages section and in theme customization. So we're going to do now is I'm going to delete that module. Cause I don't want that there. And what we're going to do is we're going to go to another page. Let's go to the FAQ page here. Now this page, if I look at the edit page uses a different template, this one is using the page dot FAQ template. And I also see there's no content here. So let's see what happens when I customize this page.

What you'll see here now is I have over on the left, I have different sections that show up is an FAQ banner FAQ FAQ column one. And I think you call them two. So instead of it saying paid sections, like the page dot details template gave me, I have different sections here. And then in the sections, there are different blocks that I can add in the FAQ. I have the ability to add the FAQ question, the heading or an image. All right? So this template is optimized for building out an FAQ experience. So you can use more than one template or your, your theme can have more than one template for pages that allows different types of content to be presented. And then we can also have, let's go to the customer reviews page and you see up here, this is a page and I'm going to go to the edit page in the Shopify admin. And what we're going to see here is that this is using a template called judge me all reviews. Now, if I go here and click on customize on that reviews page, what you'll see is

I don't have a section over here that I can edit. So this content is actually driven by the me reviews app. And I can't edit that from here. So in this situation I found out I couldn't edit it by going to the Shopify admin for edit page. I also couldn't edit it by going to customize. And that's because this template doesn't allow me to edit the page. It determines through the app functionality, what content is going to show up on this page. So that's how we can edit pages in our turbo and in our flex theme. By, by out of the sandbox, you can either edit pages. You know, the first thing you do is go to edit page. And if there's content here in this, this block and the template is a normal just page template, which will show up here in a second. There we go. Oh, it opened up the reviews page where I wanted to go to the example page, sorry I edit this page.

Here. I've got a normal page template and there's content here. That's a really good indicator that if I edit this content, it'll probably change here, but of course do it and make sure it actually happens. Because code the code of the theme can be a little bit different. And then the other thing the other scenario would have happened is if you go into a page and it has no content here, or even if it does have some content here, it may also have a template other than a normal page template. That's a good indication that you can also edit the content on this one, by going into customize theme. Now what's going to happen sometimes is you may be building a new page that isn't exposed inside of your navigation. So you might be on your front, onto your website and you can't get to that page because there's no way to navigate it to it.

Now you could, if you knew the handle of the page, just type it in up here and have it show up. But what I want to show you here is once you're in theme customization in the Shopify admin, we have this little pull down menu up here and what it does at the top of it, it shows you all the standard pro page types, like a product page, a collection page, a collection list, blog, art, all that good stuff. You keep scrolling. You'll start seeing a list of all of your pages. So if you have a page that you don't know the handle love, or can't navigate to on the front end, because it's not part of your navigation yet, or maybe never wellbeing, you can go to this page here or this, pull down here, scroll through, find the name of the one you're looking for like flavor choices, and then bring that page up and then you can edit it from there. So that's how we edit pages inside of our Shopify store using the flex and the turbo themes, which have some really good templates for customizing the content on our site. So thanks for watching.

 


JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.


Search