Understanding Layout

Layout allows you to define a common site template and integrate its look accross all the views/page on our store. 

In GrandNode, there are 2 different kinds of lauouts:

  • _ColumnsOne.cshtml
  • _ColumnsTwo.cshtml

All these layouts are inherited from one main layout called: _Root.cshtml. The mentioned _Root.cshtml files is inherited from _Root.Head.cshtml and in _Root.Head.cshtml file you need to look if you want to link css stylesheets and jquery files. The location of all these layouts in GrandNode is as follows: nopCommerce root directory/Views/Shared... or if you are using source code version then: \Presentation\Nop.Web\Views\Shared\...

Layout of _Root.cshtml

Of course you can create your own layout, it's best to use an example:

I want to create a layout that will be used only on the home page of the store:

1. Copy "_ColumnsOne.cshtml" to Shared folder in your theme and change name. In example that will be: "_MyLayout.cshtml"

2. Now in .../Views/Home/Index.cshtml top of file change Layout = "_ColumnsOne" to Layout= "_MyLayout".

back to top