Get GrandNode

Themes and layouts

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
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
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.

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.

Question not answered here? Ask the community on GitHub Discussions ↗