.dev

Appearance

Layouts ​

Layouts represent the basis of every theme in which we can socket any template. These are Liquid files allowing the inclusion of shared or repeated content. For example, a layout is a good place to include common elements like headers and footers.

Every theme must include the layouts/theme.liquid layout, but you may create as many custom layouts as you need. These layouts can be selected or omitted at the template level.

In JSON templates, the layout that’s used to render a page is specified using the layout attribute.

Location ​

Layout files are located in the layouts directory of the theme.

└── theme
├── layouts
| ├── theme.liquid
| ...
├── templates
...

Schema ​

Since layout files are the basis of the theme they should, but are not required to, follow the standard HTML document structure. Layout files should also include common content that is provided by YouCan, which contain global YouCan objects.

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>

Theme compatibility

content_for_header and content_for_footer are only rendered by the YouCan liquid theme system. App extensions will not appear on pages served by the legacy classic theme or the page builder.

© 2022-2026 YouCan