One feature which is not included in flex is the ability to have a tabbed layout on product pages. This tutorial will show how you can add a new tab functionality to your product pages or any other page template.
Steps to add tab functionality.
- Add the file index__tabs.liquid to your "sections" folder.
- Modify each section you wish to included in your tabs as shown in the video below.
- Use the enable the tab functionality and assign sections to their respective tab.
index__tabs.liquid
Flex Theme Section Tab Wrapper Snippet
Add the following to the schema of each section
Video Transcript
Hey, it's Michael here with JadePuma. So one feature that flex doesn't have is tabs. And in this video, I'll show you how to add tabs to any page template in your flex theme. So first, just let's take a look at what that might look like. So here is an example. We have this store built using the flex theme and on the product page here, we have these tabs. So that's how they work. You can see it works quite nicely and on mobile here they are, same thing. So the first step to add these, if we look back in our tutorial article here is to first of all, add the tabs section to our theme files. So let's go and do that.
So the very first thing we need to do is add the tabs section to our theme files. So let's come into the theme that we're editing and click on edit code. And then we just wanna find the sections folder here and add a new section, and we're just gonna call it index tabs. And then we're going use the code from our tutorial here. So this is the file index underscore underscore tabs. If we just come down to the bottom here, we find this view raw button. So click on that, copy all that code.
And then we're just gonna paste that into this file and hit save. Okay. And then the next thing we have to do is modify the individual section files that we want to include in our tab structure. Okay. So here we are in the index image with text section file, and we want to find the opening section tag because we're gonna wrap this section in our container. So here it is opening section tag. Let's make little space before that. And then we want to just come to our blog article. That's where you can find the code. So here it is. So we have a few snippets of code here. We have the section file, and then down below that, you'll find this snippet of code here. So let's click on view raw and grab all this code.
Okay. And then just paste it above the opening section tag here. And then before we save it, we just want to grab the closing diviv tag from this snippet. And we want to put that instead of having it there, we want to put it below the closing section tag. So if we come down here, find the closing section tag here, and then we just need a closing diviv tag, as it says here in the comment. So let's save that now. We're not done editing this section file yet. We also need to add a setting to the schema down here. So to find that setting, let's go back to our blog article here and come down again to the bottom here. It is, add the following to the schema of each section. So if you go viewer, copy this little piece of code, and then we can come down to our schema and let's come down to the bottom of our schema. So we want to come down to just before the block element or rather at the end of the settings array. So just before the closing settings bracket, so let's come down here and we can see that's the closing settings bracket. So let's come up here, put a comma. So it'll be Sy tactically, correct. And then paste in that little snippet and then we can hit save.
Perfect. So that's all a modification we need to make to this section files within our tabs. And now we should have everything we need to do. I'll make the exact same modifications in the gallery section. And then we'll have a look on our product page and we should be able to create our tabs. Perfect. So here we are back on our product page. And as you can see, if we look in this section image with text, we can see there's an additional setting down the bottom. It says tabs. And then it gives us tab label. Now, before we can do anything, we have to add a tabs section to our page template here. So that will be this new section index on drug score, underscore tabs. So let's search here for tabs. There, there it is. And here, so let's pull it right up just underneath the product information and nothing's appearing yet because we don't have any, well, actually it's not appearing cuz we had didn't check this box. So let's enable it and you can see now we have six tabs, but they all have the default name. So for this, we just want two tabs. Right? So let's just hide the ones that we're not going to use.
Okay. So we have two tabs. Now the first tab is going to be called let's say product information. And then the second tab we're gonna call it gallery. You can have any tabs you like. Okay. So now that our tabs are set up and enabled you can see the page is just blank because we haven't assigned any sections to these tabs. So let's go and do that. Now first, we'll go to the image with text and we'll come down here to tab label, and let's assign that to product information right away. You can see it pops up and then let's come down to gallery and assign this one to gallery. And now we have our tab functionality.