In some scenarios you may want to add a custom layout file for a given page on your site. AspDotNetStorefront provides two ways to do this.

1. You can supply a custom layout file for a view
2. You have a custom layout for product groups (Entities)

When to use a custom layout

​Custom layouts can be a useful tool when modifying the look and feel of your website. We recommend though that you try not to overdo it. We'll often see sites that have many custom layout files in them for several different pages. In some cases this may have been necessary, but in other cases we find that there is only a small difference between the files. When you just have a small display difference for a certain page it's often best to use a partial view to add logic around that section of the layout. This way you don't have to maintain 10 different layouts that are all 90% the same.

Adding custom layouts for a view

We're going to walk through creating a custom layout for the home page view of our site.

1. Lets start by creating our custom layout file. Navigate to your skin and duplicate the /Skins/{YOURSKINNAME}/Views/Shared/_Layout.cshtml file.
   
2. Name the file something that makes sense like "_HomeLayout.cshtml"
3. Open up the new layout file and make your custom modifications. For our demo I'm just going to add a header so that it is obvious that our layout is working.
   
4. Now we need to modify our home page view to use our new layout file. Open up the /Views/Home/Index.cshtml view.
   
   Psst! If this is just for one of your skins you may want to override the home page view by adding the new view to /Skins/{YOURSKINNAME}/Views/Home/Index.cshtml
5. Add the following code block to the top of the view to override the default layout file:
   
   @{

       Layout = ViewEngines.Engines.FindViewPath(ViewContext.Controller.ControllerContext, "_HomeLayout");

   }
   like so:
   
6. Now load up the home page and see your sweet new custom layout in action:
   

​

Adding a custom layout for product groups (Entities)

If you need to add a custom layout for for a category page for example you can enable template switching. For instructions on how to create a custom layout see the tutorial above on creating a custom layout for the home page (steps 1-3).

1. In the admin console navigate to Configuration > Settings.
2. Find the setting titled "TemplateSwitching.Enabled" and set it to true.
3. Once you enable this option you can navigate to a category, or any other type of entity (not products), and specify a custom layout file in the custom fields tab "Use Skin Template:" field.
   
   You should leave the .cshtml extension off the end of the layout name.
4. Now navigate to the category on the front end of the website and make sure it is using your new custom layout.
   

​

NOTE: Once a custom layout has been assigned to a Category (or Department, Manufacturer, Distributor) then all mapped products will use that template when that entity is the navigation path to the product (since products could potentially be mapped to multiple entities, navigating directly to a product, or from a search, may not yield the expected layout). This includes all sub-entities unless they are explicitly set to another template.