How to Build a Landing Page in BigCommerce

For anyone involved in website, ecommerce, or marketing campaigns and especially if you’re working with BigCommerce, this is the guide you’ve been waiting for! Kal, the CEO and developer store owner of Epic Design Labs, recently shared a comprehensive video on How to Build a Landing Page in BigCommerce. If you’re looking to convert traffic efficiently without sending your visitors and potential customers to the abyss of endless page links, then this guide is a must-watch.

Why a Distraction-Free Landing Page?

Kal highlights the significance of users, conversions, creating landing pages for conversions that focus on conversion:

Focused Path: Direct response professionals know the power of a single-action page. By eliminating numerous exit points, you streamline the user’s decision-making process.
Clear Metrics: When assessing a landing page’s success, it’s crucial to know if it’s converting effectively. By reducing distractions, you can more accurately gauge the page’s performance.
Increase ROI: If you’re investing heavily in driving traffic to a page, the last thing you want is for potential customers to wander off aimlessly. A focused landing page ensures a better return on your investment.

A Sneak Peek Into the Process

Kal’s process is thorough and perfect for those who appreciate the technical side of things. Here’s a brief overview:

Starting Point: Understand the anatomy of a landing page. It’s more than just content; it’s about eliminating distractions.
Customization: Kal demonstrates how to remove default elements such as headers, footers, breadcrumbs, and page titles, ensuring your audience focuses only on your primary message.
Easy Duplication: Once you’ve mastered the landing page creation process, duplicating it for multiple campaigns becomes a breeze.

For those customers who might find the technical details daunting, don’t fret! Epic Design Labs, a leading bigcommerce development agency platform, can assist you with your needs. They even offer a range of ecommerce landing page templates and additional widgets to enhance your BigCommerce experience.

Ready to Dive Deep?

If you’re ready to start building something to transform and optimize your BigCommerce store’s landing and product pages, the video is a goldmine of information. Kal not only showcases the how but delves deep into the why, ensuring you understand the principles behind every step.

What you’ll gain from watching:

A comprehensive step-by-step tutorial on creating BigCommerce landing pages.
Insight into the significance of a focused, distraction-free landing page.
Tips and tricks to use BigCommerce features effectively.
Information about additional tools and widgets to enhance your store.

Watch the video above and unlock the potential of BigCommerce to optimize your landing pages!

Remember, the ecommerce sales landscape is ever-evolving. To stay ahead, you need to continually adapt and refine elements of your business strategies. You’re one step closer to ecommerce success!

Full Transcript

(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!