nopCommerce Tips: How to Customize the Home Page in nopCommerce

Even if you want to keep your overall theme intact for your nopCommerce project, you may need to re-arrange your default page to allow for different business needs. With nopCommerce widget support, it’s actually pretty straightforward.

For this instance, we’ll specify Visual Studio as a prerequisite, and that you’ve got your solution already open. First of all, navigate to your “Themes” folder under Nop.Web, then under your chosen theme folder, open Views>Home>index.cshtml. Open the file, and start reviewing your code.

You’ll notice a lot of HTML, interspaced with C# actions. The actions you’re most interested in are the following:

  • Widgets: @Html.Action(“WidgetsByZone”, “Widget”, new { widgetZone = “home_page_top” })
  • Topics: @Html.Action(“TopicBlock”, “Topic”, new { systemName = “fpHatshape” })
  • News: @Html.Action(“HomePageNews”, “News”)

WidgetsByZone are zones where widgets can be assigned in the Admin area of nopCommerce. Move the action for the widgetZone, and you’ll move where those widgets will appear.

Topics: You can create your topics in the Administration section of the site, then use this line of code to define where the topic will appear on the page.

News: this is fairly self-explanatory, but it’s a great way to define how the latest news for your e-commerce site is displayed to your customers.

Take note of the code around these lines; open up your style sheet under your theme’s Content/CSS folder, and look at how the code and the CSS match up.  You can use these files in combination to create a completely original layout for your nopCommerce-based store. Experiment with your results to get to know what you’re doing, and to get more comfortable with the technique.


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

Tags: , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

Leave a Reply

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