Here's how to adjust your Flex theme to allow the product description to display full width on desktop instead of the out the box experience of it the description being half width.
Transcript
Hey, Scott Austin here from JadePuma in this video, I'm just going to show a quick little tip on how in the flex theme with online store 2.0, you can get your product description to be full with. So out of the box. So there used to be a, a theme or in, in the theme version before online store 2.0, in flex, there was a template for product description, full width, or I think it was called bottom description or something like that. And it's not available in the new version, cuz it's not needed in the new version. So if we go into theme customization right now, I've got the default product theme selected. I've got a lot of sections added on to this page or this product already I even have in here. So if you've got a product information, this is where your description is, right?
It's a block inside of the product information section, but that section is half width, right? It shares half the width, the screen on desktop with the images. So your product description, it gets longer like this. It ends up getting, you know, it can go really long and it's only taking up half the page. So I always like to take that when appropriate and move it underneath and go full width. So, but this block in the section allows me to move the description anywhere I want within the product information section, but that's always half, half screen. So the way that you make it go full with is you actually turn off this block. You can actually remove it. I'm just going to turn it off here for demonstration purposes. And now what we want to do is go down to the sections and let's add a new section, custom liquid, and this is a new section type inside of on line store 2.0, and it is absolutely fabulous. So you may have used custom HTML before, which is powerful. Custom liquid is even more powerful. So now all you, all you have to do is put in the liquid for the product description, which is just curly brace, curly brace, product dot description,
Save that. And now my description is full width and I can place it anywhere. I want along all of my different other sections that are added. So in this case, I wanna move that all the way up to the top underneath the product information section. So that as soon as the product form and the images are showing up right underneath, that is the product description. So now I'm gonna save that, go out to the front end and look at that page and what you'll see here. So it, now we have it full width, which is really nice, but you'll see there's some CSS issues going on. The spacing is a little bit different. And this is one of those little things you learn in using the flex team over time. What you need to do is to wrap your whole product description, liquid code into a div.
So we just put a div around it, which is super easy to do, right? So that's just some HTML, but what we need to do to that D is apply a class to it. And that class is called content because the flex theme CSS, there's a lot of styling things based on the class content. So it'll say, you know, dot content, H one and the CSS or dot content H three or P. So it expects and most. So all the, the template it's that flex is using is wrapping things in that content class. And because we're manually adding this custom liquid section, there's no CSS wrapped around it. So we have to manually do that ourselves. So now if I save that, go out to the front end here again, and you'll see here, right? That spacing's kind of tight, but if I refresh the page, the, the spacing's, you know, now conforms to the rest of the CSS for the theme. So that's a real quick and easy way for you to make a full width product description on your product template in the flex theme. Hopefully that was helpful for you.