This video shows how to use the Turbo theme's built-in capability to split the product description to show content in two different parts of the product page.
Transcript
Hey, Scott Austin here from JadePuma. And in this video, I'm going to explain this functionality that is built-in, in the turbo theme is built into the product page. And then I'm going to show you how we can also add it to collection pages when stores wanted. And this functionality, what it does right now, I'm looking at the Halligan bottle openers website here and this is a really simple a product page. We just got a couple of photos and a little bit of product description. A lot of product pages are more complex than this, but I personally wanted to show it to you on a simple page. The function I want to show you is what I call the split functionality. And what it does is it takes the product description content and splits it into two segments and chose one piece in one place and another piece in another part of the page.
Because we can't have two different descriptions and easily show it on the site. So if I open up this product in the store admin, the product page you know, there's only one text box for product description here, right? We can't have a, another text box for another, you know, piece of content. So we do is we put both pieces of content in this page or in this product description box. And to start off, we do that in HTML viewing modes. So we click on this little carrots icon here and we look at the HTML view of this. And then it's really simple and this is built into the turbo theme, right? So what you do is you type in the foreword character for each email, exclamation point and two dashes, the word split, and then two dashes and the end carrot.
And it's, it's as simple as that text right there, right? What the logic on the page template does, it looks to see if just that phrase like I just called simple split, right? If the split exist inside of the page. And if it does, it puts the content above the split in one part of the page and the content below this split and another part of the page. So here I'm just going to put in some text of if I can spell properly here and I'm not doing that at all. There we go. More text goes here. Can I close that paragraph Mark off. And now I'm going to save this.
Now I do sometimes have problems when I save the product description, the split freeze getting erased automatically by the Shopify admin. I see that happen more when I toggle back to this normal view, not the HTML view, but the way I always check is I click on this show HTML view again and I make sure that that split phrase is still there and it is in this case. So I'm, I'm good. Now remember on this product page a minute ago, we looked at it there's just this product description texts here. So now I'm going to refresh the page
And we should see our other texts down here. So the the text, we put it in a product description under the split frees that we put in there that shows up at the bottom of the product page. Now on this page here, there's really no need to come. We got plenty of space here, but there's actually a nice thing if we look for some stores, we put product reviews in here and then we put some text below that for SEO purposes and things like that. So that's how you make split work. Once again, it's really simple. You go to the HTML view inside the product and the admin and just add this little that I've got highlighted here, split which is Ford carrot exclamation point dash dash space S P L I T space dash dash and character. It has to be exactly that way.
Because in the code we're looking for that exact phrase. Now that's built in to the turbo theme in Shopify. Now what's not built-in is the same functionality on a collection page. So for a lot of stores, what I'll do is I'll, I'll go in and add some code that gives similar functionality. So if I look at this collection page in the admin, you'll notice there's a paragraph of text here, ends with the word separately. If I look at this page in the admin, you can see there's the word separately. So that first paragraph shows up, but there's more text here, right? And that text in this case shows up at the bottom of the page also. And this has got some, some tagging, you know that with some headers and some paragraphs so it lays out a little more nicely. And all I do right to edit that, it's the same thing as before. We just have to have that split in there. And like I said, it's really weird how this works in the shop play admin sometimes cause the split is now gone. And I wonder if I refresh this page or not, if it'll disappear on me.
No, it's still showing up. So when you're in the Shopify admin and you see it's missing, like where'd my split go? I always just put it back in again and then I saved that. I saved this page while still in HTML view, so save nd then I can go back and, and come back in again. Seniors in the views it seems still doesn't show up again. And it's really, it's weird how it, how it works. Sometimes you gotta be a little persistent and, and, and sometimes it's actually still there. You just can't see it. So I don't know. I don't have a good explanation for that. But that said, when I do have it up and working like it is right now, it works really well. So the reason that you want to on collection pages have the split functionalities. You want your customers to get to shopping as quickly as possible. Right? so you want them to be able to see your product content on that page, on that collection page. You don't want to have three paragraphs or you know, more of texts. You're pushing that content down.
But collection pages are really valuable from an SEO standpoint. They're actually some of the most clicked on and most index pages or most highest-ranking pages inside of Google. So optimizing your collection page for SEO is a good best practice and one of the best practices is putting more text on a page instead of just a bunch of images. So for a lot of our stores, we actually put in this functionalities at the bottom of the collection page that can add a few paragraphs for text to support the SEO efforts that they're driving towards. So that explains the split functionality in the turbo theme inside of product pages and collection pages. It's built-in on product pages, collection pages. I can add it to your store if it's already there. This, this video shows you how to, how to make that work and there is that little funky Eunice you got to work with on the split sometimes showing and not showing them each email view. But hopefully that helps you have any questions, let me know. Thanks a lot.