Layouts

Last updated on June 26, 2024.

A Layout is a Liquid view that stores repetitive code. Examples of page elements that are good candidates for putting into a Layout are static elements that surround page content, such as sidebars, headers, and footers.

Without the layout, every page would need to share many duplicated codes. This arrangement makes updates and bug fixes very time-consuming and error-prone.

Using layouts, you can extract the common elements of many pages in one place. Usually, the layout is the very first thing you want to develop.

Layouts directory

All layouts should be located in the directory. By default, all Pages use the layout, but you can create as many layouts as needed and decide which page uses which layout. This arrangement is why the very first layout should be named .

Minimal example

At a minimum, the content of the layout should look like this:

This layout only renders the page's content and is equivalent to passing in the page definition.

Expansive example

The most common use case of layouts is to place something before and after the content of the page:

Layouts for different formats

If you want layouts for your non-HTML pages, put before the file extension, the same way you would set a Format for Pages.

Examples:

document.txt.liquid
document.csv.liquid
layout.xml.liquid
email.txt.liquid
email.html.liquid

In the page , you will put , and it will recognize which layout to use (the same as the page's format).

Rendering page content in a layout

The most important part of every layout file is the line: it injects the page's content into the layout.