How to Edit the Homepage on BigCommerce

Are you looking to easily customize your BigCommerce homepage without diving deep into code? In this video, Kal Wiggins, an experienced BigCommerce developer and store owner, walks you through the process of editing your homepage using the BigCommerce page builder. Whether you’re using the default Cornerstone theme or a third-party theme, Kal’s guide will help you make the most out of your BigCommerce design tools.

🎥 Watch the video now to get hands-on tips from Kal!

What You’ll Learn in This Video

Kal breaks down the essentials of homepage customization, showing how to make impactful changes without needing extensive coding skills. Here’s a brief summary of the video with key timestamps to help you navigate the content:

• Introduction and Getting Started (00:00 – 00:31): Kal introduces himself and sets the stage by explaining how to access the homepage editor via the BigCommerce backend.
• Using the Page Builder (00:31 – 03:17): Learn how to use the BigCommerce customizer to adjust homepage elements. Kal demonstrates how to easily add images, edit carousels, and tweak the product rows.
• Customizing Theme Styles (03:17 – 04:51): Discover how to modify colors, remove unwanted elements like the “Powered by BigCommerce” footer, and disable the built-in carousel to improve performance.
• Manual Product Display (05:50 – 07:47): Kal explains how to manually select and order products on your homepage using widgets, offering full control over your product grid.
• Advanced Widget Use and Final Tips (07:47 – 10:13): Explore the flexibility of widgets to build a highly customizable homepage. Kal shares tips on using his Epic Page Builder Widgets app for more options and better design control.

Why You Should Watch This Video

This video is perfect for BigCommerce store owners looking to take control of their homepage layout without extensive development work. Kal’s clear and actionable instructions make it easy to follow along, ensuring that you’ll walk away with practical tips to enhance your store’s look and functionality.

Ready to give your BigCommerce homepage a refresh? Watch the video now and start customizing your store today!

Full Transcript

[00:00] Introduction
Hey guys, in this video, I’m going to show you how to edit your BigCommerce homepage. Before we get started, my name is Cal, and I’m a store owner and developer just like you. I’ve been building BigCommerce stores since 2010—thousands of them—and I’m here to help you figure this out. Let me share my screen and show you where to get started.

[00:31] Overview of BigCommerce Themes
This is the Cornerstone theme that most people use. If you’re using a third-party theme, the settings may be a little different, and your site might be slower. Cornerstone is minimal and a bit ugly out of the gate, but you can do a lot with it easily.

[01:05] Accessing the Customizer
To access the customizer, go to Storefront > Customize. You can dive into the code if you want, but the page builder (also known as the customizer) allows you to do a lot without coding.
By default, you land on the Design tab.
There’s a Preview tab to see a rendering of your live store.Note: This is a preview, not the actual front end.
In the Design tab, you’ll see page builder regions in purple and blue, where you can drag items like images and widgets onto the homepage.

[01:39] Working with the Page Builder
You’ll find several elements already present on your homepage, such as:
Carousel
Featured Products Row
New Products Row
Top Products Row (shows up after some sales)
These elements don’t look great by default, but you can turn them off and replace them with custom widgets.

[02:10] Editing the Homepage Carousel
To edit or remove the carousel:
Go to Storefront > Homepage Carousel.
Add or change images, heading text, button text, and links.
Tip: I’m not a fan of carousels, so I suggest turning it off to speed up your page.

[02:42] Editing the Logo, Favicon, and Social Links
Change your logo by uploading a new one.
Change the favicon here as well.
Update where your social media links point to.

[03:17] Customizing Theme Styles
To change things like header and footer colors, go to Theme Styles:
For example, set the header to a gray background.
Remove “Powered by BigCommerce” and the brands from the footer.
Show or hide payment icons.

[04:22] Removing the Carousel and Editing Product Rows
You can disable the homepage carousel under the Home Page tab. I don’t like JavaScript-heavy features like carousels because they slow down the page and reduce conversion rates.
You can also control the number of featured, popular, and new products shown on the homepage. I usually disable the “Most Popular” and “New Products” rows and instead feature more products in the “Featured Products” section.

[05:21] Adding a Hero Section
A product grid is nice, but your homepage also needs a hero image:
Go to the Widgets tab.
Drag in an image widget and upload your hero image.
Preview the changes to see how it looks.

[06:31] Manual Product Selection with Widgets
If you want more control over the products shown:
Go to the Widgets tab and drag in the product set.
Manually select the products you want to feature.
Arrange the products in any order you like.
Tip: Using widgets gives you full control over your homepage layout and content.

[07:47] Enhancing Your Homepage with Widgets
You can get creative by using different widgets:
Add text widgets or layout widgets to customize your content.
Consider using my app, Epic Page Builder Widgets, which adds more free widgets.
You can also upgrade to a one-time $50 package for additional widgets.

[09:12] Summary of Customization Options
In this video, we covered how to:
Customize your header and footer colors.
Add or remove content using widgets.
Remove unwanted elements like the carousel.
There’s a lot more you can do with widgets, from adding images with text to using the Hero Banner widget.

[09:48] Final Thoughts
Hopefully, you found this helpful! If you need help designing your homepage or getting it to look exactly how you want, feel free to reach out to me at Epic Design Labs. I’m happy to help you with your store design and customization.