Blocks, templates, and layouts
A high-level look at the three building blocks of a custom theme: what each is, and how they fit together
A custom theme is built from three kinds of components: blocks, templates, and layouts. As an editor or integrator, you do not need to write any of these. Your theme developer does that. Knowing what each is and how they fit together makes the rest of the editor easier to navigate.
Blocks
A block is a self-contained section of content that you stack on a page. A hero banner, a row of feature cards, a video embed, a list of upcoming events: each is a block.
Blocks are what editors actually work with day to day. When you build a page, you are choosing blocks from the picker, configuring their content, and ordering them on the page.
For more on working with blocks, see Building pages with blocks.
Templates
A template is a layout choice for a page. The same content can be rendered with a different template to give it a different shape on the live site: a wide-canvas template for a landing page, a narrow-text template for a long-read article, a sidebar template for a documentation page.
You pick a template when you create or edit a page. The available templates come from your theme. Different themes ship with different templates.
A template does not change the content of a page. It changes how the page is rendered around that content.
Layouts
A layout is the outer shell that wraps a page. It contains the header, footer, navigation, and any global elements that should appear on every page using that layout. A theme typically defines one or two layouts: a default layout for most pages, and a special layout for cases like checkout or full-screen presentations.
Most editors do not need to think about layouts directly. Pages use the layout your theme assigns by default, and that is usually the right choice.
How they fit together
A page on the live site is the combination of a layout (the outer shell) wrapping a template (the structural arrangement) wrapping the page's blocks (the content itself). Your theme defines all three. You decide which template a page uses, and you compose the blocks within it.
For developer-level information about how a custom theme defines its blocks, templates, and layouts, see Themes.