How to move news section to the side column in nopCommerce

Many nopCommerce users posts questions regarding how to move the news section to the side column. In some ways, it does makes sense as many store owners prefer to use the middle body of the homepage to showcase their products / services. Side columns is a great location to display news about your industry or store site.

Today, we will go over the process of moving the news section to the side column.

First, we need to enable the news from the administration section by going: 

Administration > Configuration > Settings > News Settings

nopCommerce news

Now enable the news section to display on the homepage like this (also make sure that the news is enabled):

nopCommerce news

Make sure to "SAVE" the changes.

Now, the news section should appear on your homepage like this:

nopCommerce news

In order to move the news section from center to the side column, let's go in the code:

Nop.Web (Presentation) / Views / Home / Index.cshtml 

Open the "Index.cshtml" file and cut the following highlighted code:

nopCommerce news

Go to this location in your code: Nop.Web (Presentation) / Views / Shared / _ColumnThree.cshtml 

Open the "_ColumnThree.cshtml" file and paste your news code in either column (in this case, we will be adding news section to the right column):

nopCommerce news

Save the changes and go to public store, you should see the news section to the right column like this:

nopCommerce news

Hope it helps!

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