Customizing Themes​

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

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

What You'll Learn​

By completing this tutorial, you will:

• Gain access to a merchant's store
• Set up a local development environment
• Download a copy of the merchant’s theme
• Make and preview theme changes
• Share your changes with the merchant
• Publish your changes

Requirements​

• The URL of the store you will be working on, e.g., sl.myshopline.com.

Step 1: Request Access to the Merchant's Store​

To work on a merchant’s theme, you need access to their store. This allows you to test the theme using the merchant’s products and other resources. Set up store admin access. You need Online Store permissions for the store.

Step 2: Install SHOPLINE CLI​

SHOPLINE CLI is a command-line tool that helps you build SHOPLINE themes. It allows you to preview, test, and share theme changes locally. Follow the instructions below to install SHOPLINE CLI on macOS or Windows. You need to have the following installed on your computer:

• Git
• Node.js version 14.0.0 or higher

Check the full requirements for interacting with SHOPLINE CLI in the SHOPLINE CLI Getting Started Guide.

npm install --global @shoplinedev/cli
# or
yarn global add @shoplinedev/cli

Step 3: Authenticate Using SHOPLINE CLI​

Connect SHOPLINE CLI with the store you will be working on using the SHOPLINE login command.

1. In the terminal, enter the following command, replacing <DOMAIN> with your store's domain:

shopline login --store sl.myshopline.com

2. This will open a login page in your browser where you need to enter the account details for the store you are developing.

Step 4: Download the Merchant’s Theme Code​

If the merchant does not have a GitHub repository for their theme, download a copy of the theme code to work with locally. Make sure to run the following command in an empty folder:

shopline theme pull

This command lists the themes available in the merchant's store. Choose a theme from the list to download its contents into the current folder.

Step 5: Make Customizations​

After downloading 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.

Step 6: Preview Your Changes​

After making changes to the theme, run the shopline theme serve command to interact with the theme in your browser. SHOPLINE CLI will upload the theme to your connected store as a development theme. This command returns a URL that reloads with your local changes, allowing you to preview them in real-time using store data.

1. In the terminal, navigate to your theme’s working directory.
2. Start a service for your theme with the following command:

shopline theme serve

3. Open your browser and go to http://127.0.0.1:8282 to preview the theme.

You can also use this command to generate preview links and Theme Editor links for the development theme. When you run the shopline logout command, the development theme will be destroyed. To share your

progress with the merchant, proceed to the next step.

Step 7: Share Your Changes​

To share your changes with the merchant, upload the theme you are developing as an unpublished theme in the merchant's store. This command returns links to the theme editor and preview in the SHOPLINE backend, which you can share with the merchant.

shopline theme push

Step 8: Publish the Updated Theme​

Once the merchant approves the changes, you can publish the theme to make it live in the merchant's store. If you haven’t already pushed the changes to the store, do so before publishing the theme.

1. Enter the following command:

shopline theme push

2. Select the live theme from the list.
3. Confirm and publish the theme.

The theme is now published, and the live theme in the store is the one you just updated.