Getting Started

The Selz Theme Kit can be run straight out of the box with very little setup, providing you with a local development environment complemented by additional features that make theme changes and builds easy and efficient. Read on to set it up.

Installation

In a terminal window, execute

yarn add global selz-theme-kit

or

npm install -g selz-theme-kit

to install the Selz Theme Kit command-line interface with your preferred package manager.

Environment setup

Before editing a theme for the first time with Selz Theme Kit, it is critical to initialise the mock data used to hydrate the template views.

Given an existing theme, navigate to its directory and execute

stk mock

which will generate the required files under a .stk folder in Selz Theme Kit's global installation directory.

Alternatively, a new theme can first be initialised by either using Selz's minimally-opinionated boilerplate theme or cloning an existing theme. This is easy to achieve by running

stk new

and following the prompts.

Selz Theme Kit is 'batteries-included' when it comes to getting started with sample store data, but offers advanced configuration options for bespoke use cases. For further reading about data mocking for Selz Theme Kit, see the Data mocking sections in the How it works and Configuration reference parts of this documentation.

Starting the development environment

The Selz Theme Kit development environment can subsequently be started using

stk start

which will launch the default browser with the client view.

Using Selz Theme Kit

Point your browser to localhost:5312 if not already open. You can now edit your theme's template, styling and JavaScript code, and changes will be automatically hot-reloaded on save. Switching between template previews is simply a matter of selecting a different file from the browser in the left-hand side panel.

Deploying themes

Once a theme is ready for testing on a production store, the first step is to package it for deployment. To create a theme archive ready for uploading in the working theme directory, execute

stk package

from the same directory. The archive can then be uploaded as a new custom theme via the Installed Themes section of your Selz dashboard.