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. You can specify which layout to use, or whether to use a layout at all, at the template level:
-
In JSON templates, the layout that's used to render a page is specified using the
layoutattribute. -
In Liquid templates, the layout that's used to render a page is specified using the
layoutLiquid tag.
Anchor to LocationLocation
Layout files are located in the layout directory of the theme:
Anchor to SubtypesSubtypes
There are the following layout types:
| Type | Description |
|---|---|
| General | General layouts can apply to all non-checkout pages. The default layout file, which 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. |
Anchor to SchemaSchema
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:
basic_layout_example.liquid
Anchor to ContentContent
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:
These objects are required in theme.liquid. If references to these objects aren't included, then you can't save or update the file using the code editor or tools like Shopify CLI.
The content_for_header object is required in theme.liquid. It must be placed inside the HTML <head> tag. It dynamically loads all scripts required by Shopify into the document head. These scripts are required for features like hCaptcha, Shopify apps, and more.
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.
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.
Anchor to UsageUsage
When working with layout files, you should familiarize yourself with the following concepts:
Anchor to Support template-specific CSS selectorsSupport 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.
Template-specific CSS selector
theme.liquid
theme.css
Anchor to Access and customize checkout.liquidAccess and customize checkout.
checkout.liquid is now unsupported for the Information, Shipping, and Payment checkout steps. checkout.liquid, additional scripts, and script tags are deprecated for the Thank you and Order status pages and will be sunset on August 28, 2025.
Stores that currently use checkout.liquid for the Thank you and Order status pages need to upgrade to Shopify Extensions in Checkout before the deadline.
Shopify Scripts will continue to work alongside Shopify Extensions in Checkout until June 30, 2026.
Learn how to build checkout extensions that extend the functionality of Shopify checkout.
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.