The details behind Shopify may be unclear to a new developer. Although Shopify’s documentation is abundant, it sometimes falls short of good explanations. Here we will go through the Dawn theme at a high level and explain how templates and sections work to provide a dynamic experience for the merchant. In doing so, we will reveal the architecture of Dawn.
The word dynamic means something that changes. As developers, this usually means that we have data that can change. In Shopify the templating language Liquid allows access to dynamic data. When using dynamic in the context of sections, however, we mean that the merchant can add, remove, or reorder sections of their website. This is done within the theme editor.
Dynamic is not the only word with multiple meanings. The word render is usually reserved for the painting of the screen after parsing the HTML. When Shopify’s servers sift through the code with Liquid and HTML, it “renders” the Liquid tags. Here, render means it “replaces” the tags with data. For server-side rendering, which is what Shopify offers, render means that the final document has been served. The word becomes more obfuscated with its use in Shopify theme development with templates.
Quibbles aside, let us dig into Shopify’s Dawn theme. The theme consists of different types of files, but we will focus on layouts (1), templates (2), and sections (3). The layout file, theme.liquid, serves the purpose of a master template, and it renders template files. Templates, on the other hand, render section files and ultimately control what is displayed on a webpage. The use of the word render in the context of template means “display”.
The layout file, for example, theme.liquid, renders all templates with the content_for_layout object. It replaces this tag with all of the Liquid template file’s HTML But which template will be served? If we are on the homepage, then index.json will be accessed. Shopify’s routings dictate this. But since this is a JSON file, it contains no HTML. Within the index file, it specifies which sections to render. These sections contain Liquid and HTML.
{% sections 'header-group' %}
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
{% sections 'footer-group' %}
As stated, the files which are referenced in the index.json file are sections. This means that they are used for the theme editor. Once in the theme editor, these appear as different parts that make up the website and can be dynamically rearranged. Below shows the Header section and Footer section while the middle is the Template. The Header and Footer are static and do not change when we change the Template. They come from the sections tag above, which consist of the files header-group.json and footer-group.json. They take on the format {name}-group because they have multiple sections.
Under the Template category, the sections correspond to image-banner, featured-collection, and page Liquid files. Anything underneath a section is known as a block and is defined, just as the sections are, within the schema tag at the end of its section file. The index.json, which is under the Template category, becomes auto-populated with JSON settings once we add sections from the theme editor. We can change the templates underneath the Template category within the theme editor to view Products, Collections, Collection Lists, Blog, etc. Like index.json for the homepage, these templates are JSON files which will have their own corresponding Liquid section files.
As we can see, Shopify’s theme layout is intricate. Furthermore, terms and concepts at times become conflated. For example, index.json file is underneath the template directory within your development environment. But it does not actually display anything. It specifies which sections should be rendered and auto-populates with settings when we add sections from the theme editor. The sections that are specified are Liquid files underneath the Section directory. But these sections consist of HTML and Liquid which is what actually gets rendered or displayed as our webpage. Template files serve the purpose of being a reference for other files to be rendered.
Hopefully, this was helpful to get an high-level overview of the Dawn theme. In the next post, we will show the details of the code that make up sections and templates.
