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:

nopcommerce full nivo slider

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.

nopcommerce full nivo slider

A copy of this article is also available on 
Arvixe Blog.

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment