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

Navigation Properties

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 %}

Working with Navigation

Breadcrumb Navigation

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 %}

Sibling Navigation

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.