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 | Leave a comment

An Introduction to ocPortal

ocPortal LogoI thought as a first blog post relating to ocPortal it would be beneficial to give a brief overview of ocPortal. Part two will be a tour of the main adminzone screens to help new users find their way around.  ocPortal has a large amount of bundled features and this is one of its biggest strengths. Having these features included in the software from the start gives ocPortal a distinct advantage over other Content management systems (CMS).

One of the advantages is that all of the main features of your ocPortal website will be coded in the same manner, which means making changes is easier to understand. Because all of the features are coded to the same standards, you can be more confident of the security of the software and its standards compliance. Learn More

Tags: , , , , | Posted under ocPortal | Leave a comment