Editing Product Description Tabs

Hello Scott Austin here from Jade Puma. And in this video I'm going to talk about how to do tabs inside of the turbo theme in the way that I do it for a lot of my clients. I'm going to send this video to you if I've used this method in the tabs in your store. So the tabs, I'm working on a story now and called an ortho bracing. And here's an example of how the tabs work in that store, which is the way I'll have it working in your store also. So here you can see the tabs and how they work. In the product page we have, you know, click on one and the content meet the changes and whichever one you click on the color, you know, highlights the tab a little bit differently. And I'll have custom CSS so that these colors will match your sites color scheme.

Making these tabs though is actually really simple. Sometimes the way I make the tabs is like for example, here on the customer reviews, I can make that into a tab so that you, the store owner couldn't edit it. But I've hard coded it to the reviews, always showed up in a tab. But what I've done here is I'm using a method where this is just the product description, the product description, all this content shows up in the product description. So let me show you how that works. I'm going to go down here to the gray bar, which is showing up because I'm logged into this Shopify store admin while I'm previewing the page. That's why that gray bar shows up. Your customers never see it. But that gray bar is there because I'm logged in. So I'm going to click on that edit product link.

It's gonna open up the product inside of the Shopify admin. And what you'll see here is let's go back. We have four tabs, product details, videos, wrap on polar pads and instructions. And you can see here product details, videos, wrap on polar pads and instructions. So those four tab titles and the content for all of them are all in one product description. So the way that we do it is we in the product descriptions, HTML, we have a couple of tags which you can't see in this preview mode. But those tags are used by the code and it slices up the product description into different tabs. So the way that we get to the age channel, HTML mode is this little icon up here. Show each demo, click on that. And now you're going to see the HTML view of all your product content. And what you're gonna see is this is one of the tags tab content. And the other tag is a new tab. So the way you make a new tab and we'll make one here. I'm just going to copy this text here, take it down to the bottom of the page and paste it in.

So you have to first put in this HTML tag of new tab. And then below that you put in what you want in the title. And let's just call this a demo tab. Now this can only be one line. It can actually be more than that, you know, technically. But if you make it more than one line, it's going to look very bad. And the layout in the front end, so you want to keep it one line and just the P tags around it, not looking H three or an H two and I'm like, just keep it in the piece. Which stands for paragraph. And then under tab content you can put whatever content you want in there. Right? So we can just put, you know, line one and line two. So now if I save that

I go back to the front end, refresh the page to get it to show up. Maybe sometimes it takes a second for the server to save things. Let's go back and try that again. Yeah, that's better. Okay. so now there's the new demo tab that we just added with the text line one in line to below it. So the way that you add tabs is simple, right? You start off with this HTML tag for new tab, which is actually, you know, the Ford carrot excalation point in two dashes. In space. You know, it has to look exactly like this. If you misspell it or you know, have an extra space, it will not do it. And then put your title in in a P tag and then tab content, HTML tag. And then whenever you want below that, you have to do that for every tab that you add except for the very first tab.

All right, so the very first tab doesn't need this new tab. So if we go up here, you'll notice we have the product details title but new, no new tab, HTML at the top. And then we have the tab content to differentiate between the title and the tab content itself. Hopefully that makes sense. So on the first one, you don't need the new tab. Everyone after that you have both HTML tabs. Oh, both HTML tags, new tab and tab content. And then we just have HTML code, which is a bunch of statements. It's like, all right, slice this description up divided by all the new tab tags, right? And so that's where we get the content for the tabs. And then we say, now slice up that content by the tab concepts. We break it in half to get the title and the description.

So if you want to add them, that's how you add them. And if you want to change them out and edit them, that's how you can edit them. Also, if you want to change the title on a tab, for example, it exists. You can just go right into the HTML view and change that title and it'll change on that front end. And I'm just going to show you one last time. There's our tabs. Hopefully that helps. You should be able to edit these yourself. If you have any questions, let me know. Thanks for watching.