Theme architecture
Learn about the architecture of an Easol theme, the role of each component, and how they fit together.
A theme controls the appearance and functionality of a creator's site. Theme code is organised with a standard directory structure of files specific to Easol themes, as well as supporting assets such as images, stylesheets and scripts.
Easol themes are built using Liquid templating language, HTML, CSS, JavaScript and JSON.
Theme files fall into the following general categories:
- Markup and features - These files control the layout and functionality of a theme. They use Liquid to generate the HTML markup that makes up the pages of a creator's site. This includes partials, templates, and blocks.
- Supporting assets - These are CSS, JavaScript and image files that are called or consumed by other files in the theme.
- Configuration - These are JSON files that define block settings, page layouts and custom types.
Components
The following components determine how each page is organised:
| Component | Description |
|---|---|
| Templates | Control what's rendered on specific page types. Each template corresponds to a page type such as a product page, blog post or package booking. |
| Blocks | The main building components of sites. creators add blocks to blank pages to compose layouts with configurable content and design options. |
| Partials | Reusable code snippets that can be rendered anywhere in the theme using the Liquid render tag. Useful for shared UI elements like cards, buttons and images. |
These components work together to build each page: templates define the page structure, blocks provide the configurable content sections within pages, and partials supply reusable pieces of markup shared across templates and blocks.
Supporting assets
You can add supporting assets to your theme to control the presentation of components and features.
The style of a theme is defined by the CSS and JavaScript applied to templates and blocks. Global styles and scripts live in the assets directory, while block-specific styles and scripts can be included directly within block files.
Configuration
Configuration files use JSON to define settings and structure:
| File type | Description |
|---|---|
| Block schema | YAML front matter within each block file that defines the configurable variables a creator can use in the site builder. |
| Custom types | JSON files in the types directory that define reusable objects with multiple variable fields, which can be referenced across block schemas. |
| Page layouts | JSON files in the pages directory that define predefined collections of blocks to help creators quickly set up pages. |
Directory structure
Themes must use the following directory structure:
theme
├── assets
├── blocks
├── pages
├── partials
├── templates
└── typesEach directory has a specific purpose:
| Directory | Purpose |
|---|---|
assets | Global CSS, JavaScript and image files |
blocks | Content blocks with configurable schemas |
pages | Predefined page layout definitions |
partials | Reusable Liquid code snippets |
templates | Page templates for different content types |
types | Custom type definitions |
For the full directory structure with example files, see the directory structure page.