Templates

Templates define the overall structure and appearance of your store. A template ties together a header, footer, page definitions, and storefront layouts into a single deployable theme.

Structure

Each template lives in its own directory under templates/:

templates/
├── my-store/
│   ├── configuration.ts     # Metadata, header, and footer
│   └── pages/
│       ├── home.ts          # Home page sections
│       ├── product.ts       # Product page (storefront)
│       ├── catalog.ts       # Catalog page (storefront)
│       ├── category.ts      # Category page (storefront)
│       └── about.ts         # Custom page
├── assets/                  # Shared template assets (cover images, etc.)
layouts/
├── product/                 # Product page layouts
├── catalog/                 # Catalog page layouts
└── category/                # Category page layouts

Key Concepts

• Configuration — every template has a configuration.ts that defines its metadata (name, description, cover image), header section, and footer section. See Configuration.

• Pages — each .ts file in the pages/ directory defines which sections appear on that page. File names map to page types: home.ts, product.ts, catalog.ts, category.ts, or any custom name. See Pages.

• Storefront Layouts — storefront pages (product, catalog, category) require a corresponding layout that defines how the platform's built-in content areas are arranged using named slots. See Layouts.

Scaffolding

Create a new template with the CLI:

npx @lightspeed/crane@latest init --template my-store

This generates the configuration file, page files for all built-in page types, and the required layout directories.

Sub-Pages

• Configuration — metadata, header, and footer assignments
• Pages — page types, section types, and validation rules
• Layouts — storefront page layouts and custom slots