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
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.
- Run the following command to retrieve a list of all of the themes in the store.
shoplazza theme pull
- 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
pullcommand. 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 usingshoplazza 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.
- In a terminal, navigate to your working directory.
- Serve your theme by using the following command:
shoplazza theme serve
- 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.
- Enter the following command:
shoplazza theme publish
- Select the theme that you want to publish from the list.
- Select
Yesto confirm that you want to publish the specified theme.
The theme is published and is now the active theme for the store.
Next steps
- Learn how to implement features in a theme. You can enable certain Shoplazza features or add functionality to your theme. Features fall into the following categories:
Updated over 1 year ago