Page template

The page template renders content pages for your website. Pages are hierarchical and can be nested to create navigation structures. They have access to parent, child, and sibling pages for building navigation.

Location

└── theme
    └── templates
        └── page.liquid

The `page` Object

The page template has access to the page object with these properties:

Core Properties

Property	Type	Description
`id`	`string`	Unique identifier
`title`	`string`	Page title
`description`	`string`	Page description/summary
`slug`	`string`	URL-safe identifier
`relativePath`	`string`	Full URL path (e.g., `/about/team`)
`image`	`media`	Main page image

Property	Type	Description
`parent`	`page`	Parent page (if nested)
`children`	`array`	Child pages (filtered by `showInNavigation`)
`has_children`	`boolean`	Whether page has child pages
`siblings`	`array`	Sibling pages (same parent, filtered by `showInNavigation`)
`showInNavigation`	`boolean`	Whether page appears in navigation

Content

Property	Type	Description
`blocks`	`array`	Content blocks
`customAttributes`	`object`	Custom attribute values
`theme`	`object`	Theme-specific field values

Metadata

Property	Type	Description
`meta.title`	`string`	SEO title
`meta.description`	`string`	SEO description
`meta.image`	`media`	SEO/OG image
`createdAt`	`string`	Creation timestamp
`updatedAt`	`string`	Last update timestamp

Basic Template Example

{% layout 'layouts/default.liquid' %}

{% capture content_for_layout %}
<article class="page">
  <header class="page-header">
    {% if page.image %}
      <img
        src="{{ page.image | image_url: width: 1200, height: 400 }}"
        alt="{{ page.image.alt | default: page.title }}"
        class="page-header__image"
      >
    {% endif %}

    <h1>{{ page.title }}</h1>

    {% if page.description %}
      <p class="lead">{{ page.description }}</p>
    {% endif %}
  </header>

  <div class="page-body">
    {% stageblocks page %}
  </div>
</article>
{% endcapture %}

Use the parent property to build breadcrumbs:

{% if page.parent %}
  <nav class="breadcrumb" aria-label="Breadcrumb">
    <ol>
      <li><a href="/">Home</a></li>

      {% if page.parent.parent %}
        <li>
          <a href="{{ page.parent.parent.relativePath }}">
            {{ page.parent.parent.title }}
          </a>
        </li>
      {% endif %}

      <li>
        <a href="{{ page.parent.relativePath }}">
          {{ page.parent.title }}
        </a>
      </li>

      <li aria-current="page">{{ page.title }}</li>
    </ol>
  </nav>
{% endif %}

Back Link

{% if page.parent %}
  <a href="{{ page.parent.relativePath }}" class="back-link">
    &larr; Back to {{ page.parent.title }}
  </a>
{% endif %}

Display links to pages at the same level:

{% if page.siblings.size > 0 %}
  <nav class="sibling-nav">
    <h3>Related Pages</h3>
    <ul>
      {% for sibling in page.siblings %}
        {% if sibling.showInNavigation %}
          <li {% if sibling.id == page.id %}class="current"{% endif %}>
            <a href="{{ sibling.relativePath }}">{{ sibling.title }}</a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </nav>
{% endif %}

Child Page Listing

Display subpages:

{% if page.children.size > 0 %}
  <section class="child-pages">
    <h2>In This Section</h2>
    <ul class="page-grid">
      {% for child in page.children %}
        {% if child.showInNavigation %}
          <li class="page-card">
            {% if child.image %}
              <img
                src="{{ child.image | image_url: width: 400, height: 300 }}"
                alt="{{ child.image.alt | default: child.title }}"
              >
            {% endif %}
            <h3><a href="{{ child.relativePath }}">{{ child.title }}</a></h3>
            {% if child.description %}
              <p>{{ child.description }}</p>
            {% endif %}
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </section>
{% endif %}

Working with Theme-Specific Fields

Access custom fields defined in the template schema via page.theme:

{# Template schema defines: sidebar_content, show_cta, cta_button #}

{% if page.theme.settings.show_cta and page.theme.settings.cta_button.text %}
  <div class="cta-banner">
    <a href="{{ page.theme.settings.cta_button.link }}" class="btn btn--primary">
      {{ page.theme.settings.cta_button.text }}
    </a>
  </div>
{% endif %}

{% if page.theme.settings.sidebar_content_html %}
  <aside class="sidebar">
    {{ page.theme.settings.sidebar_content_html }}
  </aside>
{% endif %}

Complete Template Example

{% layout 'layouts/default.liquid' %}

{% capture content_for_layout %}
<article class="page-template">
  {# Breadcrumb navigation #}
  {% if page.parent %}
    <nav class="breadcrumb" aria-label="Breadcrumb">
      <ol>
        <li><a href="/">Home</a></li>
        {% if page.parent.parent %}
          <li><a href="{{ page.parent.parent.relativePath }}">{{ page.parent.parent.title }}</a></li>
        {% endif %}
        <li><a href="{{ page.parent.relativePath }}">{{ page.parent.title }}</a></li>
        <li aria-current="page">{{ page.title }}</li>
      </ol>
    </nav>
  {% endif %}

  {# Page header #}
  <header class="page-header">
    {% assign hero_image = page.theme.settings.hero_image | default: page.image %}
    {% if hero_image %}
      <picture class="page-header__image">
        <source
          media="(min-width: 768px)"
          srcset="{{ hero_image | image_url: width: 1920, height: 600 }}"
        >
        <img
          src="{{ hero_image | image_url: width: 800, height: 400 }}"
          alt="{{ hero_image.alt | default: page.title }}"
        >
      </picture>
    {% endif %}

    <div class="page-header__content">
      <h1>{{ page.title }}</h1>

      {% if page.description %}
        <p class="lead">{{ page.description }}</p>
      {% endif %}
    </div>
  </header>

  {# Main content with optional sidebar #}
  <div class="page-content {% if page.theme.settings.show_sidebar %}page-content--with-sidebar{% endif %}">
    <main class="page-main">
      {% stageblocks page %}
    </main>

    {% if page.theme.settings.show_sidebar %}
      <aside class="page-sidebar">
        {# Sibling navigation #}
        {% if page.siblings.size > 0 %}
          <nav class="sidebar-nav">
            <h3>{{ page.parent.title }}</h3>
            <ul>
              {% for sibling in page.siblings %}
                {% if sibling.showInNavigation %}
                  <li {% if sibling.id == page.id %}class="active"{% endif %}>
                    <a href="{{ sibling.relativePath }}">{{ sibling.title }}</a>
                  </li>
                {% endif %}
              {% endfor %}
            </ul>
          </nav>
        {% endif %}

        {# Custom sidebar content #}
        {% if page.theme.settings.sidebar_content_html %}
          <div class="sidebar-content">
            {{ page.theme.settings.sidebar_content_html }}
          </div>
        {% endif %}
      </aside>
    {% endif %}
  </div>

  {# Child pages section #}
  {% if page.children.size > 0 %}
    <section class="child-pages">
      <h2>Explore {{ page.title }}</h2>
      <div class="page-grid">
        {% for child in page.children %}
          {% if child.showInNavigation %}
            <a href="{{ child.relativePath }}" class="page-card">
              {% if child.image %}
                <img
                  src="{{ child.image | image_url: width: 400, height: 300 }}"
                  alt=""
                  class="page-card__image"
                >
              {% endif %}
              <h3 class="page-card__title">{{ child.title }}</h3>
              {% if child.description %}
                <p class="page-card__desc">{{ child.description }}</p>
              {% endif %}
            </a>
          {% endif %}
        {% endfor %}
      </div>
    </section>
  {% endif %}
</article>
{% endcapture %}

{% schema %}
{
  "name": "page",
  "settings": [
    {
      "type": "upload",
      "name": "hero_image",
      "label": "Hero Image",
      "relationTo": "media"
    },
    {
      "type": "checkbox",
      "name": "show_sidebar",
      "label": "Show Sidebar",
      "defaultValue": false
    },
    {
      "type": "richText",
      "name": "sidebar_content",
      "label": "Sidebar Content"
    },
    {
      "type": "group",
      "name": "cta_button",
      "label": "Call to Action",
      "fields": [
        { "type": "text", "name": "text", "label": "Button Text" },
        { "type": "text", "name": "link", "label": "Button Link" }
      ]
    }
  ],
  "blocks": [
    "accordion",
    "content",
    "feature-panel",
    "image-gallery",
    "well"
  ]
}
{% endschema %}

Alternate Page Templates

Create variations for different page types:

templates/
├── page.liquid           # Default page template
├── page.landing.liquid   # Landing page with hero
├── page.sidebar.liquid   # Page with sidebar
└── page.full-width.liquid # Full-width layout

Alternate templates appear in the CMS for editors to select per page.