.dev

Appearance

Layouts ​

Layouts are the base of any theme, through which all templates 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 layouts 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 layouts directory of the theme.

bash
└── theme
├── layouts
│   ├── 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>

© 2022-2026 YouCan