Add page templates

Render content for the homepage and standard pages, and reserve a region where editors can drop blocks

Templates render the actual content of a page — title, body, anything stored on the record. They live in templates/ and are picked by the content type of the URL being visited. You'll add two: a default page template and a homepage.

How template selection works

When a visitor opens a URL, Basker finds the matching content record and looks for a template based on the record's content type:

A page record renders with templates/page.liquid.
An event record renders with templates/event.liquid.
A blog post renders with templates/post.liquid.

There's also a special case: the homepage. If templates/index.liquid exists, it renders the site's root URL. Otherwise the homepage falls back to whatever record the editor has chosen as the home page, using its content-type template.

Every supported content type has a default template name. The full list is on Template references.

Step 1 — Add `templates/page.liquid`

Create templates/page.liquid:

<article class="page-content">
  <h1>{{ page.title }}</h1>

  <div class="page-content__body s-prose">
    {{ page.content_html | raw }}
  </div>

  {% stageblocks page %}
</article>

A few things are happening here:

page is the drop holding the current page record. Its fields — title, content_html, slug, anything custom — are available as properties.
content_html is the rendered rich-text body. The | raw filter tells Liquid not to escape it, since it's already HTML.
{% stageblocks page %} reserves a region where editor-placed blocks render inline. You'll create the blocks themselves on the next page; for now this just leaves an empty hook.

The layout you built on the previous page wraps this output via {{ content_for_layout }}, so you don't need to repeat the header, footer, or <head> here.

Step 2 — Add `templates/index.liquid`

The homepage gets its own template. Create templates/index.liquid:

<section class="hero">
  <h1>Welcome to My Theatre</h1>
  <p>What's on this season.</p>
</section>

{% stageblocks page %}

It's deliberately spare — the Variants and theme settings page will turn the homepage into a richer variant.

Step 3 — Add a template schema

Templates can declare their own settings and the blocks editors are allowed to add. The declaration goes in a {% schema %} block at the bottom of the file. Add this to templates/page.liquid:

{% schema %}
{
  "settings": [],
  "blocks": []
}
{% endschema %}

settings is for template-level options (you'll add a setting in Variants and theme settings). blocks is the allowed-blocks list — any block whose name appears here can be added by an editor on a page using this template. It's empty for now; you'll fill it in on the next page once blocks exist.

Schema-less templates are valid but the theme checker emits a warning. Adding even an empty schema silences it.

Step 4 — Choose a layout (optional)

Templates use layouts/default.liquid automatically. To use a different layout, declare it at the top of the file:

{% layout 'layouts/checkout.liquid' %}

You won't need this in the tutorial — the default layout you built on the previous page is fine for everything here.

Step 5 — Verify in the browser

Save the files. The dev-server browser should reload to show your page template rendering against whatever page record is the homepage on your test site, wrapped by the layout you built earlier.

If the page comes up empty or unstyled, that's expected — there's no CSS in assets/main.css yet, and the page record might not have content. Open another page on your test site (/about, /contact, anything that exists) and check that the title and body render.

What's next

Build reusable blocks — three blocks editors can drop into the region you just reserved with {% stageblocks %}.

Going deeper

Templates — naming conventions, alternate templates, route-specific quirks.
Rendering blocks — how {% stageblocks %} resolves and renders editor-placed blocks.
Page template reference — every variable available in a page template.

On this page