Creating a Unique Home Page Design

This article describes how to create a unique looking home page (or landing page). The goal here is to have a home page that is a different looking design than the rest of the store, that way we keep the current nopCommerce Theme but show the home page in a different way. Many designers choose to do this to advertise certain products or draw attention to a specific event the site wishes to draw its viewer’s attention to. I will show you how to make these changes and use as many internal functions of nopCommerce as possible… that way you are doing very little coding and it should be easy to update in the future as featured products change or highlighted events change. This will also keep your nopCommerce theme from breaking with errant divs and structure problems or major HTML changes.

In this example, I’m going to assume that you want a single column layout for your home page (leaving the rest of your site with a more traditional 2 or 3 column layout for the rest of the pages). You can see that we have already created a custom nopCommerce theme using the graphic’s page sold here. This will allow you to create a page that looks like the link below.

 

While keeping the rest of your site looking like you might expect. Here is what the rest of the pages look like… a 2 column layout (your layout can be 3 column, it doesn’t make any difference to your nopCommerce Theme).

How we do this is easier than you think. First of all you need to make one change to the “NopCommerceStoreDefault.aspx” file. This page represents the controls for you homepage and your homepage alone. A change to this page will not affect anything else (like category, product, or check out lane pages). When you open up the Default.aspx file in any normal text editor the first couple of lines will look like this.

<%@ Page Language=”C#” MasterPageFile=”~/MasterPages/ThreeColumn.master” AutoEventWireup=”true” Inherits=”NopSolutions.NopCommerce.Web.Default” CodeBehind=”Default.aspx.cs” %>

Notice the reference to “ThreeColumn.master” which is causing your homepage to render in 3 columns. So we will make a change and replace the code above with some new code that will change the page to render in a single (1) column layout. Our new code is displayed below. Making this change will also remove any items in those columns like the category section or the information block.

<%@ Page Language=”C#” MasterPageFile=”~/MasterPages/OneColumn.master” AutoEventWireup=”true” Inherits=”NopSolutions.NopCommerce.Web.Default” CodeBehind=”Default.aspx.cs” %>

Ok, so now we have the home page rendering in a different layout than the rest of the site. But now what? What about featuring some products with big images, or placing a really nice swf file that rotates information related to your users. Well this is the best part. You can do all this from inside the nopCommerce Administration area. Go to “Content Management” -> “Topics” -> Then “edit” the “HomePageText” Topic. Here you can go nuts and create any layout or design you want. You have full access to use the entire area as we did with the example site above.

While this is a simple tutorial, if done correctly with good supporting graphics and correct content can really give a site a custom professional look. You can add any type of assets you wish, like a swf file or some jquery slide shows. Just use the topic content editor in “HTML” mode instead of the default editor mode to alter the literal HTML mark up displayed on the page. Also making a custom Homepage in this manner allows you to easily update the home page topic content when something on your home page needs to be changed. The coding change you made earlier only needs to be made the one time.