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.
Theme Kit is a python package available on PyPi
If you already have
pip, install with the following command:
pip install next-theme-kit
Mac OSX Requirements
See how to install
pip with HomeBrew. Once you have completed this step you can install using the
pip instructions above.
Option 1 (Recommended) - Windows 10 and above feature WSL (Windows Subsystem for Linux) which provides a native Linux environment, see how to Install WSL with Ubuntu. Once you have installed WSL, follow the best practice guides to configure and use with VS Code and then follow the
pipinstructions above to install Theme Kit.
Option 2 - Installing
pythonin Windows natively can be done with through the Windows App Store. Recommend using Windows Powershell. This route is a little more tricky and some knowledge on how to manage python in windows will be required.
Use Python Virtual Environments - For Mac, Windows, and Linux, it's a best practice to use a Python Virtual Environment to isolate python packages and dependecies to reduce potential conflicts or errors, more on creating a Python Virutal Environment.
Generate an API Key
Store authentication uses Oauth and requires creating a store Oauth App with
- In the Storefornt admin area create an Oauth App from Settings>API Access by clicking Create App
- From the Create Oauth App window give the app a name and assign a user from the select field
- In the new app's Permissions tab enable the
- Click save and this will generate the API key needed for the themekit commands
With the package installed, you can now use the commands inside your theme directory and work on a storefront theme.
You must pass the
store parameters for all commands if there is not an existing
config.yml file in your current directory.
||Initialize a new theme|
||List all available themes|
||Checkout an existing theme|
||Download existing theme or theme file|
||Push current theme state to store|
||Watch for local changes and automatically push changes to store|
||Process sass to css, see 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.
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
scssfiles in top level
ntk watchto process theme
- Top level
scssfiles will be processed to
cssfiles in the asset directory with the same name.
Example Theme with Sass Structure
├── assets │ ├── main.css // reference this asset file in templates ├── sass │ ├── _base.scss │ ├── _variables.scss │ └── main.scss // processed to assets/main.css