Page Builder Fields In Raw HTML BigCommerce Page Template

So can you use page builder fields in the raw HTML template in big commerce? In this video, I want to go over just that.

Before we get started.

My name is Kal, I'm a developer, a store owner, and I run the E commerce growth private, the free private community for store owners just like you and me.

And I'll have a link below if you're interested in joining up hanging out with other store owners.

And I also post more ecommerce videos every week.

So if you find this one helpful, you want to see more subscribe, hit the bell.

And let's go over this question, which is, can you use page builder fields can use the Page Builder widgets in raw HTML template in big commerce.

And so if you're unfamiliar with what the raw HTML template is, when you go to create a page, it asks you what kind of page that you want.

Let's just create one and it says, Do you want to use the WYSIWYG? Do you want this just to be a link to the document in the navigation? Do you want this to be a contact board? Page? Or do you want to have this be a raw HTML page, right? And the reason that people use this and to be honest, people overlook this as an option so much.

But the reason that they use this is so that you can have a page that is just straight HTML doesn't have the rest of the template built in.

And this would be great for like, if you're going to do like an email campaign, you want to point them to a page that doesn't have all your header and footer, all that stuff.

And you know, you could have somebody code up an HTML page for next to nothing and just paste the code in here if you do that.

So if you do that, it's just like, paste the content here.

That's it, right? So had this question come up? All right, can we put page builder fields in here, right? Because that will let us use the customizer to build out landing pages, which will be super cool.

So I went into the code, I put in a couple regions into the landing page template, which is this template called Empty dot HTML, I put one in here that came within the block, the page block and I put one in here that came afterwards, just to see if either either place either location would render a page builder field by doing that, so let's just test this out, right.

So we're going to create this page and we call it landing page one, LP one.

And I'm going to mark this as in my navigation just temporarily.

And the reason for that is I know that the Page Builder System, the customizer isn't going to let me browse to it unless I have a link to it.

So by putting that in the menu for the moment, it's gonna let me have a link because it's gonna show the menu.

So let's go to storefront my themes, and go to the customizer.

click on preview, so I can make the LP one link clickable.

I click into it.

Now you can see it doesn't show anything because there's no header or footer or anything like that on this page.

So if I click back into the design tab, this confirms that those page builder regions in the empty HTML template, which is what we're looking at, do not show up in the customizer.

Right.

But here's the thing, like, I know that what you're really trying to do is you're trying to create a landing page that doesn't have the header and footer.

So is there a way to do that? And the answer is, yeah, so what we could do is, we could come back to this to this page, we're gonna go to storefront web pages, click back into LP one.

And we're going to change that to be a WYSIWYG page.

Click save and exit, and we're going to go back to the customizer.

My LP one.

And here we are.

So we've arrived back at a page that has page builder fields.

That's terrific, except it doesn't it doesn't really meet the requirements of what we're trying to do, which is to create a landing page with no header and footer.

And the reason that we don't want the header and footer a lot of times on like a campaign landing page is it gives people too many too many links out of the page where they can fall out of our funnel and we can't measure the effectiveness of it.

So a lot of times direct response, copywriters, Director, direct response marketers, they want you to have your just the simplest thing as possible on the landing page so that you get the purest results.

So by having this be a WYSIWYG page, we we bring in the the widget regions that we would normally have, but we still have the header and footer.

So what you could do is if you Put a body class into your template that you can have.

Let's see here.

Let me actually I'm going to look at this on the front end, instead of being in the customizer, so I don't deal with the whole customizer iframe.

So we're here on the actual website, we're gonna click on the actual LPWAN going to inspect it.

If I come up here to my body, I know this is a little bit Cody, I want to show you this, even if you're not a developer, so that you'll see how it can be done.

And maybe you can hire somebody that can do this for you, maybe hire me, maybe hire somebody else and give them this video so that they can learn how to do their job.

But I've put these body classes in here.

And what the body class looks like is, let's see here, go to layout, based on HTML, and you can see in here, if I scroll down to my body, I have all these classes created in stencil code.

And so this says page type and inserts the type of page that it is afterwards.

And then I also have one that's right here.

If if there is a page title, which is only going to show up, if this is like a page page, it won't show up if this is a category or whatever.

So if there is a page title, then put in a class called Page, dash, and then dash case, dash case page dot title.

Alright.

That shows up here on the front end is this page dash LP dash one.

So it took the name of this page LP dash one, and it created a unique body class.

And because no other page on the site is named page dat, or just no other pages named LP one, then no other page on the site is going to have this class of page dash LP dash one.

So here's what we can do is we can say, Okay, if we don't want the header, we can add a line of CSS that says, On this body class page dash LP dash one for this element, the header.

Display.

Alright, let me go back in here, and I'll paste this into my CSS we have a custom css file in here, you may not have that.

So you can put this in theme dot SCSS, just at the bottom, always good idea to leave comments in here.

So this is the LP landing page.

So what this says is on this page, take the header and then just don't display it.

Now similarly, we also want to get rid of the footer.

So let's find the footer class name.

We're just going to scroll up here, and here it is right here.

So we're gonna say footer, dot footer.

Let's display it on that as well.

I'm just going to go right back to my same code.

I'm going to add it in here.

So I'm going to type comma, and then footer dot footer.

So this is now making this so that it'll target both the header and the footer and apply that same class to it.

And Save and Apply.

And if you're not Cody, hang on, I'm going to show you another cool method right after this to do the same thing, but in an easier way, once you get it set up.

Alright, so I'm going to come back here to LP dash one and refresh it.

And you can see great, it's looking really good.

Except we still got two things on here that we don't want, which is the breadcrumb.

So let's find the class to target that.

And here we go.

So this whole line right here.

Actually, we could probably just target this and be a little bit easier about it.

Let me just test this and say Display caps.

Don't want to yell at my CSS display.

None.

All right, so that's me get rid of it.

So I'm going to take that same class, come back in here to my CSS, and gonna do a comma and then paste that in there.

And again, we're making sure to put this page specific class in front of everyone that we Do so that we're not going to accidentally target other pages as well.

So coming back here to the landing page, let's click on inspect for the page title.

And we don't want to get rid of the whole page.

But we do want to get rid of this h1 page editing.

So we're gonna take that h1 Doubt, h1 dot page dash heading.

And we're going to do the same to that.

Paste that in there, paste in the page targeting.

And so now we're taking the header, the footer, the breadcrumbs and the page title, the page heading on just this one page.

And we're going to hide all of that stuff by setting the display to none on it, alright.

Now because I made this live in my stencil editor, I come back here to the front end and refresh it.

Then you can see now that there's nothing on the page, right, so it's a blank slate.

If we come in here to the I'm going to just exit the customizer, and then I want to come back into it.

Okay, come back into it and to customize.

And I'm going to click on preview, click on LP one click on Design.

And while nothing showed up in preview, when I click in here, you can see we've we've now successfully arrived at where I think you want to be, which is a page where we can use page builder fields to build out whatever we want.

So now I can take some of our fancy widgets from the epic page builder widgets.

app, like the masthead, drag that in there.

And then we could say, we'll just take the regular.

Let's take, let's take the alternating banners widget put that in there.

Alright, and then we could maybe take an image actually, let's take the layout and make this a two column layout.

Why sometimes it doesn't want to save this layout.

So now it gave us the two columns, we could take.

Let's just take a product set widget like this.

And I'm going to add a product to it.

There we go.

To change this to just show one.

So I guess I'm deep diving here into this landing page concept.

Just kind of want to show you guys like how, how easy it is to build something like this with big commerce real quick.

And I'm going to show you one more.

One more way to get this in, make it a little bit easier on yourself going forward.

So let's put, let's put this to that make it a little bit less wide.

And we'll also put in an accordion over here.

Right.

And this can have some more items.

All right.

republish it, and then we'll look at it on the front end.

And then I'm gonna show you this other method refresh.

And here we go.

So now we have this haphazardly built landing page with accordions and a product that we can click through from, I could have turned on the button on that widget, which would have looked a little bit more landing pages.

But you can see we're able to build out a landing page pretty quick.

But the drawback here is that we did have to put in custom CSS for this one particular page.

And so if you're going to build out, you know, 10 landing pages, then you're going to have to do that, you know, once for every landing page that you do, which is obviously a little bit of a pain.

Right.

Here's something else you can do.

And this is going to be a little bit more Cody, but I'll show you why this is good.

I took out that line of CSS that we did.

And so that's going to return our header and footer if I refresh.

Yeah, it should.

Sometimes it takes a minute for.

For theme changes to apply, nope, there it is.

Okay, so now we're back to this stuff, we have all that stuff built in, we have our landing page gods, but we have the header, the footer, the title and the breadcrumbs again.

Alright.

So the thing I'm going to show you has to be done with stencil CLI.

And so I'm going to show you how it works.

And if you're not a developer, just keep in mind, I'm showing you how it works.

And you can have a developer do this on your behalf.

So with stencil CLI, we can code things locally meaning on our, on our local computer on the computer that we're working on.

And we can preview it before we push it live, which is pretty cool from a developer standpoint means we can test things out before they push, so they don't screw things up, as opposed to just coding on your live site.

So a lot better coding scenario, for sure.

But there are some things that you can only do with stencil CLI.

And one of those things is to add more template files in big commerce.

And that's what we're going to do in this in this situation is we're going to come in here, and we're going to say, within the Pages folder, we're going to create a custom folder, and then a custom full an additional custom folder under there called page.

So under pages, we're going to create custom and then page.

And then within page, we're going to create a new file.

And the new file is going to be called Page dash landing page dot HTML.

Okay.

And what I'm going to do in here is I'm going to take the contents of your regular page template, I'm just going to copy the whole thing, right into the new template that we made.

Right.

So now it's an exact duplicate.

The only difference is is that this is a custom page named something else.

And what I'm going to do on this page is I'm going to take that code that we wrote.

And just to make it a little bit quick for the video, I would probably do this.

Without, I would probably do this in a slightly Cody your way if I wasn't just showing you guys live.

But for the purposes of this video, I'm just going to paste this into the page as inline styling, I get rid of this, I'm going to bring this back.

So I'm going to uncomment that.

And I'm going to take out our page specific directions here.

So what I'm ending up with is just a little bit of inline styling on this template, in particular, that says on this template, just go ahead and hide the header, hide the footer, hide the breadcrumbs and hide the page heading.

So how this is different from what we did previously is previously we put this into the site wide CSS, and then targeted the individual page.

And what I'm doing now is I'm I'm actually just putting it in on the individual page.

So this, this line of CSS doesn't exist anywhere, except for if you have this template applied.

Otherwise, this page template is going to be exactly the same.

And I'm going to just click Save, and then I'm going to push this up into my store.

And this will take a minute, you guys are getting a live demonstration of how stencil CLI works.

I'll probably do a full video on that here in the future.

But again, I know this is Cody, but I want to show you guys the benefit of doing it this way so that you guys can decide what's right for you.

If you're just trying to make a you know, a one off landing page here and there, then you know, the method I showed you prior probably going to totally work for you.

Whereas if you're going to build, you know landing page after landing page landing page, then this method is probably going to be better for you because it's going to it's not going to require you to do custom CSS every time you make one of these pages.

Alright, this does take just a minute.

So have you guys been what's new, what's going on in your store? Really.

Alright, this is almost done.

This is live I'm not cutting it.

So this is how long it actually takes to push a theme live.

And it could be it could be longer on slower connections but I have a fast connection.

Alright, so it's done pushing it's applied it to the store.

If I come in here I'll see a new version of the theme has been put in here.

I didn't change the name of it.

So it just added like an extra version of my current theme, but it is applied.

And what we can do now is we can go to storefront web pages go to LPWAN.

And everything looks the same so far right, we're gonna leave all this stuff the same, we're gonna leave this the same.

And what we're gonna do is we're gonna come down here to template layout file.

And now you see a new option that wasn't there before page dash landing dash page.

So when I select that, what I'm doing is I'm telling the system, apply that new custom template that I made to this particular page.

Normally, it's set the default but now we're going to set it to page dash landing page and save.

Alright, my themes customize.

Go to preview mode and nothing shows up here, we click on Design, everything should show up here.

It does take a couple minutes for new templates to go live.

Time, but LP one.

There we go.

Just takes a minute or two to update sometimes.

Alright, so now we have this blank template, no header, no footer.

Just start dragging stuff in just like that.

Now the nice thing about doing it this way, as I mentioned is that by having a little bit more upfront development work, we've established a template that we can apply it to lots of other pages.

Now so like if I'm going to just drag this in here and click publish.

I'll show you guys how nice and easy this is once you get it set up.

Come back here to the front end, I could see landing page one.

Two is everything's taken a minute today.

Let me tell you republish it just to make sure our girls Alright, so getting back to what I was saying the nice thing is here, let's go and create a second landing page.

And we're going to go to web pages LP two, we're just going to select the alternative template that we did, which is page dash landing page.

Save and Exit.

This is marked as visible in my menu again, if you want to take those out of your menu, assuming that your menu is dynamically populating, you can just uncheck them here from the visible thing.

And then we'll take them out.

But let's go and see the second one.

Go back into my customizer.

This time we're going to click on LP two I think I've done something wrong.

Let's see so LP one worked just fine LP two seems to have our header in it let's see here back and just double check that I did actually apply it that template to LP two Nope, didn't apply it somehow.

So everything makes sense.

So come back here to template file market is page dash landing page.

I think maybe you can't apply the template file on your initial save you have to come in and edit it or something I think maybe that's why that triggered it.

I'd have to test to replicate it.

Alright, now let's retest LP to make sure that it works right click on Preview LP to sweet like page got page builder fields.

And like I could drag my image gallery in here if I wanted I could drag whatever drag my I really love our our hero masthead widget.

I don't know if you guys like it so much and I dig it So I'm gonna click Publish click Preview.

And you can see now we got LP one, LP two, they're different.

And they don't have the header, footer and all that other baggage.

So this is kind of the power of custom, custom templates, you can make custom templates for pages for categories for brands, I believe, and one more thing that's escaping my brain.

But for the purposes of what we're talking about this video, you guys may want to consider having a landing page, custom template file put together for you, so that you can do exactly like this.

If it's your goal to have landing pages without header and footer and all that stuff.

Alright, that's it for this video.

I know I went way deeper than we were looking to go on the initial question, but I wanted to really thoroughly answer it and answer the spirit of the question, not just the technical aspect of the question.

So no, you can't use page builder fields on a raw HTML template.

But you can totally make something that accomplishes the same desired end goal, even if it's not in that exact method if that makes sense.

All right.

So let's see here what else we got.

If you guys found this helpful, hit the like button, and be sure to join our free community of store owners, which you can find at joinecommercegrowth.com.

And if you guys need a developer team that understands what I just talked about, and can help you accomplish all your goals, reach out to us at Epic design labs and we'll see if we're a good fit.

And I'm always looking for new ways to help you guys out so if you would leave me a comment, let me know what you're stuck on.

And that might be my next video.

Thank you so much, and I'll see you next time.