Create a theme

You're ready to create a new theme. You might be asking yourself: How can I quickly set up my development environment and start coding?

In this tutorial, you'll use Shoplazza CLI, Lifestyle, to create a new theme and upload it to Shoplazza.

What you'll learn

After you've finished this tutorial, you'll have accomplished the following:

• Set up your local development environment

• Cloned Lifestyle, Shoplazza's reference theme

• Previewed changes made to your local code

• Integrated version control into your theme development process

• Pushed theme code to your Shoplazza store and published your theme

Before you start

Before you start developing themes, do the following:

• If you want to use a development store to build a theme, create or log in to a Shoplazza Partner account, and then create a development store. We recommend using a development store for this tutorial.

• Note the URL of the store that you want to work on, such as your-store.myshoplaza.com.

• Make sure that you have Manage themes permission for the store that you want to work on.

Step 1: Install Shoplazza CLI

Shoplazza CLI is a command-line tool that helps you to build Shoplazza themes. It lets you preview, test, and share changes to themes while developing locally. Follow the instructions below to install Shoplazza CLI on macOS or Windows. For other platforms, refer to Install Shoplazza CLI.

To install and run Shoplazza CLI, you need to have the following installed on your computer:

• Install Node.js (14.14.0 or higher).
• Install Git.

Review the full requirements for interacting with Shoplazza CLI in Getting started with Shoplazza CLI.

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

npm install shoplazza-cli -g

Step 2: Initialize a new theme using Lifestyle

Use shoplazza theme init to clone the Lifestyle Git repository to your local machine

Lifestyle is Shoplazza's reference theme, built for performance, flexibility, and ease of use. You can use Lifestyle as the starting point for building a theme.

1. In a terminal, navigate to the working directory where you want to clone Lifestyle.
2. Enter the following command:

shoplazza theme init

3. You're prompted to enter a name for your theme, such as my-new-theme-project. The theme is cloned into a folder with the same name.
4. After the theme is cloned, navigate to the folder:

cd my-new-theme-project

Step 3: Authenticate with Shoplazza CLI

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

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.myshoplaza.com

2. In your browser window, log into the account that's attached to the store that you want to use for development.

Step 4: Preview your theme

After you initialize 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.

1. To serve your theme, run the following command:

shoplazza theme serve

2. In Browser, such as Google Chrome, navigate to http://your-store.myshoplaza.com/?preview_theme_id=#THEME_ID to open the theme preview.

Step 5. Publish your theme

If you want to make your theme live on your store, then you can publish it.

1. From your Store admin, go to Online Store > Themes.
2. In the Theme library section, find the theme that you want to publish, and then click Actions > Publish.
3. In the Publish... window, click Publish.