---
url: https://docs.youcan.shop/themes/layouts.md
---
# Layouts

Layouts are the base of any theme, through which all [templates](/themes/templates/overview) are rendered.

Layouts allow you to include content, that should be repeated on multiple page types, in a single location. For example, layouts are a good place to include any content you might want in your `<head>` element, as well as *headers* and *footers*.

A `theme.liquid` file is required in the `layout` directory, but you may create as many custom layouts as you need. These layouts can be selected or omitted at the template level.

## Location

Layout files are located in the `layout` directory of the theme. The older `layouts` name still works, but it is deprecated.

```bash
└── theme
├── layout
│   ├── theme.liquid
│   ...
├── templates
...
```

## Schema

Because layout files are the base of the theme, they should follow the structure of a standard HTML
document in most cases. Most layout files also contain the following Liquid objects:

* `content_for_header`
* `content_for_layout`
* `content_for_footer`

```liquid
<!DOCTYPE html>
<html>
  <head>
    ...
    {{ content_for_header }}
    ...
  </head>
  
  <body>
    ...
    {{ content_for_footer }}
    ...
  </body>

 </html>
```

## Content

Layouts allow you to include shared content across multiple pages in a single location, like SEO metadata and common sections.

### `content_for_header`

Required in `theme.liquid`. Must be placed inside the HTML `<head>` element. It loads scripts and styles required by YouCan (analytics, reCAPTCHA, etc.) and injects any app extension assets targeting `head`.

### `content_for_layout`

Required in `theme.liquid`. Dynamically outputs the content of the currently rendered template. Must be placed in the `<body>` element.

### `content_for_footer`

Must be placed at the end of `<body>`, just before `</body>`. It injects HTML from any installed app extensions that target `body` — for example, a chat widget or cookie banner. Without this variable, body-targeted app extensions will not appear on the storefront.

A complete minimal layout looks like this:

```liquid
<!DOCTYPE html>
<html>
  <head>
    ...
    {{ content_for_header }}
  </head>

  <body>
    ...
    {{ content_for_layout }}
    ...
    {{ content_for_footer }}
  </body>
</html>
```