Page layouts and other layouts
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.
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:
- A developer adds the view to the theme, for example
Views/<ThemeName>/Page/PageLayout.Wide.cshtmlin a theme plugin, usingPageDetails.cshtmlas the starting point. It receives the same page model (title, body, SEO fields). The theme must be rebuilt and deployed. - In Configuration → Layouts → Page layouts click Add new record.
- Enter a Name such as
Wide page, the View pathPageLayout.Wideand a Display order, and confirm the row. - 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
- Developers for how theme views override the default ones
- Catalog for category, brand, collection and product pages
Question not answered here? Ask the community on GitHub Discussions ↗