Footer
The footer template defines a secondary, independent navigation area rendered at the bottom of every page.
The footer template defines a secondary navigation area, rendered at the bottom of every page. It is completely independent from the header - the two cannot access each other's items or settings. Creators manage footer navigation in My Site > Footer or directly from any site page.
The template code lives at partials/footer/index.html.
Location
The footer template is located at:
partials
└── footer
└── index.htmlLike the header, the footer is a special kind of partial that is automatically
rendered at the end of the <body> tag on every page. You don't need to include it manually.
Schema
The footer template supports a schema defined in YAML front matter. The schema defines the navigation configuration and any custom variables for creator customisation.
Navigation settings
The following front matter keys control navigation behaviour:
| Key | Type | Default | Description |
|---|---|---|---|
max_item_levels | integer (1–3) | 1 | The maximum depth of nested navigation items. |
supports_open_new_tab | boolean | false | When true, creators can toggle "Open in a new tab" on individual navigation items. |
Unlike the header, the footer does not support the cache front matter key. The footer is rendered on every request.
You can still use the {% cache %} tag within the template to cache specific sections.
Custom variables
Variables defined in the attributes block are accessible on the footer object using dot notation:
---
max_item_levels: 2
supports_open_new_tab: true
attributes:
background_colour:
type: color
label: Background colour
brand_slogan:
type: string
label: Brand slogan
logo:
type: image
label: Footer logo
---<footer style="background-color: {{ footer.background_colour }};">
{% if footer.logo %}
<img src="{{ footer.logo.url }}" alt="{{ footer.logo.alt }}">
{% endif %}
{% if footer.brand_slogan %}
<p>{{ footer.brand_slogan }}</p>
{% endif %}
</footer>The footer object
The footer Liquid object is available inside the footer template. It exposes:
| Property | Type | Description |
|---|---|---|
items | array | The top-level footer navigation items, sorted by position. Each item may contain nested items. |
| (custom attributes) | varies | Any variable defined in the schema — accessed via footer.variable_name. |
Navigation items
Each item in footer.items has the same properties as header items:
| Property | Type | Description |
|---|---|---|
label | string | The display text for the navigation item. |
url | string | The resolved URL. Blank for folder items. |
new_tab | boolean | Whether the link should open in a new tab. |
items | array | Child navigation items. Empty if the item has no children. |
linked_resource | drop | The linked page, product, or blog post object. nil for external links and folders. |
Template context
The footer template has access to the same global objects as the header:
| Object | Description |
|---|---|
company | The current company. |
cart | The current shopping cart. |
user | The currently logged-in user, if any. |
page | The current HTTP request (path, URL, host, params, locale). |
search | The search object. |
Rendering navigation
Basic navigation
The essential code to render a 2-level footer navigation:
---
max_item_levels: 2
supports_open_new_tab: true
---{% unless footer.items == blank %}
<nav>
{% for item in footer.items %}
<a href="{% if item.url != '' %}{{ item.url }}{% else %}javascript:void(0);{% endif %}"
{% if item.new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
{{ item.label }}
</a>
{% if item.items.size > 0 %}
<ul>
{% for nested_item in item.items %}
<li>
<a href="{% if nested_item.url != '' %}{{ nested_item.url }}{% else %}javascript:void(0);{% endif %}"
{% if nested_item.new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
{{ nested_item.label }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</nav>
{% endunless %}Column layout with folders
A common footer pattern uses folder items as column headings with child items listed underneath:
{% unless footer.items == blank %}
<div class="footer__columns">
{% for item in footer.items %}
<div class="footer__column">
{% if item.url != '' %}
<a href="{{ item.url }}" class="footer__column-heading">{{ item.label }}</a>
{% else %}
<h4 class="footer__column-heading">{{ item.label }}</h4>
{% endif %}
{% if item.items.size > 0 %}
<ul>
{% for nested_item in item.items %}
<li>
<a href="{{ nested_item.url }}"
{% if nested_item.new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
{{ nested_item.label }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endfor %}
</div>
{% endunless %}Common uses
The footer template is commonly used for:
- Secondary navigation links (about, contact, terms, privacy)
- Social media links (via custom schema variables)
- Newsletter signup forms
- Company branding (logo, slogan)
- Currency switcher
- Additional libraries (JavaScript or CSS)
- Copyright and legal information
Differences from the header
| Feature | Header | Footer |
|---|---|---|
| Liquid object | menu | footer |
| Template location | partials/menu/index.html | partials/footer/index.html |
| Position on page | Start of <body> | End of <body> |
| Full-render caching | Supported via cache front matter | Not supported |
| Can be hidden | Yes (platform-level) | No — always rendered |