Introduction to SitePack Themes

Welcome to SitePack theme development! SitePack themes are flexible, high-performance frontend skins built with the Twig templating engine. Our approach is "Skeleton-first," meaning you never have to start from scratch. We provide a solid foundation that you can extend and customize to build unique e-commerce experiences.

The Skeleton-First Approach

Every SitePack theme starts with the Theme Skeleton. Whether you download it as a ZIP file or generate it via the SitePack CLI, the Skeleton provides a pre-configured directory structure, a base layout, and essential shop pages like Product, Category, and Cart.

This approach ensures that best practices are followed from day one and significantly speeds up the development process.

Why Twig?

We chose Twig as our templating engine for several key reasons:

• Security: Twig is sandboxed and safe, ensuring that theme code cannot compromise the platform.
• Performance: Twig templates are compiled into optimized PHP code, making them incredibly fast.
• Familiarity: Twig's syntax is clean and similar to other popular engines like Jinja2 or Liquid, making it easy for frontend developers to pick up.

The Skeleton Structure

The Theme Skeleton follows a clear and logical directory structure:

/assets (CSS, JS, Images)
/layouts (Base templates, e.g., main.twig)
/templates (Page-specific templates)
/snippets (Reusable components like headers/footers)
/config (Configuration schemas)
theme.json (The manifest)

Key Components

• /assets: This is where your CSS, JavaScript, and images live. When you deploy your theme, these assets are automatically served via the SitePack CDN for maximum performance.
• theme.json: This is the heart of your theme. It defines the theme's name, version, and configurable settings (like colors or fonts) that the merchant can change directly in the SitePack Admin.

Key Features

Hot Reloading

Experience instant feedback during development. Use the SitePack CLI command sitepack theme:watch to automatically sync your local changes to your development store and refresh the preview.

App Blocks

SitePack is extensible. Themes can reserve space for content injected by Apps using the {% app_block %} tag. This allows third-party integrations (like reviews or specialized widgets) to seamlessly integrate into your theme.

{% app_block 'product_details_after' %}

Custom Settings

You can define UI settings in theme.json that appear in the SitePack Theme Editor. This empowers end-users to customize the look and feel of their store without touching a single line of code.

Tip

Define your settings in the /config directory and reference them in theme.json to keep your manifest clean and manageable.

Workflow

The typical development workflow for a SitePack theme looks like this:

1. Initialize: Start a new project with sitepack theme:init.
2. Develop: Use the CLI to develop locally and see your changes in real-time.
3. Preview: Test your theme on a development store to ensure everything looks perfect.
4. Package & Upload: Once ready, package your theme and upload it to the SitePack Marketplace.

Ready to dive in? Head over to the Directory Structure section to learn more about how a theme is organized.