# Theme layouts overview

> How Shoplazza Theme layouts render every template, what to put in theme.liquid, and how a template picks a custom layout or opts out of one entirely.

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

Layouts are Liquid files that 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.

You can edit the default `theme.liquid` layout, or you can create multiple custom layout files to suit your needs. You can specify which layout to use, or whether to use a layout at all, at the template level:

*   In Liquid templates, the layout that's used to render a page is specified using [the layout attribute](/docs/theme/architecture/templates/liquid-templates#schema).

![](https://cnres.appracle.com/d8a4c3b943e613c4e923afbd55143344.png)

## Location

Layout files are located in the `layout` directory of the theme:

**Directory**

```text
└── theme
    ├── layout
    |   ├── theme.liquid
    |   ...
    ├── templates
    ...
```

## Subtypes

There are the following layout types:

| Type | Description |
| --- | --- |
| **General** | General layouts can apply to all pages.<br>The default layout file, which must be included in all themes, is `theme.liquid`. |
| **Password** | This layout type applies to the password access page, which is `password.liquid`. |

## Schema

Because layout files are the base of the theme, they should follow the structure of a [standard HTML document](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) in most cases. Most layout files also contain the following Liquid objects:

*   [content_for_header](/docs/theme/references/liquid/objects/content_for_header)
*   [content_for_layout](/docs/theme/references/liquid/objects/content_for_layout)

**basic_layout_example.liquid**

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

  <body>
    ...
    {{ content_for_layout }}
    ...

    {{ content_for_js }}
    ...
  </body>
 </html>
```

## Content

Layouts allow you to include content that's repeated across multiple page types in a single location. For example, layouts might include header and footer [sections](/docs/theme/architecture/sections/overview) and [SEO metadata](/docs/theme/theme-features/seo/metadata).

Layout files are `.liquid` files, so content can be built using standard HTML and Liquid.

Layouts can access any [global Liquid objects](/docs/theme/references/liquid/objects/) and can contain the following Liquid objects:

*   [content_for_header](#content_for_header)
*   [content_for_layout](#content_for_layout)

**warning**

These objects are required in `theme.liquid`. If references to these objects aren't included, then you can't save or update the file using the code editor or tools like Shoplazza CLI.

### content_for_header

The `content_for_header` object is required in [theme.liquid](/docs/theme/architecture/layouts/overview). It must be placed inside the HTML `<head>` tag. It dynamically loads all scripts required by Shoplazza into the document head. These scripts are required for features like reCAPTCHA, Shoplazza apps, and more.

You shouldn't try to modify or parse the `content_for_header` object. If `content_for_header` changes, then the behavior of your Liquid will change.

### content_for_layout

The `content_for_layout` object dynamically outputs the content for each template. You need to add a reference to this object between the `<body>` and `</body>` HTML tags.

## Usage

When working with layout files, you should familiarize yourself with the following concepts:

*   [Support template-specific CSS selectors](/docs/theme/architecture/layouts/overview#support-template-specific-css-selectors)

### Support template-specific CSS selectors

You can help create CSS rules for specific templates by outputting data from the [template object](/docs/theme/references/liquid/objects/template) in the `<body>` tag’s class.

**theme.liquid**

```liquid
<body class="template-{{ template.name }}">
  ...
</body>
```

**theme_css.liquid**

```css
.template-product {
  margin-top: 100px;
  margin-bottom: 100px;
}
```