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!