YouCan Developer

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 ​

The yc_header_content is a required object in theme.liquid. It must be placed inside the HTML <head> element. It handles loading all the scripts required by YouCan into the document head. This can be used to drive YouCan analytics, logging, and features like reCAPTCHA, etc..

content_for_layout ​

The yc_layout_content is a required object in theme.liquid. It dynamically outputs the content of the currently selected template depending on the page. This object needs to be referenced in the <body> element.

© 2022-2024 YouCan