Skip to content

Theme Kit

Theme Kit is a command line tool for developers to build an maintain storefront themes programmatically, allowing theme developers to:

  • Work on theme templates and assets using their local code editor or favorite IDE.
  • Use git version control to work on a theme collectively with many theme collaborators.
  • Use a pipeline to manage deployments of theme updates.

See Full Instructions on Github Install Theme Kit from PyPi

Installation

Theme Kit is a python package available on PyPi

If you already have python and pip, install with the following command:

pip install next-theme-kit

Mac OSX Requirements

See how to install python and pip with HomeBrew. Once you have completed this step you can install using the pip instructions above.

Windows Requirements

See how to install python and pip with Chocolatey. Once you have completed this step you can install using the pip instructions above.

Generate an API Key

Store authentication uses Oauth and requires creating a store Oauth App with theme:read and theme:write permissions.

  1. In the Storefornt admin area create an Oauth App from Settings>API Access by clicking Create App
  2. From the Create Oauth App window give the app a name and assign a user from the select field
  3. In the new app's Permissions tab enable the theme:read and theme:write permissions.
  4. Click save and this will generate the API key needed for the themekit commands

Usage

With the package installed, you can now use the commands inside your theme directory and work on a storefront theme.

Important

You must pass the apikey and store parameters for all commands if there is not an existing config.yml file in your current directory.

Command Description
ntk init Initialize a new theme
ntk list List all available themes
ntk checkout Checkout an existing theme
ntk pull Download existing theme or theme file
ntk push Push current theme state to store
ntk watch Watch for local changes and automatically push changes to store
ntk sass Process sass to css, see Sass Processing

Sass Processing

Theme kit includes support for Sass processing via Python Libsass. Sass processing includes support for variables, imports, nesting, mixins, inheritance, custom functions, and more.

Important

Sass processing is only supported on local, files in the sass directory are uploaded to your store for storage but cannot be edited in the store theme editor.

How it works

  1. Put scss files in top level sass directory.
  2. Run ntk sass or ntk watch to process theme sass files.
  3. Top level scss files will be processed to css files in the asset directory with the same name.

Example Theme with Sass Structure

├── assets
│   ├── styles.css // reference this asset file in templates
├── sass
│   ├── _base.scss
│   ├── _variables.scss
│   └── styles.scss // processed to assets/main.css