How to Build a Landing Page in BigCommerce

Hey guys, today we're going to build a landing page on big commerce.

In this video, I'm going to go over exactly how to do that before we get started.

My name is Kal, I'm a developer store owner.

And I run the E-commerce growth community for people just like you and me.

And if you find this video helpful, give me a like and subscribe so that you can hear other cool hopefully stuff.

Right? All right.

Okay.

Oh, yeah.

Boom, Callias.

Yeah.

All right.

Let me share small things right, let's share my screen.

And I'm going to show you how to do this.

Now what I'm talking about when I say a landing page, is what I think a lot of direct response copywriters direct response ad type people mean, which is a page where you can put whatever you want on it without a lot of ways to leave the page, right?

So when you spend, you know, $5,000, sending traffic to a page, what you don't want is for them to get to that page.

And instead of taking the action that you want to get distracted by something like your about page, and then now they're often "la-la-land" and doing whatever and maybe they're still buying from you.

But you know, in your metrics, because your landing page is either a success or failure either sells a thing is trying to sell or doesn't.

If somebody wanders off in a different direction, then they're going to look like a failure, even if you successfully brought them into your brand.

And so it can really muddle the results.

And so what direct response people want is a landing page that doesn't have any other paths out, it's either yes or no, you either get the thing you take the offer or you don't.

So what I just did is I created a page, I call it LP one.

And I'm just viewing this in the customizer.

And you can see that it's got some extra stuff, it's got a page title, it's got a breadcrumb, it's got a whole header, it's got a footer, right?

And so this has a bunch of elements that direct response people aren't going to like because again, this is like 20 Something paths out of this funnel, that don't involve them clicking a yes to buy it or Yes to get your, your paper or whatever.

So I'm going to show you guys how to create a template that takes all this stuff out.

Alright.

Now one way that you could do and I went over this in a different video is you could use the raw HTML template.

But it's, it won't let you use page builder fields.

Number one will let you use really any fields, just raw HTML.

So you're coding it literally from top to bottom.

And it has no relationship with the rest of your theme at all.

Including fonts and colors, and all that kind of stuff.

Whereas this page, because it fits in your normal theme.

It has all those fonts, colors, backgrounds, all that kind of stuff, it just has some other stuff that we don't need, right?

So here's what I'm going to show you guys.

And this might be a little bit technical, but I want to show it to you guys so that you see what's possible.

And if you need a developer to help you with this, you can reach out to my company or reach out to someone else's company as shown in this video, so they'll know what you're talking about.

And what I'm going to do is the theme that I'm running here but on my local computer.

And so this is how we develop things using the stencil as we develop it here on our local computer, and then we push the changes live.

And so you have to do this with stencil CLI.

And the reason is big commerce won't let you create files in there, in their templates system.

Unless you're using the proper stencil CLI methods.

So I'm gonna show you how that works.

And again, if this is too technical, just hire somebody like us to do it for you, you probably need somebody like us anyway.

Doesn't have to be us, there are lots of good people out there.

Alright, so here's what I'm gonna do.

I'm coming in here to my templates, and to my Pages folder.

And inside that, there are all these different pages here that make up your theme.

Now I've already added a sub-folder of pages called Custom.

And if you're going to do this, it has to be a subfolder that has to be called Custom has to be lowercase, just like that.

And then within that, you add a subfolder called page, because we're going to make this as a page.

We could also do this as a category if we wanted to apply this to a category.

But because I'm going to show you guys how to do this on a page, we're gonna use a custom page template.

So again, on your pages, we've made a custom folder for custom and a custom folder called a page.

And then what we're going to do is in here inside the page, let me expand that again.

Inside the page folder, we're going to create a new file, we're gonna call it page dash, landing dash page dot HTML.

It doesn't matter exactly what you call it, it does have to be a dot HTML.

I don't think it has to be prefixed with the page but I did that so that it would line up with the other ones that I've created in the past.

So what we've done is we've created a custom page template, which is completely blank.

And so if we applied this to a page right now, there's no code to put on the page.

So it's not going to do anything So what we need to do is we're going to actually come to the regular page template.

And we're going to just select all and copy.

And then we're going to come back up here to the landing page template.

And we're going to paste it in there.

So now we have everything that we had on our, on our regular page templates are probably brains melting, they're just like that.

I record these "live."

So you guys just witnessed that.

Alright, so we have a custom page template called Page dash landing dash page, and it's got all the exact same stuff that a paid that normal page template would have.

Now, that's not going to be helpful, because it's just going to do the same thing that you know, this current page template has done.

So we want to make a couple of changes.

And what I'm going to do specifically is I'm going to for simplicity's sake, I'm going to just remove all these elements here, using CSS.

So I'm going to inspect the normal page template, and I'm going to choose the things I want to remove, which is this h1 page heading, as well as this, which is the breadcrumbs.

Say that.

And that.

So I just bill just separated with a comma.

So Oh, l dot breadcrumbs, and comma, h1 dot page heading.

And this may be different.

If you're starting with a different template, I'm starting on Cornerstone.

So if you're using cornerstone, it'll probably be about the same.

So I'm gonna say, take all that stuff, copy it, and choose the header.

And here's the selector for the header.

So comma, and then I'm pasting other stuff.

And you can see I'm just really like daisy chaining all the classes of items that I want to remove.

Again, this, you know, if, if this is technical, just have somebody like me do it for you, but I'm going to show you what it takes to make it happen.

So here's the footer class, which is a butter-up footer.

And I'm going to paste all the other stuff in here.

So got header dot header, comma dot breadcrumbs, comma, h1 dot page, dash heading, comma, footer, dot footer, and I'm going to say, take all that stuff, turn off by caps, wow.

Turn off my caps, and display none, which makes it look like there's nothing on the page, which is true, there's nothing on the page, because all the stuff that was there, which is just the default stuff, I just hit.

Now what I need to do is I need to come back to our template, make sure that I'm in the right one, and then page dash landing dash page dot HTML.

And I'm going to just pay for some admittedly yucky inline styling here.

You know, if you're a developer and this is horrifying, you know, do it in a better developer way.

I'm just doing it in a quick way for the sake of this small video.

So I'm just pasting this in line on the page dash landing dash page dot HTML, saving it.

And then I'm going to push it up to my store with this command.

Stencil push dash, delete dash a, those flags are optional.

You can do stencil push and just answer the questions that it asks.

But dash, delete, and dash a will skip those questions and automatically apply it to the site and automatically delete the oldest template file to keep your templates nice and clean.

This does take just a couple of minutes here.

And I'll just give it a second here.

Take a drink break this is Austin.

So works if this is your first time seeing it.

You code things locally.

And then you can preview it locally, which I skipped that step.

But you can preview it locally, the different command, and then when you're all done and happy with it, and you push it up with stencil push okay, so now let's push live, it does take up to you know, a minute or two to go live sometimes it's all just slowly meander back into the backend.

And go to web pages and it goes to this LP dash LP one.

And I'm going to scroll down here to where it says template layout file.

And I'm going to change this to be a page dash landing dash page, which clearly is the page that we just created.

So now we have LP dash one, sorry, LP one.

And if I refresh it, then you We'll see now that hopefully, nothing's on the page, nothing's on the page.

And if I go into the customizer.

Click on LP one, you can also get to it by selecting it from the drop-down over here.

You can see it's a blank page.

But when I click on the Design tab, now I can build my page with whatever widgets I want.

Like the hero masted, which is from the Epic page, builder widgets, and my company's app.

A lot of these are free too, by the way, so check it out, a couple of them are paid, but not a big deal.

They're super inexpensive.

Accordion, that's a good one right here.

Alright, so I want to show you guys how to do this.

So the power of doing it this way is, you know, we've ended up creating a template that basically strips out the header, the BigCommerce navigation menu, the BigCommerce footer navigation, the page title, and the breadcrumb.

So it's ready to just put whatever you want to be on the page on the page just like this.

And because we created this as a standalone template, you know, if I want to come in here and add another landing page, I can come in here and say LP two.

And I think I have to, I don't think it'll apply this template this time.

Let's just test this out real quick.

So I click save, I want to go back into it, just verify it applied.

And yeah, I didn't apply.

So for whatever reason, you have to create your page and then come back here and apply the template layout file and secondary action.

But by doing that, now I have two landing pages.

So this is how I would create a, you know, a landing page without the header or footer, all that kind of stuff, which is what direct response people love.

And you could totally do that on big commerce, you could totally do it in a way that lets you use the Page Builder, you know, lets you use the WYSIWYG content, if you really want to have a page builder is really cool, especially once you look at the epic page builder widgets app, that at the time of this filming, will add all these additional apps to your site.

Now these ones over here, do you know our gated behind a one-time payment?

But you know, all these over here are all free and super cool, including that hero mess head that I showed you guys.

Oh, and alternating back.

Okay, I got to stop somewhere.

This is how you do it.

I appreciate you guys watching the video.

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

And if you guys need a developer to help you with this if you know if this super techy explanation and demonstration does exactly what you've been looking for is, you know, a quick one-time setup in order to create landing pages that you can do on your own just using Page Builder without having to use something like Shogun or whatnot.

You know, hit us up we can set this up for you at Epic Design Labs I'm always looking for new ways to help you guys out so whatever you're stuck on whatever you have questions about, leave me a comment below and that might be my next video.

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