Better-Looking Policy Pages in the Flex Theme

Here's how to make better-looking policy pages in the Flex Theme.

Theme edits needed:

1. Create page template for shipping.
2. Create page template for returns.
3. Create page template for privacy.
4. Create page template for terms.

Code for the Custom Liquid Section

Transcript

Scott Austin here. And I'm gonna show you this video, how to make better looking policy pages in the flex theme. And this is for online store 2.0 version of flex. So here is the default page presentation that you get. If you go to the policy is four slash privacy policy, right? So here's my URL policies, privacy policy, and they take the policy from the Shopify admin settings and put the content in. And, you know, it's a pretty ugly looking page. There's, you know, obviously some spacing missing above this here and down at the bottom. It's also the little bit tight down here too. So what I like to do is create a page that looks like this. So we get a little bit of a, you know, the banner, we get some branding in there, consistency with the rest of our store, and then we're also going the full 1200 pixels with, on the content on desktop.

And we've got a little bit of spacing up here, so it's not as tight and down at the bottom. There's a little bit of spacing also. So lemme show you how I do that. It's actually really simple to do. So the first thing is if I edit this page, you'll see that I, I actually create a page in Shopify. So over here under pages create a page and then I create a unique template for it, privacy policy for this, when I actually make four of them, right? There's one for privacy policy, one for shipping, one for returns or refunds and another for terms of service. So you need to make a template for each one of those. So if we go into theme custom or yeah, into themes and not into customizations, but let's go into edit first edit code, you'll see that for each one of those four, I create a page.

So there's refund policy shipping policy in terms of service. And I make JSON ones, JSON page template. So you need to create a unique JSON page template for each one of those. And then what I do, if I go into theme in customization now, and this is a site still in progress and being built, obviously if I got on a privacy policy, right? So it's opened up that page with the page template that I created the privacy policy page template. And then I add an image with text overlay element that gets me the banner. So I can have a desktop version of the banner and a more vertical one for mobile. And then I turn off the page content for that page and you turn it off by just, you know, clicking that little eye right there, right there. It is turned on, which, you know, cuz it's empty right now, use spacing and there it is turned off. And then I add a custom liquid section. The custom liquid code that I put in is really simple. And it's this code right up here. And there's four of them, right? One for each one of the four policies. And if you're looking at this video on YouTube, I'll include a link on the YouTube notes to take you to my blog article where this video is also posted and that's where I'll have this. You can just copy and paste it from there and drop it right in. And now, because this is a custom liquid section, if you're used to sections in Shopify in, in the flex theme, right, you're used to adjusting the spacing with these wonderful sliders that the flex theme has. It's one of my favorite features in flex is adjusting spacing. So ease, but we don't have those spacing adjusters in the custom liquid element. So what I did instead is I add a divide, a divider section down at the bottom, just to gimme that little bit of spacing, right? If I turn that divider off, that spacing's tight again, which I don't like. So I add a divider. And this one here, I, you know, put on a of 40 pixels and that gives me that vertical space between the policy content and my footer. So that's all it takes to, you know, create better looking policy pages for your Shopify store, with flex using the new version of flex the online store 2.0 version of flex.

Thanks for watching.