5 Easy Techniques to Take Your nopCommerce Site From Basic to Brilliant

nopCommerce offers a great modern theme out of the box that has been designed to make any online store site look professional, polished, and pristine. There is a huge increase in the usage of multiple mobile devices; a website needs to be optimized for smartphones, tablets, desktops, gaming console browsers, and big screen TVs... the list goes on. The online store interface must be viewable and convenient on all devices and in all resolutions. nopCommerce default theme offers a clean and up-to-date responsive design.

Many store owners like to use nopCommerce out of the box as it comes with a great user-friendly theme. But, at the same time, there are many store owners who do not prefer to use the default theme. Why? The reason is quite simple—If every store owner or web developer used the same default theme, then all the store sites based on nopCommerce would look quite similar. 

In order to make your store site stand out as compared to other websites, you should make use of some customizations that will change the look and feel of your online store.

1. Change Footer Background Color in nopCommerce

Go to: Nop.Web\Themes\DefaultClean\Content\css\styles.css

Open your style sheet “styles.css” and locate the following:

.footer {
    background-color: #eee;
    text-align: center;
}

As we can see in the CSS code, the background-color is mentioned as “#eee”. Now, we can simply play around with different colors and change the footer background color.

Let’s change it to “aqua”:

/*********** FOOTER ***********/

.footer {
    background-color: aqua;
    text-align: center;
}

Here is the result:

Now, let’s change it to “darkorange”:

/*********** FOOTER ***********/

.footer {
    background-color: darkorange;
    text-align: center;
}

Here is the result:

2. Change CSS Style Sheet With Language in nopCommerce

There are times when nopCommerce developers/designers have to implement a different layout for each language (if there are more than one languages installed on the store site). The requirement certainly makes sense because in different languages the length of words/sentences can be different. So, if your layout is specific to the content of one language, changing the language of the store site might create some issues with the layout of the site.

Let’s take an example: You have a view page with some content on it. You would like to change some styling depending on the selected language.

What you need to know: You will need to find out the IDs of two languages that are installed on your store site. You can get the ID directly from the SQL Server database.

Two languages: English and French

Now, if you have two different themes installed for each language on your store site, you should go to the theme content folder and add the respective CSS style sheet (for each theme) in the following location:

If your language IDs are as follows:

– English: 1
– French: 2

You should include this code on your view page:

var workingLanguageId = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Id;

if (workingLanguageId == 1)
{
  Html.AppendCssFileParts(string.Format("/Themes/{0}/Content/css/styles_English.css", themeName));
}
else if (workingLanguageId == 2)
{
  Html.AppendCssFileParts(string.Format("/Themes/{0}/Content/css/styles_French.css", themeName));
}

As long as you have the respective CSS files in the correct location, each style sheet will be used depending on the selected language.

3. Add Content to the Top Header in nopCommerce

We all have seen that many websites post content like address, phone number, and social media links in the top header. This design strategy is quite useful in presenting your information to online users right away.

Many online stores like to post their contact information in the top header so that customers get access to that information from any page with the top header visible. This way, online customers do not have to spend time searching for the "contact" or "about us" page.

You can use the top header section for posting content like:
– Customer service phone number
– Store address
– Customer service email address
– Live chat button
– Social media links

Today, we will go over the process of adding this content to the top header in nopCommerce.

Go to: Views \ Shared \ Header.cshtml

Open “Header.cshtml” file and find this code:

<div class="header">
    @Html.Widget("header")
    <div class="header-upper">
        <div class="header-selectors-wrapper">

            @Html.Action("TaxTypeSelector", "Common")

            @Html.Action("CurrencySelector", "Common")

            @Html.Action("LanguageSelector", "Common")

            @Html.Widget("header_selectors")
        </div>
        <div class="header-links-wrapper">
            @Html.Action("HeaderLinks", "Common")
            @Html.Action("FlyoutShoppingCart", "ShoppingCart")
        </div>
    </div>
    <div class="header-lower">
        <div class="header-logo">
            <a href="@Url.RouteUrl("HomePage")">
                <img title="" alt="@storeName" src="@Url.Content(logoPath)">
            </a>
        </div>
        <div class="search-box store-search-box">
            @Html.Action("SearchBox", "Catalog")
        </div>
    </div>
</div>

You can adjust the position of the custom content as per your design requirements. But in this example, we will post custom content at the very top of the header.

Let’s try to add some text right “above” this:
<div class=”header-links-wrapper”>

So, the code should look something like this:

<div class="header">
    @Html.Widget("header")
    <div class="header-upper">
        <div class="header-selectors-wrapper">

            @Html.Action("TaxTypeSelector", "Common")

            @Html.Action("CurrencySelector", "Common")

            @Html.Action("LanguageSelector", "Common")

            @Html.Widget("header_selectors")
        </div>

        <!--START: Custom Text-->
        <div id="customheadercontent" style="font-size: 15px; color: #0B2F3A; float: left; height: 46px; line-height: 46px;">
            123 Street, City, State 11111 (Customer Service #: 000-000-0000 )
        </div>
        <!--END: Custom Text-->
        <div class="header-links-wrapper">
            @Html.Action("HeaderLinks", "Common")
            @Html.Action("FlyoutShoppingCart", "ShoppingCart")
        </div>
    </div>
    <div class="header-lower">
        <div class="header-logo">
            <a href="@Url.RouteUrl("HomePage")">
                <img title="" alt="@storeName" src="@Url.Content(logoPath)">
            </a>
        </div>
        <div class="search-box store-search-box">
            @Html.Action("SearchBox", "Catalog")
        </div>
    </div>
</div>

Make sure to save your changes and go to the public store to see your custom content on the top header like this:

4. Add a Background Color to News Titles on the Homepage in nopCommerce

Many developers/web designers are always looking to improve or add something new to the website layout/design that makes the content of the site stand out. nopCommerce’s homepage (out of the box) offers 3 of the latest news posts on the homepage. Adding some background color to the titles will certainly make it look more attractive and it will easily catch your customer’s attention.

This is the default layout/design of the homepage news posts: 

In order to add background color, open the stylesheet of your default theme: Nop.Web/Themes/DefaultClean/Content/css/styles.css

In your “styles.css”, find this:

.post-title,
.news-title {
    display: inline-block;
    padding: 20px 10px;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
}

Now, let’s separate it first like this so that any changes that we are making to news title does not affect anything else on the website.

.post-title {
    display: inline-block;
    padding: 20px 10px;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
}


.news-title {
    display: inline-block;
    padding: 20px 10px;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
}

Now, simply add your styling to the news-title class as per your requirements. In this example, we are using “skyblue” color and 300px width like this:

.news-title {
    display: inline-block;
    padding: 20px 10px;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
    background-color:skyblue;
    width:300px;
}

That’s all! Now save your changes and see the result on your homepage. It should look something like this:

5. Change Background Color of Top Menu in nopCommerce 

First off, let’s go over the code from where the top menu options (links) are coming from.

If you look into: Nop.Web/Views/Catalog/TopMenu.cshtml

You will find this the <ul> (unordered list):

<ul class="top-menu">
    @Html.Widget("header_menu_before")
    @{
        var rootCategories = Model.Categories.Where(x => x.IncludeInTopMenu).ToList();
    }
    @foreach (var category in rootCategories)
    {
        @RenderCategoryLine(category, 0, false)
    }
......
..........
............
..................

So, all the links in the top menu are coming from this <ul> tag. But this <ul> tag is actually inside another DIV that makes the top menu bar. So, in order to change the color of the top menu, we need to look into that.

Go to: Nop.Web/Views/Shared/_Root.cshtml

When you open the “_Root.cshtml” file, you will find that “top menu” is under “header-menu” DIV like this:

<div class="header-menu">
        @Html.Action("TopMenu", "Catalog")
    </div>

So, all we have to do is find this class in the CSS stylesheet, which is right here: Themes/DefaultClient/Content/css/styles.css

Now, look for this code:

/*** NAVIGATION ***/


.header-menu {
    position: relative;
    z-index: 5;
    width: 980px;
    margin: 0 auto 30px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 25px 0;
    text-align: center;
}

You can easily add different background colors (or even images) as per your requirement(s) like this:

.header-menu {
    position: relative;
    z-index: 5;
    width: 980px;
    margin: 0 auto 30px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 25px 0;
    text-align: center;
    background-color:#F4FA58;
}

(Note: I have added this background-color:#F4FA58;)

Here is the result:

• nopCommerce can be download here: http://www.nopcommerce.com/downloads.aspx

• nopCommerce Support: http://www.nopcommerce.com/boards/