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

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 *


7 + 7 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>