How to Edit Home Page for BigCommerce stores?

Which page do people visit first in their shopping journey on an eCommerce store?

Of course, the majority of answers will be the home page. Perhaps people first get to know about the store via its blog, but the home page is always the key factor for people to evaluate the profession of an online store. A home page with your unique color will help merchants construct a good impression and credibility in the customer’s mind and thus promote them to place an order.

As a result, the way to customize the home page is often a big concern of numerous store owners, including the one in popular platforms like BigCommerce. Understanding that, this post provides BigCommerce merchants a detailed guide of how to edit the home page for BigCommerce stores from the header, banner to the footer.

How to customize a BigCommerce banner?

Step 1: Content

To start customizing the banners of the homepage, you need to open the control panel placed on the left side of the screen.

There, click on Marketing and then select the section named Banner.

Now, you can choose between creating a new banner or editing the existing one. If you want to create a new one, select the button Create a banner in the top bar.

In case you want to change the existing one, click on this icon … in the row of Action. The choose edit to start modifying your banner.

Remember to choose the location which is the top or the bottom of the homepage.

Step 2: Color

Go back to the control panel, select Storefront and open My Themes.

There, click on Customize and you will be navigated to Page Builder to make changes to your homepage.

There is a small grey row in the left side, click on the forth icon, it is Theme Styles.

Open Global and you will see the Banner Background. Choose the color you like and Save changes to change your banner background color.

How to customize a BigCommerce header?

With the header, users are allowed to edit its location, size, and color. Similar to the process of editing the banner color, you need to Customize your themes from the Storefront.

In the page builder of your BigCommerce store, click on the icon of Theme styles to choose Header & Footer. This section enables you to personalize the logo, utility navigation, and main navigation of your homepage.

Step 1: Logo

You will see all the options to change:

• Logo position: centre, left, right
• Logo image size: optimized for theme, original, specific dimensions
• Logo font size: from 14px to 74px
• Logo text color

Besides, you can select your logotype, which is in the form of text or image, by clicking on Logo in Storefront.

If you prefer the text logo, click on the option Enter text to display your logo. Below that, BigCommerce enables you to change your store logo by texting the name you want in the box or change its size and color.

In case the text logo is not your favorite option, you can select the other - image logo. It is straightforward to upload your image logo. After selecting the option Upload custom image to use as your logo, you can exploit the drag and drop feature here to upload your photo or select one in your computer library.

Step 2: Utility navigation

In the utility navigation, users are only able to make changes to the color, including colors of text, text hover, cart dropdown background, cart dropdown border, and cart counter background.

To do that, come back to the Page builder, select Theme Style, and then Click on Header & Footer.

Step 3: Main navigation

Besides the color, BigCommerce empowers merchants to set the display mode for the menu and select whether to hide or show the links to web pages.

In terms of display mode, users are offered two modes which are:

• Simple: menu display depth of three
• Alternate: max menu display depth

Also, they can change the color of text, text hover, drop menu background, drop menu border, and quick search background.

From the utility navigation, scroll down, and you will see the main navigation menu.

How to customize a BigCommerce carousel?

Step 1: Slide

Open Storefront and select Home Page Carousel. There, you will be given multiple options to customize the carousel for your store.

With the slides, BigCommerce enables users to remove the existing slide, add the new one and change their position with the drag-and-drop features. You can adjust all the default images to your own ones.

More than that, you are allowed to select seconds for swapping each slide which ranges from 1 to 90,000 seconds.

In addition, you can edit how the carousel will be displayed on the homepage by making use of several options of carousel in the Home Page of Theme Styles.

There are 4 option for showing the carousel, which are:

• Show carousel
• Show carousel arrow (carousel arrows are displayed in the left and right side of the carousel)
• Show carousel Play/ Pause button (the button is placed below the carousel)
• Allow image to stretch on large screen

In default, the option Allow image to stretch on large screen is not selected while the rest are chosen. So, if you want to change any options, just select or remove the tick in the box.

Step 2: Content

Still in the Home Page Carousel, you can easily edit the text of each slide right on the blocks above them. To do that, scroll down, and you will see a list of slides, click on the one you want and start to edit the heading, text, button text, and even add a link to each slide.

Step 3: Color

Come back to BigCommerce dashboard and select Storefront. Then, click on My Themes to Customize your store theme. In the Page builder, open the Theme Styles in the left row and select Home Page, and you can freely customize colors for your carousel. You can choose suitable colors for every component in the carousel, including:

• Content background
• Header text
• Description text
• Indicator, its active, its background
• Arrow, its border, its background
• Text, border, and background of play/ pause button

How to customize a BigCommerce home page body?

Step 1: Display settings

There are two main sections in the home page body: Most Popular Products and New Products. And users can easily modify them by adding new blocks or changing the existing ones.

To add more product blocks, users need to open the store page builder by selecting Customize in My Themes.

There, you can drag the widget of Product or Product set (based on your desire) and drop in the allowed areas, which is stated “Drag and drop widgets here”.

To change the number of products in each block, open the Theme Styles and choose Home page. Scroll down, and you will see options to set the number of products for three sections: Features Products, Popular Products, and New Products. Also, you are allowed to remove the unnecessary part by selecting “disable”.

Step 2: Color

Still in Theme StylesBigCommerce empowers users to change colors of text and buttons. To do that, open Products, scroll down and you will see a part named Product cards. Then, you can select the color you want for:

• Product header text color
• Product header text hover color
• Button text color
• Button background

How to customize a BigCommerce footer?

Step 1: Text

Users are able to change these section names by the one they like with ease via Stencil File Editor.

Before editing the content, users are required to make a copy of the existing store theme. Exit the page builder, click on Advanced, and select Make a copy.

After finishing copying, click on the symbol … of the copy file and choose Edit Theme Files to start editing the content of the footer. It’s time to change the default text of the footer in your own words.

In the left side, click on file named lang and open en.json.

Now, you need to look for the text you want to change and replace it. For example:

With “Newsletter”: find the section newsletter and change the text after subscribe

Step 2: Store location

To add store location, go to admin panel, choose Store Setup and open Store Profile.

Then, type the store address, select country and type of address.

Afterwards, save the changes.

Now, your store address is displayed in the footer of your home page.

Step 3: Social media icons

Users are offered two options with social media icons on the home page: to show or hide. Suppose you want to show, tick on Show social media icons. Also, there are two options for icons, which are left, right.

Besides, the color of these icons can be easily changed by selecting Buttons & Icons in Theme Style. Then, scroll down, and you can click on the color box beside Social media icon to choose the one suitable for your store.

Step 4: Payment icon

In Theme Styles, select Header & Footer, scroll down to the Payment icons. Click on the available brands for your store, and they will appear in the footer. To hide the icons, just remove the tick.

Step 5: Display settings

When opening Header & Footer in Theme Style, users will be able to customize the display settings of BigCommerce store’s footer. It gives you the ability to select whether to show or hide:

• The statement “Power by BigCommerce”
• Popular brands
• “&copy” as well as the store name and current year

Step 6: Color

With the footer, you are only allowed to change the background color, which can be done by making use of the section Footer in Header & Footer.

Final thoughts

In conclusion, it can’t be denied that the home page plays a vital role in building a good impression with customers about the eCommerce stores. That is the reason why to edit homepage on BigCommerce is always considered one of the top priorities and attracts much attention from eCommerce entrepreneurs. Hence, we hope that after reading this post, you can customize your home rapidly and effectively.