Skip to main content

Directory Structure

A SitePack theme is organized into several key directories that follow a consistent structure. This ensures that the SitePack engine can correctly locate and render your templates and assets.

Core Directories​

When you initialize a theme using sitepack theme:init, the following structure is created (based on the Theme Skeleton):

/
├── assets/           # CSS, JavaScript, images, and fonts
├── config/           # Configuration schemas for the Theme Editor
├── layouts/          # Base templates and main layouts
├── snippets/         # Reusable template components
├── templates/        # Page-specific templates
└── theme.json        # The theme manifest

/assets​

The assets directory contains all your frontend resources.

  • /css: Store your stylesheets here. SitePack automatically handles CSS and serves it through the CDN.
  • /js: Place your JavaScript files here.
  • /images: Store your theme's static images, such as icons, logos, or backgrounds.
Tip

All files in the /assets directory are served via the SitePack CDN during production to ensure high performance and low latency.

/config​

The config directory contains JSON files that define the Theme Editor interface. These files specify what settings (colors, fonts, toggle switches, etc.) the merchant can customize.

  • settings_schema.json: This is the primary file where you define your configuration fields. These fields will be available in the Theme Editor in the SitePack Admin.

/layouts​

Layouts are the "outer shells" of your theme. They typically contain the HTML boilerplate (<html>, <head>, <body>) and define where the page-specific content will be injected.

  • base.twig: The main layout file that other templates extend. It includes the header, footer, and standard scripts/styles.

/snippets​

Snippets are small, reusable Twig components that can be included in other templates. This helps keep your code DRY (Don't Repeat Yourself).

  • header.twig: The site header.
  • footer.twig: The site footer.
  • product-card.twig: A standard component for displaying product information in lists.

You can include a snippet using the Twig include tag:

{% include 'snippets/header.twig' %}

/templates​

The templates directory contains the templates for specific pages in the SitePack storefront.

  • index.twig: The home page.
  • product.twig: The product detail page.
  • category.twig: The product listing (category) page.
  • cart.twig: The shopping cart page.
  • account.twig: Customer account pages.
  • page.twig: Generic static pages.
  • 404.twig: The error page.

The Manifest​

theme.json​

The theme.json file is located at the root of your theme. It is a mandatory manifest that provides metadata about your theme and links to your configuration schemas.

Learn more about theme.json