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 don't need to write any of these — your theme developer does that. But 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're 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.
Templates are picked when you create or edit a page. The available templates come from your theme. Different themes ship with different templates.
A template doesn't 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 don't need to think about layouts directly. Pages use the layout your theme assigns by default, and that's 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 basker.dev.