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).
Did you know?
If you don't have these two objects in your theme.liquid template, an error will occur in the Liquid rendering engine and you will not be able to save.
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.