Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences

Adding a Gallery Template to the Flex Theme in Shopify

In the Flex theme for Shopify, the included Gallery template can only be used on one page.  Here's how to create additional gallery templates for additional gallery pages.

Transcript

Hey, Scott Austin here from Jade Puma. And in this video, I'm going to explain how to create a new gallery template in the flex theme. So I'm using this Fraggle tribes store that I'm building as the example here, and you can see they've got multiple lookbooks in each one of these lookbooks is a page, right? I could see that up here. And if I click on the edit page functionality there and open it up in the Shopify admin, what you'll see is the template that is applied is the a page.gallery dash three template. Now the theme comes with a page.gallery template, but only one of them of them. And the thing is, if I look at it, another one of these look books, which is also a page, you know, with a gallery template and I edit this one in the Shopify admin, it's going to have a different template applied to it.

This is gallery dash four. And the reason for that is notice there's no content here in the page, right? So all the content that is showing up on this page, all the photos, that information is stored in the theme settings. So go over here in the Shopify admin, I've got my customized theme functionality open on one of these pages already. One of these lookbook pages, and you can see here under a gallery. I opened up that section. That's where all of the image information is stored, right? All the, all the photos and any of the links that are in them. So if I was to apply the same gallery for template to another page, it would have the exact same content. I couldn't have two separate pages with the gallery temp. The same gallery template apply with different photo galleries. So every time you create a new photo gallery page, you have to create a new photo gallery page template.

So what I'm going to do is show you how to do that. And it's actually pretty simple. We're going to go edit our theme code, but we're not actually going to edit code. We're just be doing copying and pasting inside of the theme code. So this is the kind of a process that people without any code skills could totally do. If they follow these steps here, so let's go into edit code. So I went into online themes or online store themes, and right now I'm working in the life theme. So I'm going to edit the code in that live thing.

And what I'm going to do is close out and it's already been opened, right? So if I look under this template section here, you'll notice I've got a page.gallery liquid, and I've got page.gallery one through nine for the eight different lookbooks that I've already created. And we're going to make a nine here, but your, your theme when you open it up, should have a page.gallery dot liquid. Now, if I look at that file, you'll see that it has a couple of sections in there of a banner and a gallery mean. So what I'm going to do to start off is I'm going to click on this, add new template, and I'm going to add a new template and it's going to be a page template. And it's going to indeed be named gallery nine because I've already got one through eight. You can also, you know, name it for what the gallery is going to be about.

If you wanted to you know, a gallery 20, 21 or whatever or baseball or, you know, whatever, it doesn't have to be a number, right? You can put any, any kind of allowed characters in there. So now what I'm going to do is I'm going to take this page.gallery dot liquid fo four file that I already have open. I'm going to select all of that text and I'm going to copy it. Then I'm going to go to the page gallery nine liquid section that I just created. And I'm going to delete all that code that's in there and just paste the code that came from the gallery liquid. I'm gonna save that now. So now I've got a gallery nine liquid file, but it's referring to this section and I need a unique section, just like they needed a unique template. I need an need a unique section for every one of these pages that I'm doing it for.

And let me just show you as an example here. If I open up gallery eight, you'll see that, you know, what it's got is a gallery dash eight. So what I'm going to do is I'm going to like gallery nine liquid section, and I'm going to add, or yeah, in, in the template, I'm going to add a reference to the gallery nine section. So now that section doesn't exist and I need to create it. So I'm going to copy and I'm going to go into now my sections here and add a new section. I'm going to paste the name that I just put, you know, copying page nine, page gallery nine main, create that. And now I'm going to, in my sections, find the original page gallery main liquid file control, ADA copy, or artists highlight all that text, right? Click in to do copy going over here, selecting it all right, clicking and saying paste. Now I'm going to save that. And I'm going to close out the section that I use for reference, and I'm going to save both those files. And now when I go to create a new page, so if I go in, so now I'm done with the code edits that I need to do, right? So now what I'm going to do is I'm going to go create a new page and I'm just going to call it gallery.

And I'm going to apply the template gallery nine. And then what I'm going to do is, and we go to theme customization, I'm going to refresh this. So it brings up a new list of pages. So up here, I'm going to select gallery nine and there is no gallery nine yet. So let's see if I can refresh it again. Sometimes the server takes a second. We make a change over here before it will show up over here.

Just going to view that. So that page does exist and you can see it's blank. It's got empty content. So I should be able to pretty soon here, I just want to close this one out. I'm going to open up theme customization again. So it loads up all the data. It needs to load up.

There it is. Gallery. And you'll see here, just like we saw in the front end of the website here in the Shopify admin, there's no content loaded. And that's because here I have this gallery nine section that's empty right now. Now here's another fun, little tip for you is I'm going to cause what happens sometimes is you get a lot of these sections created and things got a little confusing. So what I'm going to do here, let's just call this an advanced trick. Isn't going to open up that section that I had just created. And it's going to say page gallery nine. And what I'm going to do here is under the schema where it says gallery, I'm going to say gallery nine. So right here under schema, the name gallery nine. And sometimes the name is also set in settings and there is no name set there. So we're good. Now, if I save this and I refresh this page,

Shopify servers taking a little bit of time here, but it's still thinking, and here you can see now, instead of it just saying gallery, it says gallery. So this can be a little trick to use to adjust the names of your sections so that you know which one you're looking at. This is a good troubleshooting thing. Cause sometimes, you know, the template for eight will actually be pointing to the section for eight or for seven kind of thing. This is a good way to check and balance to keep that straight. So that is how we create a new gallery template in the flex team. Hopefully it's helpful. Thanks for watching.


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


Search