Used to define areas that are editable on page:
{% content name="sidebar" %}

If you want the same content area to be shared across all pages (we like to call it cross-page content), just use extra xpage attribute:

{% content name="footer" xpage="true" %}

Notice that cross-page content remains the same accross the pages in same language environment. So users will have to create content for each language environment.

For last example, there is also an shortcut tag xcontent to generate cross-page content.

See also contentblock tag.



Sets the name to idenfify editable content area because there may be multiple areas on the same page. It is wise not to provide same content name twice on the same page.

If you do not provide name it will default to "body" which is a default content area on each page.


Creating a content tag on blog article page will result the content in this area be shown on all article pages in that blog. To assign the content only with blog article that is currently visible, add bind attribute to the content tag. It supports Liquid article, element, page and language objects. It also supports string values "Article" (in article template only) and "Element" (in element layout only).

This code works everywhere:

{% content name="blogarticle_gallery" bind=blog_item %}

This code works on article page (layout) only:

{% content name="blogarticle_gallery" bind="Article" %}

This way you can add additional content elements, such as forms or photo galleries to your blog article.

On element page similar logic can be used for binding content to element

{% content name="element_content" bind=element_object %}
{% content name="element_content" bind="Element" %}

You should also use new_record? when using this approach.

More examples:

{% for item in articles %}
  <h2 class="post-title"><a href="{{ iten.url }}">{{ iten.title }}</a></h2>
  <div class="post-excerpt content-formatted">{{ iten.excerpt }}</div>
  <div class="gallery">{% content name="blogarticle_gallery" bind=item %}</div>
{% endfor %}
{% for lang in site.languages %}
  {% if lang.code == "en" %}
    {% content name="banner" bind=lang %}
  {% endif %}
{% endfor %}


Set to "true" if you want this content area to be shared across all pages.


Set to "true" to render the content of the content area as read only (like in public view). It allows to render same content area more than one time in same layout without messing up content updates. It's also useful for contents that are updated using API and should be not touched by site editor.

<div class="banner-area">
  {% content name="banner-area" readonly=editmode %}
{% if editmode %}
  <div class="banner-area-edit-mode">{% content name="banner-area" %}<div>
{% endif %}


Defines the content area to be a "singleton" that is created already on the first page load and cannot be removed. Possible values:
  • "plaintext" — removes any rich text functionality from the content area (no formatting, no HTML tags, no line breaks) and renders the contents as a plain string.
  • "text" — default behaviour

placeholder (only for plaintext content)

This value is rendered when there is no actual content inside the plaintext area.


A boolean value that controls how the content is escaped. "false" makes the contents to be rendered directly as HTML.


Set to “true” if you want the content area to appear only if you drag a content area. Otherwise the content area stays hidden.

{% content invisible="true" %}