Layouts

Layouts are the base of the theme, through which all templates are rendered.

Layouts are Liquid files that allow you to include content, that should be repeated on multiple page types, in a single location. For example, layouts are a good place to include any content you might want in your <head> element, as well as headers and footers.

You can edit the default theme.liquid layout, or you can create multiple custom layout files to suit your needs. The layout that's used to render a page is specified in the template using the layout Liquid tag. You can also set templates to use no layout.

Diagram of theme architecture components with the layout highlighted.

Location

Layout files are located in the layout directory of the theme:

Subtypes

There are the following layout types:

Type Description
General General layouts can apply to all non-checkout pages.

The default layout file, which is must be included in all themes, is theme.liquid.
Checkout This layout type applies to all checkout pages. It's available to Shopify Plus merchants only.

To learn more about this layout, refer to checkout.liquid.

Schema

Because layout files are the base of the theme, they should follow the structure of a standard HTML document in most cases. Most layout files also contain the following Liquid objects:

Content

Layouts allow you to include content that's repeated across multiple page types in a single location. For example, layouts might include header and footer sections and SEO metadata.

Layout files are .liquid files, so content can be built using standard HTML and Liquid.

Layouts can access any global Liquid objects and can contain the following Liquid objects:

content_for_header

The content_for_header object outputs scripts from Shopify for things like Google Analytics, Shopify Analytics, Shopify apps, and more. You need to add a reference to this object between the <head> and </head> HTML tags.

You shouldn't try to modify or parse the content_for_header object. If content_for_header changes, then the behavior of your Liquid will change. Modifications to content_for_header can lead to broken analytics information within Shopify and other analytics programs with officially supported integration paths.

content_for_layout

The content_for_layout object dynamically outputs the content for each template. You need to add a reference to this object between the <body> and </body> HTML tags.

Usage

When working with layout files, you should familiarize yourself with the following concepts:

Support template-specific CSS selectors

You can help create CSS rules for specific templates by outputting data from the template object in the <body> tag’s class.

Access and customize checkout.liquid

To enable or disable access to checkout.liquid, Shopify Plus merchants must contact support. To learn more about enabling access, refer to Access checkout.liquid.

Before making any customizations, you should refer to checkout.liquid to familiarize yourself with the file format and contents, as well as Best practices for editing checkout.liquid.