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:
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.
- In a terminal, navigate to the working directory where you want to clone Lifestyle.
- Enter the following command:
shoplazza theme init
- 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. - 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.
- 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
- 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.
- To serve your theme, run the following command:
shoplazza theme serve
- 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.
- From your Store admin, go to Online Store > Themes.
- In the Theme library section, find the theme that you want to publish, and then click Actions > Publish.
- In the Publish... window, click Publish.
Updated over 2 years ago