# Page layouts and other layouts

Content management

A layout in GrandNode is a named pointer to a Razor view. Every landing page, category, brand, collection and product has a layout field, and the storefront renders the item with the view that layout points to. Layouts let a theme or a developer offer several designs, for example a plain text page and a wide marketing page, and let the content editor pick one per item from a drop-down, without touching code.

### Where to find it

Go to **Configuration → Layouts**. There are five lists: **Category layouts**, **Brand layouts**, **Collection layouts**, **Product layouts** and **Page layouts**. They all work the same way. This article uses page layouts, the ones that belong to content management.

![The Page layouts list with the single Default layout whose view path is PageDetails](https://grandnode.com/Plugins/Theme.GrandNodeCom/Content/kb/content/page-layouts.webp)

Configuration → Layouts → Page layouts on a default installation.

### Layouts in a default installation

| List | Name | View path |
|---|---|---|
| Page layouts | Default layout | `PageDetails` |
| Category layouts | Grid or Lines | `CategoryLayout.GridOrLines` |
| Brand layouts | Grid or Lines | `BrandLayout.GridOrLines` |
| Collection layouts | Grid or Lines | `CollectionLayout.GridOrLines` |
| Product layouts | Simple product; Grouped product (with variants) | `ProductLayout.Simple`; `ProductLayout.Grouped` |

### Fields and settings

| Field | What it does |
|---|---|
| **Name** | What editors see in the **Page layout** drop-down of a landing page. |
| **View path** | The name of the Razor view, without `.cshtml`. For page layouts it is looked up in the `Page` views folder: first in the active theme, then in the default storefront views. |
| **Display order** | Order in the drop-down. When a page has no layout set, or its layout was deleted, the storefront uses the first page layout. |

### How to add a page layout

A layout record alone does nothing: the view it names must exist. The usual order is:

1. A developer adds the view to the theme, for example `Views/<ThemeName>/Page/PageLayout.Wide.cshtml` in a theme plugin, using `PageDetails.cshtml` as the starting point. It receives the same page model (title, body, SEO fields). The theme must be rebuilt and deployed.
2. In **Configuration → Layouts → Page layouts** click **Add new record**.
3. Enter a **Name** such as `Wide page`, the **View path** `PageLayout.Wide` and a **Display order**, and confirm the row.
4. Open a landing page, choose **Wide page** in **Page layout** and save.

The grandnode.com site you are reading is an example: its theme ships page layouts such as a download page, a features page and several marketing layouts, and each landing page picks one. The content stays editable in **Content → Landing pages**; the layout supplies the design around it.

### Tips and common mistakes

- A wrong view path causes an error on every page that uses the layout. Test the layout on a hidden page first (administrators can preview hidden pages).
- If a theme adds a view only for itself and a store switches to another theme, the view is not found. Either add the view to each theme or keep the default layout on pages that must survive a theme change.
- Do not delete **Default layout**: it is the fallback for pages without a layout.
- Editing or deleting layouts needs the Maintenance permission, so content editors normally only choose from the list.

### Related

- [Landing pages](https://grandnode.com/content-pages)
- [Developers](https://grandnode.com/docs-developers) for how theme views override the default ones
- [Catalog](https://grandnode.com/docs-catalog) for category, brand, collection and product pages

- [Web page](https://grandnode.com/content-layouts)