Build a custom theme
A guided walkthrough that takes you from an empty directory to an uploaded, previewable Basker theme
This tutorial builds a small but production-shaped Basker theme. By the end, you will have a theme with a real layout, a couple of templates, and a homepage variant. It will also have three reusable blocks, theme-wide settings, and a live calendar that uses the FrontStage API. You will validate the theme, package it, and share a preview link with someone else.
In this section
- Set up your theme directory: scaffold the folders, install the CLI, and start a dev server.
- Build the default layout: assemble the HTML shell, head metadata, and the components your pages share.
- Add page templates: render content for the homepage and standard pages.
- Build reusable blocks: three blocks editors can drop into any page.
- Variants and theme settings: give the homepage a distinctive layout and expose site-wide options.
- Pull live event data: connect a calendar block to
/api/event-instances. - Validate and upload: run the theme checker, package the ZIP, and upload through the admin.
- Share a preview: generate a preview link to send to a colleague.
You will need:
- A Basker site you can sign in to.
- Node.js 22.12 or newer.
- Working knowledge of HTML and CSS. The tutorial introduces Liquid as you go.
Plan for about one hour of focused time end to end. Each page leaves you with something working, so you can pause between steps without losing your place.
When you are ready, go to Set up your theme directory.