How to Edit the Homepage on BigCommerce

[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.