Getting started

Theme Kit is a cross-platform command line tool that you can use to build Shoplazza themes. To get up and running quickly with Theme Kit, follow the steps in this guide.

Requirements

  • You have access to a Shoplazza store.
  • You're familiar with the basics of the command line.

Step 1: Install Theme Kit

You can install Theme Kit using the command line on Linux, macOS, and Windows.

📘

Note

If you have previously installed Theme Kit, then make sure you're using the latest version.

Use the following npm install installation command to automatically download and install the latest version of Theme Kit:

npm install -g shoplazza-themekit

Step 2: Get a store token

After you install Theme Kit, you need to get a Theme Token to connect Theme Kit to your store and manage your template files. The store owner or a staff member with the appropriate permission can create a Theme Token for you using the Theme Access app.

  1. Ask the store owner with the appropriate permissions to create a Theme Token for you using the theme.
  2. Copy the token. You'll use it in the next step.

Step 3: Connect to an existing theme

To connect to an existing theme, you'll need the theme's ID. The easiest way to get your theme's ID is to open the code editor and get its URL theme_id parameter value. e.g. https://my-store.myshoplaza.com/admin/smart_apps/editor?theme_id=9dd7b938-a458-4267-a774-56c4e487ae1c&name=Life Style, its theme ID is 9dd7b938-a458-4267-a774-56c4e487ae1c.

Step 4: Set up your config file

A theme.json file creates a local connection to your Shoplazza store's theme. You can use the previous information you collected(Theme token and theme ID)to create a theme.json file in your theme, and then download the theme locally.

  1. Create a directory for your theme:
mkdir [your-theme-name]
  1. Navigate to the new directory:
cd [your-theme-name]
  1. To download the online theme:
shoplazza theme pull
  1. Create the theme.json file that connects this theme with a local version in the directory you just created.
touch theme.json

Step 5: Push updates to your theme

Now that you've established a connection to a Shoplazza theme, you can run the following command in your theme directory:

shoplazza theme watch

The theme watch command instructs Theme Kit to watch for any changes made to your local files, and automatically pushes changes to your theme in the connected Shoplazza store. To close the watch connection, type ctrl + c.