Page
The page object for static content pages, plus global page-level properties.
The page object holds the content of a static page (like "About Us" or "Contact"). It is available on page templates. There are also a few global page-level properties available on every template.
Page properties
| Property | Type | Description |
|---|---|---|
page.id | string | The unique page ID |
page.title | string | The page title |
page.handle | string | The URL slug (e.g. about-us) |
page.content | string | The full HTML content |
page.url | string | The URL path |
page.published_at | string | When the page was published |
<article>
<h1>{{ page.title }}</h1>
<div class="page-content">
{{ page.content }}
</div>
</article>Global page properties
These are available on every page, not just static pages:
| Property | Type | Description |
|---|---|---|
page_title | string | The text for the <title> tag |
page_description | string | The meta description |
canonical_url | string | The canonical URL for this page |
content_for_header | string | Scripts and tags injected into the <head> |
In your layout
These global properties are mainly used in the theme layout file:
<head>
<title>{{ page_title }} – {{ store.name }}</title>
<meta name="description" content="{{ page_description }}" />
<link rel="canonical" href="{{ canonical_url }}" />
{{ content_for_header }}
</head>Accessing all pages
The global pages object gives you access to every static page in the store:
{% for p in pages %}
<a href="{{ p.url }}">{{ p.title }}</a>
{% endfor %}You can also look up a page by its handle:
{% assign about = pages['about-us'] %}
<div>{{ about.content }}</div>This is useful when you want to pull content from one page into a different template, like showing a short "About" blurb in the footer.
Menus and navigation
Navigation menus are stored in linklists (also called menus). Each menu has a handle and a list of links.
| Property | Type | Description |
|---|---|---|
link.title | string | The link text |
link.url | string | The URL the link points to |
link.active | boolean | true if this link matches the current page |
link.links | array | Child links (for dropdown menus) |
{% assign main_menu = linklists['main-menu'] %}
<nav>
{% for link in main_menu.links %}
<a href="{{ link.url }}" {% if link.active %}class="active"{% endif %}>
{{ link.title }}
</a>
{% if link.links.size > 0 %}
<ul class="dropdown">
{% for child in link.links %}
<li><a href="{{ child.url }}">{{ child.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</nav>