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, and 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 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 and 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, 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, that because your landing page is either a success or failure, it either sells something you're 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.

Ecommerce Landing Page

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 for or you don't.

So what I just did was create a page, which I call the 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, and 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 this, and I went over this in a different video, is to use the raw HTML template.

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

Number one will let you use really any field, 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 fits in your normal theme.

It has all those fonts, colors, backgrounds, and 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:

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 run 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 that Big Commerce won't let you create files there, in their template system.

Unless you're using the proper stencil CLI methods,

So I'm going to 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.

It doesn't have to be us; there are lots of good people out there.

Alright, so here's what I'm going to do.

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

And inside that, there are all these different pages 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 and has to be lowercase, just like that.

And then within that, you add a subfolder called page, because we're going to make this 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 going to 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 here inside the page; let me expand that again.

Inside the page folder, we're going to create a new file; we're going to 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 in 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 create a custom page template that is completely blank.

And so if we apply 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 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 we had on our regular per our templates, which are probably brain-smoking; 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 normal page template would have.

Now, that's not going to be helpful, because it's just going to do the same thing that, as 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, for simplicity's sake, 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 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 going to 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, you know, 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 you've got header dot header, comma dot breadcrumbs, comma, h1 dot page, dash heading, comma, and footer dot footer, and I'm going to tell you to remove all of that and disable your caps lock, 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 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 a 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 it works if this is your first time seeing it.

You code things locally.

Then you can preview it locally, which is why I skipped that step.

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

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

And I will 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, you'll see that hopefully, 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, I can now 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.

Accordingly, that's a good one right here.

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

Unlimited Landing Pages

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, 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 2.

And I think I have to; I don't think I'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 is 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, I now have two landing pages.

So this is how I would create a landing page without the header or footer and 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, that is really cool, especially once you look at the epic page builder widgets app, which, 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 free and super cool, including that hero mess head that I showed you guys.

Oh, and alternating back.

Okay, I have 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, 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 or 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.