12th March 2012

Creating a Custom Homepage

One of the most common questions I see being asked is “how do I create my own homepage?”. The default homepage is great if you want to get straight into your products, but often you want to create a promotional area, or use the store as a secondary area of the site.

So how do we go about it? It’s pretty straightforward and can be set up in just a few moments.

Creating a new template file

Template Files
The first thing to do is grab the markup from the existing default homepage layout template. You’ll find this inside the default.html template. If you’re unfamiliar with where to locate template files, you’ll find everything under the Template Files tab in the Design section of your stores control panel. Click the edit link, and you’ll bring up the HTML source code of the existing front page.

You may ask why we don’t just edit this page and replace the markup here with our new homepage design; there is nothing wrong with doing this, but this is only really suitable if you are only marketing a handful of products for which you will add your own custom navigation to access them. In this tutorial, we will keep the existing default storefront layout and link to it from the homepage.

Default.html template
Now you have the default layout template source open, select the entire HTML markup and copy it, then open your favorite text editor and paste in the code. Now you need to save this file to upload into your store template directory via FTP. For easy reference, I’m going to call this _homepage.html.

Notice I’ve prefixed the filename with an underscore – “_”, this is important because this is how the BigCommerce system recognises custom templates. You can call your custom templates anything, as long the names are prefixed with the underscore.

Upload your new homepage code into the template directory of your store via FTP. If your unsure about how to go about doing this, BigCommerce have a handy set of articles here on how to connect to your store hosting via FTP. If you refresh your Template Files tab in the design area of your control panel, you will now see the new _homepage.html file near the top of your template list. Now click the Edit link.

_homepage.html Template
In the source code window that now appears, paste in the following code and save:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<div id="Container">
    <div id="Wrapper">
        <div class="Content Widest" id="HomePageContent">
            <div id="HomePageTopBanner">%%Banner.TopBanner%%</div>
            <div id="HomePageBottomBanner">%%Banner.BottomBanner%%</div>
            <div id="HomePageProductFeed">%%Panel.HomeNewProducts%%</div>
        <br class="Clear" />

Setting up your style sheet

We’ve now created the base layout for our new homepage. Pretty easy so far! Now we need to edit our main stylesheet. In the edit window, open your styles.css file. Scroll down to the bottom, and add the following definitions:
/* Custom CSS */

#HomePageProductFeed #HomeNewProducts { width: 870px; margin: 0 auto; }
#HomePageTopBanner, #HomePageBottomBanner {width: 960px; overflow: hidden; clear: both; }

New default.html Template

A bit of housekeeping: Go back to the default.html template and remove the following references: %%Banner.TopBanner%% and %%Banner.BottomBanner%%. While we are creating a new homepage, technically the default storefront template also counts as a homepage, and will pull in the wide banners we upload later. Not great when they break the boundaries of the template!

OK, so far, so good.

Changing display settings

Display Settings for New Products
Next we need to change a display setting for the “New Products” feed. In your control panel, click Settings and choose Store Settings. Now open the Display tab and find the New Products setting (it should be the second setting under Display Settings). Change this setting to display 6 new products at a time.

Add a banner

Image Manager
Now it’s time to add a banner into our homepage. First of all we need to upload an image we can use for our banner. Still in our control panel, head over to Image Manager which you will find under the Website Content tab. Click the Upload Images… button and then browser for your banner image. I created on which is 960 pixels wide by 300 pixels high. Select it, and then upload.

Banner Manager
Our template file contains regions which will pull in content from the banner system, so let’s move on to the banner section. Click the Marketing tab and choose View Banners, and on the screen that appears click the Create a Banner… button.

Choose a banner image
Give your banner a name, I called mine Homepage Banner Top, and then in the WYSIWYG editor, click the Insert/edit image button. In the dialogue box, choose the image you just uploaded from the option box labelled Image from gallery, and click Insert.

Linking the banner
Now we can turn this banner into a link. Click on the new banner in the WYSIWYG editor to select it and then on the Insert/edit link. In the Link URL field, put a link to the page you want to head over to, I used the URL /store/.

The /store/ link seems to have received very little documentation from BC, or at least I’ve never seen it mentioned. I discovered this by accident by testing a request made by a client to have his store separated into a different directory. The /store/ link directs straight through to the default.html storefront layout template, which is why we left the original file in tact.

Set the banner to appear on the homepage
All that’s left to do here is make this banner appear on the homepage. Select homepage from the list labeled Show on Page and finally choose Top of Page from the Location dropdown. Click save.

Setting the new homepage as default

Page Options
Finally we just need to enable the homepage, and create an obvious link to the main store area. We do this in the View Web Pages section underneath the Website Content tab. In that section, click the Create a Web Page button. Firstly, in the list labelled This Page Will, choose Contain content created using the WYSIWYG editor below. Enter Home as the page name, /home/ as the page URL, and ignore the content editor box.

Final options for homepage settings
As you scroll down the page, make sure Yes, show this web page on the navigation menu is checked, and that No Parent Page is selected. Now comes the two most important options! You will notice a dropdown box labelled Template Layout File:. This will by default have page.html selected. Click the box, and you will see that now you have a choice, and your new template, _homepage.html is available to use. Select this, and then check the next option Yes, display this page as the home page of my store.

Create a link to the store front

Store link settings
The last thing to do is create an obvious link to the default store front. Again, create a new webpage, but this time select Link to another website or document as the page type. Call your page Store and set the link to /store/.

Final result
So that’s it, we’re all done! Now we have a new homepage! I hope that wasn’t too painful and you were able to follow along. While my example doesn’t break the boundaries of page design, it gives you an idea of what we can achieve by using the templating system to apply custom designs to specific pages. Hopefully I’ve given you enough information to expand on when implementing your own designs. If you have any questions, drop a comment below.

2 Comments on “Creating a Custom Homepage

14th March 2012 at 1:59 pm

Duncan — these tips are fantastic and I really appreciate the effort you are putting into them. Keep them coming!

14th March 2012 at 5:53 pm

Thanks Bill,

I’ve been working on a project which I will be posting more about soon; I’m releasing a suite of tools for BigCommerce which will help you enhance the BC and make it into a more powerful sales tool.

Appreciate you taking time to stop by and read!

Leave a Reply