How to have full width nivo slider using two column layout in nopCommerce

The latest version of nopCommerce (i.e. 3.60 version) offers a full width nivo slider out of the box on the homepage. The new theme is great and following the latest trend of having a full width slider on the homepage. A lot of nopCommerce users like to change the design a little bit so that their store site stands out more as compared to the default theme.

Many nopCommerce users might be aware of the fact that, the layout (master page) can be changed for the homepage that offers 2 sections. The layout looks great but that puts the nivo slider on the right column like this:


In order to have full width nivo slider using two column layout in nopCommerce:

1) Go to: Views / Home / Index.cshtml <– Open this file

2) At the top, change layout from “_ColumnsThree.cshtml” TO “_ColumnTwo.cshtml”

3) Comment out (or remove) this code like this:  @Html.Widget(“home_page_top”)


    Layout = "/Views/Shared/_ColumnsTwo.cshtml";
<div class="page home-page">
    <div class="page-body">
        @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
        @Html.Action("HomepageCategories", "Catalog")
        @Html.Action("HomepageProducts", "Product")
        @Html.Action("HomepageBestSellers", "Product")
        @Html.Action("HomePageNews", "News")
        @Html.Action("HomePagePolls", "Poll")



4) Go to: Views / Shared / _ColumnTwo.cshtml <– Open this file

5) Add this at the top after layout: @Html.Widget(“home_page_top”)<br />

Like this:


    Layout = "/Views/Shared/_Root.cshtml";
@Html.Widget("home_page_top")<br />
    //current category ID
    int currentCategoryId = 0;
    if (Url.RequestContext.RouteData.Values["controller"].ToString().Equals("catalog", StringComparison.InvariantCultureIgnoreCase) &&
        Url.RequestContext.RouteData.Values["action"].ToString().Equals("category", StringComparison.InvariantCultureIgnoreCase))
        currentCategoryId = Convert.ToInt32(Url.RequestContext.RouteData.Values["categoryId"].ToString());
    //current manufacturer ID
    int currentManufacturerId = 0;
    if (Url.RequestContext.RouteData.Values["controller"].ToString().Equals("catalog", StringComparison.InvariantCultureIgnoreCase) &&
        Url.RequestContext.RouteData.Values["action"].ToString().Equals("manufacturer", StringComparison.InvariantCultureIgnoreCase))
        currentManufacturerId = Convert.ToInt32(Url.RequestContext.RouteData.Values["manufacturerId"].ToString());
    //current product ID
    int currentProductId = 0;
    if (Url.RequestContext.RouteData.Values["controller"].ToString().Equals("product", StringComparison.InvariantCultureIgnoreCase) &&
        Url.RequestContext.RouteData.Values["action"].ToString().Equals("productdetails", StringComparison.InvariantCultureIgnoreCase))
        currentProductId = Convert.ToInt32(Url.RequestContext.RouteData.Values["productId"].ToString());
@if (IsSectionDefined("Breadcrumb"))
    @section Breadcrumb {
<div class="side-2">
    @if (IsSectionDefined("left"))
        @Html.Action("CategoryNavigation", "Catalog", new { currentCategoryId = currentCategoryId, currentProductId = currentProductId })
        @Html.Action("ManufacturerNavigation", "Catalog", new { currentManufacturerId = currentManufacturerId })
        @Html.Action("VendorNavigation", "Catalog")
        @Html.Action("RecentlyViewedProductsBlock", "Product", new { productThumbPictureSize = 64 })
        @Html.Action("PopularProductTags", "Catalog")
        @Html.Action("PollBlock", "Poll", new { systemKeyword = "LeftColumnPoll" })
<div class="center-2">



Save changes and you will see your nivo slider in full width of your homepage at the top.



 Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *