Customize a theme

As a theme developer, you can customize themes for Shoplazza merchants. These customizations might range from small tweaks to complete redesigns

In this tutorial, you'll use Shoplazza CLI to customize a merchant's theme and then share your progress with them.

What you'll learn

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

Gained access to the merchant's store
Set up your local development environment
Downloaded a copy of the merchant's theme
Made a change and previewed it
Shared your changes with the merchant
Published your changes

Step 1: Request access to the merchant's store

To work on a merchant's theme, you should request access to their store. Working on a theme in a merchant's store lets you test it with the merchant's products and other resources.

You should request a staff account with the the Manage themes permission for the store.

Step 2: 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 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: Download the merchant's theme code

Download a copy of the theme code to work on it locally.

shoplazza theme pull

Use this command to access a list of themes in the merchant's store. You can optionally specify the local path where the theme should be stored.

After you select a theme from the list, its contents are downloaded to the current folder or the specified folder.

Step 5: Make a customization

After you've downloaded the merchant's theme, you can make any necessary changes to the theme code. For example, you can add support for multiple currencies and languages in the merchant's theme using our localization tutorial, or you can make an adjustment to the theme's CSS to change its appearance.

Step 6: Preview your changes

After you make a change to the 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.

The command returns a URL that hot reloads local changes to CSS and sections, allowing you to preview changes in real time using the store's data.

In a terminal, navigate to your working directory.
Serve your theme by using 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.

You can also use this command to generate a preview link and a link to the theme editor for the development theme.

Step 7: Share your changes

To share your changes with the merchant, you need to upload the theme that you're developing as an unpublished theme to the merchant's store. This command returns a link to the editor for the theme in the Store admin and a preview link, both of which you can share with the merchant.

shoplazza theme push

Step 8: Publish the updated theme

After the merchant approves the changes, you can publish the theme to make it live in the merchant's store. If you haven't yet pushed your changes to the store, then you need to do so before you publish the theme.

Enter the following command:

shoplazza theme publish

Select the theme that you want to publish from the list.
Select Yes to confirm that you want to publish the specified theme.

The theme is published and is now the active theme for the store.