Five Easy-to-Implement Techniques To Take Your nopCommerce Site Design From Basic To Brilliant

Lavish Kumar
May 02, 2016
8.3k
0
0
Article

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 etc. 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. nopCommerce is an ASP.NET MVC based open-source e-Commerce solution.

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 will use same default theme, all the store sites based on nopCommerce will look quite similar.

In order to make your store site stand out as compared to other websites, you can make 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:

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 different layout for each language (if there is more than one language installed on the store site). The requirement certainly makes sense because in different language the length of words / sentences can be different so if your layout is specific to the content of one language; by 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 top header in nopCommerce

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

Many online store sites like to post their contact information on the top header so that customer gets the access to the information from any page which is using the top header. This way, online customers do not have to spend time in search for contact or about us page.

You can use 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 content to 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 the 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>
<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>
<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 changed and go to public store to see your custom content on the top header like this:

4. Add background color to news titles on 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 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 changed and see the result on your homepage. It should look something like this:

5. Change background color of top menu in nopCommerce

Firstly, 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 top menu, we need to look into that.

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