AppsThemesSupport

Customize a theme

Suggest Edits

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

Requirements

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

Installation requirements for Shoplazza CLI

The requirements to install and run Shoplazza CLI depend on your computer:

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.

📘

Note

You can also access themes using other accounts and credentials. Learn more

Step 2: Install Shoplazza CLI

If you haven't done so already, 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, Windows, or Linux.

npm install -g shoplazza-cli

Step 3: Download the merchant's theme code

If you don't have a theme locally, then you need to download a copy of the theme code to work on it locally.

  1. Run the following command to retrieve a list of all of the themes in the store.
shoplazza theme pull
  1. Select a theme from the list. Its contents are downloaded to the current folder or the specified folder.

📘

Tip

If you haven't done so already, you're prompted to log in to Shoplazza when you run the pull command. Make sure that you log in using the account that was granted access to the store. If you're already logged in with an account that doesn't have appropriate access, then you can log out using shoplazza logout.

Step 4: 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 adjust the theme's CSS to change its appearance.

Refer to Next steps to explore additional feature tutorials.

Step 5: 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. This preview is only available in Google Chrome.

  1. In a terminal, navigate to your working directory.
  2. Serve your theme by using the following command:
shoplazza theme serve
  1. Generate a preview link and a link to the theme editor for the development theme.

Step 6: Share your changes

To share your changes with the merchant, you need to upload your changes to the theme to the merchant's store. You're prompted to select the theme that you want to update.

shoplazza theme push

Step 7: 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.

  1. Enter the following command:
shoplazza theme publish
  1. Select the theme that you want to publish from the list.
  2. 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.

Next steps

Updated 9 months ago