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
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.
[alert style=”green”]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.[/alert]
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.
[alert style=”green”]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. [/alert]
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.
In the source code window that now appears, paste in the following code and save:
<code><!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">
%%Panel.HTMLHead%%
<body>
<div id="Container">
%%Panel.Header%%
<div id="Wrapper">
%%Panel.WrapperBanner%%
<div id="HomePageContent">
%%Discount.FreeShippingEligibility%%
<div id="HomePageTopBanner">%%Banner.TopBanner%%</div>
<div id="HomePageBottomBanner">%%Banner.BottomBanner%%</div>
<div id="HomePageProductFeed">%%Panel.HomeNewProducts%%</div>
</div>
<br />
</div>
%%Panel.Footer%%
</div>
</body>
</html>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; }<br>
#HomePageTopBanner, #HomePageBottomBanner {width: 960px; overflow: hidden; clear: both; }
[alert style=”green”]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![/alert]
OK, so far, so good.
Changing display settings
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
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.
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.
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.
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/.
[alert style=”green”]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.[/alert]
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
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.
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
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/.
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.