Layouts
The layout file that wraps every page with shared HTML structure.
The layout is the outer shell of every page. It holds the <html>, <head>, and <body> tags, plus the header and footer. Every template on your store renders inside the layout.
The default layout
Most themes have one layout file: layout/theme.liquid. Here is a typical structure:
<!DOCTYPE html>
<html lang="{{ request.locale }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page_title }} – {{ store.name }}</title>
<meta name="description" content="{{ page_description }}">
<link rel="canonical" href="{{ canonical_url }}">
{{ content_for_header }}
<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
</head>
<body>
{% section 'announcement-bar' %}
{% section 'header' %}
<main id="main" role="main">
{{ content_for_layout }}
</main>
{% section 'footer' %}
<script src="{{ 'theme.js' | asset_url }}" defer></script>
</body>
</html>content_for_layout
The {{ content_for_layout }} tag is the key to the layout system. It marks where the page content goes. When a visitor loads a product page, the product template renders and its output replaces this tag.
You should have exactly one {{ content_for_layout }} in your layout. It is usually inside a <main> element.
content_for_header
The {{ content_for_header }} tag outputs any scripts and meta tags that the platform needs to inject into the <head>. Always include it. Without it, features like analytics and the visual editor preview will not work.
Place it after your own meta tags but before your stylesheet links.
Static sections in the layout
Use {% section %} to load sections that appear on every page:
{% section 'header' %}
{{ content_for_layout }}
{% section 'footer' %}These are static sections. They are fixed in place and cannot be moved by the merchant through the visual editor. They can still have settings that the merchant can edit.
Global objects in the layout
The layout has access to all global objects. These are the most commonly used ones:
| Object | Use in the layout |
|---|---|
store.name | Site title, footer copyright |
page_title | The <title> tag |
page_description | Meta description |
canonical_url | Canonical link tag |
request.locale | The lang attribute on <html> |
cart.item_count | Cart icon badge |
customer | Show login/logout links |
A complete layout example
<!DOCTYPE html>
<html lang="{{ request.locale }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page_title }}{% if page_title %} – {% endif %}{{ store.name }}</title>
{% if page_description %}
<meta name="description" content="{{ page_description }}">
{% endif %}
<link rel="canonical" href="{{ canonical_url }}">
{{ content_for_header }}
<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
{% if store.metafields.custom.favicon %}
<link rel="icon" href="{{ store.metafields.custom.favicon | img_url: '32x32' }}">
{% endif %}
</head>
<body class="template-{{ request.path | split: '/' | last }}">
<a href="#main" class="skip-to-content">Skip to content</a>
{% section 'header' %}
<main id="main" role="main">
{{ content_for_layout }}
</main>
{% section 'footer' %}
<script src="{{ 'theme.js' | asset_url }}" defer></script>
</body>
</html>This layout includes a skip link for keyboard users, a favicon from store metafields, and a body class based on the current page path.