How to Build a Landing Page in BigCommerce

(00:01)
Hey guys, are you trying to build a landing page on BigCommerce?
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 Ecommerce Growth Community for people like you and me. If you find this video helpful, give me a like and subscribe, so you can stay updated with more helpful content.
Alright, let’s dive in!

(00:31)
Now, when I say “landing page,” I mean what a lot of direct-response copywriters and ad folks talk about—a page where you can put whatever you want without a lot of ways to leave the page.
For example, when you’re spending $5,000 driving traffic to a page, you don’t want people getting distracted by links to your about page and wandering off. Your landing page needs to be focused—it either sells the thing it’s trying to sell or it doesn’t. Distractions can muddle your results.
(01:07)
So, what direct-response people want is a landing page that has no other paths out. It’s either a “yes” or “no” decision—you either take the offer or you don’t.
(01:35)
Now, I’ve created a page and called it lp1. Here’s what it looks like in the customizer. You’ll notice it has extra elements like a page title, breadcrumbs, header, and footer—all things direct-response marketers won’t like because there are too many ways out of the funnel. They don’t want people clicking anything except the “yes” button.

(02:07)
I’m going to show you how to create a template that removes all these distractions.
(02:35)
Now, one way to do this is by using the raw HTML template. But the downside is that it doesn’t let you use page builder fields or any fields—it’s just raw code, so you’re essentially coding the entire page from scratch, top to bottom. Additionally, it won’t inherit your theme’s styles like fonts and colors.
On the other hand, the page I’ll show you today retains all the theme’s fonts, colors, and backgrounds while letting you remove the unwanted elements.

(03:02)
This is where it gets a little technical. If you’re not a developer, you can hire someone like my team to do this for you. But I still want to show you how it’s done.
(03:33)
We’re using BigCommerce’s stencil-cli because BigCommerce won’t let you create template files without it.
Here’s what we’ll do:
Go to your template folder on your local machine.
In the /templates/pages/ folder, create a new subfolder called custom. It has to be lowercase.
Inside /custom/, create another folder called page.
Inside /page/, we’ll create a new file named page-landing-page.html.

(04:31)
Now we’ve created a blank custom page template. If we apply this to a page right now, nothing will show because there’s no code in it yet. So, let’s copy the code from the regular page template and paste it into our new page-landing-page.html file.

(05:36)
At this point, we have a custom page template that’s identical to the regular page template, which still isn’t helpful.
The next step is removing unnecessary elements like the header, footer, page title, and breadcrumbs.
(06:07)
I’ll use CSS to hide these elements. Here’s what I’ll do:
I’ll inspect the page and target the classes for the page heading (h1.pageheading) and breadcrumbs (ol.breadcrumbs).
Then I’ll target the header (header.header) and the footer (footer.footer).
I’ll add display: none to hide these elements.

(07:47)
Now, I’ve applied inline styling, which isn’t the most elegant solution, but it works for the sake of this demo.
(08:22)
Next, I’ll push these changes to the store using the command stencil push --delete -a. This will upload the changes and delete old template files to keep things clean.

(09:10)
Once it’s live, I’ll go into the BigCommerce admin, find the page lp1, and apply the new template page-landing-page.
(10:04)
And voilà! When I refresh the page, it’s completely blank—just how we wanted it. Now I can build the page with widgets using the Page Builder tool.

(10:54)
The beauty of this method is that it creates a flexible template that strips out all the unwanted elements, leaving you with a blank canvas to build any landing page you want.
(11:31)
If I want to create another landing page, I can do it in just a few clicks by using this template. I just need to create a new page, apply the template, and boom—instant landing page.

(12:31)
I hope you found this walkthrough helpful! If you need help setting this up on your store, feel free to reach out to us at Epic Design Labs. We can help you create landing pages that are customizable and optimized for conversion.
Thanks for watching! If you have any questions, leave a comment below, and I’ll be happy to help. See you in the next video!