The layout simple tag specifies which layout template wraps the current page. Every page template is wrapped in a layout; the default is theme, but you can switch to a different layout for specific pages.

Layout architecture

StoreConnect uses a two-level layout system:

1. layouts/theme.liquid — The outer wrapper. It contains the doctype, <head> tag, CSRF token, and the opening <body> tag. This is the root of every page.
2. Other layouts (e.g., layouts/account.liquid, layouts/checkout.liquid) — Inner wrappers that add page-specific structure like navigation, headers, or sidebars. These are fragments that contain {{ yield }}, which inserts the page content.

When you render a page: 1. The page template renders. 2. Its specified layout wraps the page content. 3. The theme layout wraps everything.

Syntax

```liquid

{% layout “layouts/account” %} ```

```liquid

{% layout “theme” %} ```

```liquid

{% layout nil %} ```

Property	Value
Tag Name	layout
Type	Simple tag
Source	Hydrofoil (core)

How layouts work

A layout template contains {{ yield }}, which is replaced by the page content. When you specify a layout in a page template, that page’s rendered output fills the yield slot:

Page template (account/orders.liquid):

```liquid

{% layout “layouts/account” %}

My Orders

{%- for order in current_customer.orders -%}
• {{ order.order_number }}
{%- endfor -%}

```

Layout template (layouts/account.liquid):

```liquid

{% layout “theme” %}

{{ yield }}

```

Result on the page:

• theme layout opens <html>, <head>, <body>
• account layout renders the sidebar and <main> opening tag
• The page content (“My Orders” list) fills the {{ yield }}
• account layout closes </main>
• theme layout closes </body>, </html>

The theme layout

The layouts/theme.liquid file is special. It contains:

• The HTML doctype and <html> tag
• The <head> section with meta tags, stylesheets, and scripts
• The CSRF security token (required for all forms)
• The opening <body> tag
• {{ yield }} to insert page or layout content
• Closing </body> and </html> tags

Do not specify layouts/theme explicitly in most pages; it wraps everything by default. Override it only in rare cases, such as when building an API response or a custom document type.

Disabling layout

Pass nil to render the page without any layout:

```liquid

{% layout nil %} ```

This is rarely needed. Use it only for custom documents like inline images, XML feeds, or JSON APIs.

When to use layout

Use layouts to:

• Provide page-specific structure — the account page layout differs from the product page layout
• Share navigation and headers — multiple pages use the same wrapper
• Control the page shell — different page types need different backgrounds, sidebars, or layouts

Execution context

The layout tag specifies which template wraps the page. It must appear before any page content and typically comes first in the template. Layout wrapping occurs at render time, before the page is sent to the browser.

Examples

Account pages with shared layout

All pages under account/ use the account layout, which provides a menu sidebar:

account/orders.liquid:

```liquid

{% layout “layouts/account” %}

My Orders

{%- for order in current_customer.orders -%} {%- render “order-summary”, order: order -%} {%- endfor -%} ```

account/addresses.liquid:

```liquid

{% layout “layouts/account” %}

My Addresses

{%- for address in current_customer.addresses -%} {%- render “address-card”, address: address -%} {%- endfor -%} ```

Both pages render inside the account layout, which provides the sidebar menu. The layout structure stays consistent.

Checkout with a minimal layout

The checkout flow uses a minimal layout with no sidebar:

checkout/shipping.liquid:

```liquid

{% layout “layouts/checkout” %}

Shipping Address

{%- render “forms/shipping-address”, cart: current_cart -%} ```

layouts/checkout.liquid:

```liquid

{% layout “theme” %}

```

This layout is simpler than the account layout, with no menu, no sidebar, and just a centered checkout flow.

Custom API response without layout

For a custom API endpoint or JSON response, disable the layout:

```liquid

{% layout nil %}

{%- if current_customer -%} {“status”: “authenticated”, “customer_id”: “{{ current_customer.sfid }}”} {%- else -%} {“status”: “not_authenticated”} {%- endif -%} ```

No HTML wrapper is added; the page content is sent as-is.