nopCommerce Tips: Creating a Custom Layout, Part 2 – Customizing the Menu

Read Part 1 here!
The menu really is the backbone of any website; when it comes to one that processes online transactions, even more so. Keeping a clean and consistent navigation ensures that the user will be able to find the product they want to purchase, pay for it, and keep track of their purchases, and thereby enabling repeat business as well. Each retailer has their own specific needs and concerns, so of course menus will differ. Let’s take a look under the hood of nopCommerce, and see how we can adapt the menu for our customers.

What’s already built-in

There’s a number of ways to alter menu elements already built into the nopCommerce Admin:

  • Blog – in the Admin, click on “Configuration”=>”Blog Settings”, and de-select “Blog Enabled”, this will remove the presence of a blog on your nopCommerce site.
  • New Products –  click on “Configuration”=>”Catalog Settings”, and de-select “
  • String Resources- some navigation items are already in place, but may not use the wording you’d prefer. For instance: instead of “Home Page”, it’s less space-consuming and consistent to simply label it “Home”. To do this, click on “Configuration”=>”Languages”, and next to your preferred language (in this case, “English”), click “View String Resources”. Click the small funnel on the right side of the “Values” column, and enter a filter word for the value you wish to change; we’ll go ahead and enter “Home”. We get three items labeled “Home”; we’ll click the “Edit” button next to the one with the resource name of “homepage”. Update the value, and select “Update”. Refresh the store, and you’ll see that the value on the navigation has been updated.

Adding Something Extra

  • Custom Page– In the case of this customer, I’ll need to add an extra page for the details on her custom orders. The first step is to create a topic page we can link the new menu item to.
    • Go to Admin =>Content Management=>Topics. Click the “Add New” button on the top right; create a unique system name and title, and “Save” (we’ll get back to content later).
    • We need to add a title to the menu link; remember our String Resources? We’re going to add a new one, with the title we want for our Menu Item. Return to Admin=>”Configuration”=>”Languages”, and next to your preferred language (in this case, “English”), click “View String Resources”. Click the “Add New Record” button on the left; enter a value for the resource name, and the title of the link you’re creating as a value.
    • Now for the fun part: adding the link to your menu. In Visual Studio, open your custom theme folder,  and open the file [your theme]/Views/Common/Menu.cshtml. If you haven’t looked at this file before, take a look at it closely, and notice how the menu items are placed in <li> elements. Decide where you want your new menu item to display, and enter a new <li>, like so:
      <li><a href=”@Url.RouteUrl(“Topic”, new { SystemName = “[yourTopicSystemName]” })”>@T(“[yourStringResourceName]”)</a></li> 
  • Item Sequence – in the same file, you can also re-arrange the order of the menu items. For instance, I wanted the “Home” button to go in front of the “Products” button, which I introduced using the MegaMenu plugin. That plugin is actually implemented as a widget, so I chose the “widgetZone” of “header_menu_before”. However, that causes the “Products” menu button to appear before the “Home” button. It’s a simple thing to swap the code for the widget zone with the “Home” button <li>, and now my menu’s in the order I want it to be in.

    And now it’s in the order we want it to be in!

You might have noticed that some other options are missing; we decided that the search option in the header was sufficient, and that the “My Account” in addition to the link at the top seemed redundant. These are design decisions that are appropriate for this client; your options may vary.

Next time we’ll touch on plugins and widgets, and how they can extend the design and usability of your site.


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!

One Comment on nopCommerce Tips: Creating a Custom Layout, Part 2 – Customizing the Menu

  1. sadiq says:

    hi Carole Bennett,
    i have html this does not have any to convert this html templates to nopcommerce supportable theme please help me.
    Thanks and Regards,

Leave a Reply to sadiq Cancel reply

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