# Theme layouts and pages
Source: https://support.storeconnect.com/articles/theme-layouts-and-pages · Last modified 21 August 2026
A **layout** is the outermost template that wraps page content in a complete HTML document. It typically contains the ``, ``, and `` elements, along with common elements like the site header, footer, navigation, and asset includes.
**Page templates render before the layout.** The platform renders the page template into a string, then passes that string as the `body_content` variable to the layout. The layout wraps the pre-rendered page content — it does not "call" the page.
## The default layout
The default layout is `layouts/theme.liquid`. All pages use this layout unless a page template specifies a different one. Here is a minimal layout:
```liquid
{%- default body_content: nil, csrf_meta_tags: nil, csp_meta_tag: nil -%}
{%- default title: nil, meta_keywords: nil, meta_description: nil -%}
{%- default sc_support: nil, theme_bar: nil, data: nil -%}
{%- default controller: nil, action: nil, id: nil -%}
{%- default theme_supplement_stylesheet: nil, theme_supplement_javascript: nil -%}
{{ csrf_meta_tags }}
{{ csp_meta_tag }}
{% render "meta_data" %}
{%- require "styles/theme.css" %}
{{ theme_supplement_stylesheet }}
{%- require "scripts/theme.js" %}
{{ theme_supplement_javascript }}
{{ sc_support }}
{{ theme_bar }}
{{ "accessibility.skip_to_content" | t | default: "Skip to main content" }}
{% render "header" %}
{% render "flash" %}
{{ body_content }}
{% render "footer" %}
```
## Required layout variables
The platform passes these variables to `layouts/theme.liquid`. Declare all of them with `{% default %}` at the top of your layout to prevent undefined variable errors. Variables marked **required** will cause visible failures if omitted.
| Variable | Required | Description |
|----------|----------|-------------|
| `body_content` | **YES** | The fully rendered page template output. Without this, the page appears blank. |
| `csrf_meta_tags` | **YES** | HTML `` tags containing CSRF tokens. Without this, all form submissions fail. |
| `csp_meta_tag` | **YES** | Content Security Policy `` tag. |
| `sc_support` | **YES** | Platform support scripts. |
| `theme_bar` | **YES** | Theme editor and preview bar HTML. Without this, the theme editor breaks. |
| `theme_supplement_stylesheet` | **YES** | `` tag for custom theme CSS (`theme-supplement.css`). Without this, custom theme styles do not load. |
| `theme_supplement_javascript` | **YES** | `