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.
- 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
- 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:
-
A link to your development theme at http://your-store.myshoplaza.com/?preview_theme_id={preview-theme-id}. This URL allow you to preview changes using the store's data.
-
A link to the editor for the theme in the Store admin.
-
A preview link that you can share with others.
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:
Area | Example |
---|---|
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.
Updated over 2 years ago