theme.liquid
The theme.liquid
can be thought of as the master template; all other templates are rendered inside of theme.liquid. Any elements that are repeated in a theme (ex: site navigations, header, footer, etc.) should be placed inside theme.liquid.

Template Considerations
content_for_header
and content_for_layout
There are two Liquid objects that are required in theme.liquid
:
The
{{ content_for_header }}
variable must be placed between the opening and closing<head>
tag. It inserts the necessary Shopify scripts into the<head>
which includes scripts for Google Analytics, Shopify analytics, for Shopify apps, and more.The
{{ content_for_layout }}
variable must be placed between the opening and closing<body>
tag. It outputs dynamic content generated by all of the other templates (index.liquid
,product.liquid
, and so on).
Setting up descendant selectors
You can set up useful descendant CSS selectors by outputting the template object as a CSS class for the <body>
tag, which is typically located in theme.liquid
.
It is important to strip out any periods (.) in a template name as they can break the CSS selector. Below is an example of how to do this using the replace string filter.
<body class="{{ template | replace: '.', ' ' | truncatewords: 1, '' }}" id="{{ page_title | handle }}">
....
</body>
This way, you can easily create CSS rules for specific templates.
Accessing the attributes of a specific object
Inside the theme.liquid
template, you may want to show the contents of a specific object (for example, outputting the contents of the About Us page inside the footer.) This is possible by passing the handle of a specific object or through a theme setting variable. See Accessing attributes via the handle for more details.