Get started

Shoplazza CLI is a command-line interface tool that helps you build Shoplazza apps and themes. It quickly generates apps and Shoplazza themes. You can also use it to automate many common development tasks.

This documentation explains how to use Shoplazza CLI for theme development


Before you start

Before you start using Shoplazza CLI to develop themes, make sure that you do the following tasks:

  • Install Node.js (14.14.0 or higher).
  • Install Git.
  • Make sure that you have a account with the Manage themes permission for the store that you want to work on, or you're the owner of the store.
  • Note the URL of the store that you want to work on.
  • Make sure that you're connected to the internet. Most Shoplazza CLI commands need an internet connection to run.

Install Shoplazza CLI

Install Shoplazza CLI on macOS or Windows. For other platforms and package managers, refer to Install Shoplazza CLI.

In a new terminal window, navigate to your home directory and run the following command:

npm install shoplazza-cli -g

Authenticate

Use shoplazza login to connect Shoplazza CLI with the store that you want to work on.

You can log into a store. You need to have Manage themes permission access to the store, or owner of the store. To switch between stores that you have access to, use shoplazza switch.

  1. In a terminal, type shoplazza login --store <DOMAIN>, where <DOMAIN> is the store that you want to log into:
shoplazza login --store your-store.myshoplazza.com
  1. In your browser window, log into the account that's attached to the store that you want to use for development.

Create a new theme

📘

Note

If you don't want to create a new theme, then you can connect to an existing theme.

Use shoplazza theme init to create a new theme on your local machine. This command clones a Git repository to your local machine to use as the starting point for building a theme. By default, this command creates a copy of Lifestyle, Shoplazza's example theme.

To start cloning a theme, run the following command. You're prompted to enter a title for your theme, which also acts as the name of the directory.

shoplazza theme init

? Theme directory name
> Theme demo

Cloning https://github.com/Shoplazza/bing.git into Theme demo... 

✓ Cloned into Theme demo

🚧

Caution

If you're building a theme for the Shoplazza Theme Store, then you can use Lifestyle as a starting point. However, the theme that you submit needs to be substantively different from Lifestyle so that it provides added value for merchants. Learn about the ways that you can use Lifestyle.


Use an existing theme

📘

Note

If you don't want to work on an existing theme, then you can create a new theme.

If you want to use an existing local theme for development, then navigate to the theme's directory on your local machine using cd [path/to/theme]. Any Shoplazza CLI theme command that you run uses the theme in that directory.

To use an existing remote theme, use one of the following options:

  • Pull the theme onto your local machine using shoplazza theme pull. You're prompted to select a theme from the list of themes on the store.

  • If your theme is in GitHub, use shoplazza theme init and specify the remote URL using the --clone-url flag.


Preview, test, and share your theme

After you create or navigate to your theme, you can run shoplazza theme serve to interact with the theme in a browser. Shoplazza CLI uploads the theme as a development theme on the store that you're connected to, and returns the following:

To serve your theme, run the following command:

shoplazza theme serve

The output is similar to the following:

shoplazza theme serve

? Select a theme to push (Choose with ↑ ↓ ⏎) 
LifeStyle(Life Style) (5830ad8c-8843-4758-a72d-3f56a4661415) [unpublished]

Please open this URL in your browser:
https://fly-fish.myshoplaza.com/?preview_theme_id=5830ad8c-8843-4758-a72d-3f56a4661415

Customize this theme in the Theme Editor, and use 'theme pull' to get the changes:
https://fly-fish.myshoplaza.com/admin/smart_apps/editor?theme_id=5830ad8c-8843-4758-a72d-3f56a4661415

Listening for file changes ...

Push your theme to your store

Use shoplazza theme push to upload your local theme files to Shoplazza, overwriting the remote versions. You're prompted to select the theme to overwrite from the list of the themes in your store. Use the --unpublished flag to upload the theme to the theme library without overwriting an existing theme.

shoplazza theme push

? Select a theme to push (Choose with ↑ ↓ ⏎)
  1) Create a new unpublished theme
  2) LifeStyle(Life Style) (37ef4163-5fb6-49c2-bc77-6cbd170123e1) [live]
> 3) LifeStyle(Life Style) (5830ad8c-8843-4758-a72d-3f56a4661415) [unpublished]
  4) Nova 2022 (67042e12-411d-48cd-a88d-af9a3372565d) [unpublished]
  5) Copy of Sweet (e90a5aa2-0de8-445e-b58f-2be3b1f26a5e) [unpublished]
  6) Copy of Night v1 (e031029e-b33e-41c4-be85-b72a35bec1d5) [unpublished]
  7) Sweet (edcfbdd1-80e9-4f95-bd3c-745d5afb3765) [unpublished]

Publish your theme

Use shoplazza theme publish to select and publish an unpublished theme from your theme library. If you want to publish your local theme, then you need to run shoplazza theme push first.

shoplazza theme publish

? Select a theme to publish (Choose with ↑ ↓ ⏎)
> 1) LifeStyle(Life Style) (5830ad8c-8843-4758-a72d-3f56a4661415) [unpublished]
  2) Nova 2022 (67042e12-411d-48cd-a88d-af9a3372565d) [unpublished]
  3) Copy of Sweet (e90a5aa2-0de8-445e-b58f-2be3b1f26a5e) [unpublished]
  4) Copy of Night v1 (e031029e-b33e-41c4-be85-b72a35bec1d5) [unpublished]
  5) Sweet (edcfbdd1-80e9-4f95-bd3c-745d5afb3765) [unpublished]
  6) Elegant (66a9bb54-bbf3-4b5e-a2ce-d4ccc84292b8) [unpublished]
  7) Night (f66adb66-66ad-47f8-8f4b-bafbe18b49cc) [unpublished]

Find your theme ID

You might want to use a theme's ID to pull, push, publish, or delete a theme using Shoplazza CLI.

You can get the IDs of all of the themes in a store using shoplazza theme list:

shoplazza theme list

⭑ List of fly-fish.myshoplaza.com themes:
 1) LifeStyle(Life Style) (37ef4163-5fb6-49c2-bc77-6cbd170123e1) [live]
 2) LifeStyle(Life Style) (5830ad8c-8843-4758-a72d-3f56a4661415) [unpublished]
 3) Nova 2022 (67042e12-411d-48cd-a88d-af9a3372565d) [unpublished]
 4) Copy of Sweet (e90a5aa2-0de8-445e-b58f-2be3b1f26a5e) [unpublished]
 5) Copy of Night v1 (e031029e-b33e-41c4-be85-b72a35bec1d5) [unpublished]
 6) Sweet (edcfbdd1-80e9-4f95-bd3c-745d5afb3765) [unpublished]
 7) Elegant (66a9bb54-bbf3-4b5e-a2ce-d4ccc84292b8) [unpublished]
 8) Night (f66adb66-66ad-47f8-8f4b-bafbe18b49cc) [unpublished]
 9) Nova 2022 (4cfc5f5a-4d53-4e24-bec9-0f4bc0ae1892) [unpublished]
 10) Hero (cba1f113-c232-4242-b924-64914818f22b) [unpublished]
 11) Nova (5e94299d-c1f6-447c-99ef-c4f54d23837e) [unpublished]
 12) Brooklyn (fa89ad82-5200-4dbc-b526-a6f909cdfee9) [unpublished]

When you serve, push, or publish a theme, the theme's ID is listed in the response:

shoplazza theme serve

? Select a theme to push (Choose with ↑ ↓ ⏎) 
LifeStyle(Life Style) (#THEME_ID) [unpublished]

⠧ Syncing theme files on fly-fish.myshoplaza.com

You can also find the ID of a theme in any URLs related to editing or previewing the theme:

AreaExample
Theme editor<https://your-store.myshoplaza.com/admin/card?theme_id=THEME_ID>
Code editor<https://your-store.myshoplaza.com/admin/smart_apps/editor?theme_id=THEME_ID>
Theme preview<https://your-store.myshoplaza.com/?preview_theme_id=5830ad8c-8843-4758-a72d-3f56a4661415>

Next steps

  • Access our comprehensive Liquid reference for detailed documentation on Liquid tags, objects, and filters.

  • Read the complete reference documentation for core and theme-specific Shoplazza CLI commands.