# Themes and layouts

Configuration

The look of the storefront comes from the **theme**; the structure of individual pages can be varied with **layouts**.

### Choose the theme

Themes are plugins. GrandNode includes the **Default** theme and the **Modern** and **Nordic Editorial** themes (the storefront screenshots in this documentation use Nordic Editorial).

1. Install the theme plugin under **Plugins → Local plugins** if needed.
2. Open **Settings → General**, tab **Store information**.
3. Pick the theme card under **Default store theme** and save.

On a multi-store installation, select a store at the top to give each store its own theme. With **Allow customers to select a theme** on, customers can switch between installed themes on the storefront.

![The Plugins flyout in the admin sidebar with External authentication, Widgets and Local plugins](https://grandnode.com/Plugins/Theme.GrandNodeCom/Content/kb/configuration/menu-plugins.webp)

Themes and other plugins are installed under Plugins → Local plugins.

### Layouts

Layouts are alternative templates for one type of page. The **Layouts** entries of the Configuration menu list them per type: **Category layouts**, **Brand layouts**, **Collection layouts**, **Product layouts** and **Page layouts**.

![Category layouts with Grid or Lines, its view path CategoryLayout.GridOrLines and display order](https://grandnode.com/Plugins/Theme.GrandNodeCom/Content/kb/configuration/category-layouts.webp)

Category layouts.

- Each layout has a **Name**, a **View path** (the Razor view the theme provides) and a display order.
- Choose the layout on each category, brand, collection, product or page.
- A theme can bring its own layouts, for example a landing-page layout for pages. See [Page layouts](https://grandnode.com/content-layouts).

> A layout's view must exist in the active theme or fall back to the default views. Switching to a theme that lacks a layout's view breaks the pages that use it - move them to a standard layout first.

### Custom CSS and JavaScript

Small adjustments without a new theme go in **System → Custom css** and **Custom JS**. For anything larger, create a theme - see [Creating a theme](https://grandnode.com/developers-creating-a-theme).

### Related

- [General settings](https://grandnode.com/configuration-general-settings)
- [Stores and multi-store](https://grandnode.com/configuration-stores-multi-store)

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