Skip to main content

Getting Started with Themes

Developing a SitePack theme is a straightforward process that takes you from a local development environment to a live store. This guide will walk you through the essential steps to get your first theme up and running.

1. Prerequisites​

Before you start, ensure you have the following:

  • SitePack CLI: You must have the SitePack CLI installed on your machine. Follow the installation guide if you haven't done so yet.
  • SitePack Account: You need a SitePack account. You can create an organization for free in the SitePack Partner Dashboard.

2. Initialize Your Theme​

Open your terminal and navigate to the directory where you want to store your theme projects. Run the following command to create a new theme:

sitepack theme:init

The CLI will prompt you for:

  • Theme Name: The display name for your theme.
  • Directory: The folder where the theme files will be generated.

This command downloads the Theme Skeleton and sets up the basic directory structure for you.

3. Local Development​

Once your theme is initialized, you can use your favorite code editor (like PHPStorm, VS Code, or any AI-powered editor) to modify the templates and assets.

To see your changes in real-time, navigate into your theme directory and run the sitepack theme:watch command:

sitepack theme:watch

This command automatically uploads every change you save directly to a development site.

Previewing Changes​

You can preview your theme on your SitePack subdomain. For development, use the staging prefix: https://staging-[your-subdomain].sitepack.app

For example, if your store is example3.sitepack.app, your preview URL will be https://staging-example3.sitepack.app.

4. Versioning and Backups​

We highly recommend using a version control system like Git. Once you've made significant progress, save your theme in a repository on GitHub or BitBucket. This ensures you have backups and can track your changes over time.

5. Publishing Your Theme​

When your theme is ready for the world, you can publish it using the SitePack CLI:

sitepack theme:publish

6. Managing Your Theme​

In your Organization Dashboard, you can manage how your theme is used:

  • Connect to a Store: You can connect your theme to a specific store to overwrite its current theme. If the theme is already connected, SitePack will update it to the newest version.
  • Privacy & Monetization:
    • Private: Keep the theme for use on a single site.
    • Public: List your theme in the SitePack Marketplace. This allows you to earn money through a one-time fee or a subscription-based plan.
    • See the Publishing & Monetization guide for more details.

Ready to start building? Check out the Theme Basics to understand the structure of your new theme, or learn about theme.json and Theme Assets.