Custom Theme Creation​

You are ready to create a new theme. You might be wondering: how can you quickly set up the development environment and start coding?

In this tutorial, you will use the SHOPLINE CLI and Seed to create a new theme and upload it to SHOPLINE.

What You Will Learn​

By the end of this tutorial, you will have:

• Set up a local development environment
• Cloned Seed, SHOPLINE's reference theme
• Made changes to your local code and previewed them
• Pushed the theme code to your SHOPLINE store and published your theme

Requirements​

• The URL of the store you will be using, e.g., sl.myshopline.com
• If you are logging in with a staff account, ensure your account has Online Store permissions

Step 1: 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 during local development. Follow these instructions to install SHOPLINE CLI on macOS or Windows.
To install and run SHOPLINE CLI, you need the following on your computer:

• Git
• Node.js version 14.0.0 or higher

See the SHOPLINE CLI Getting Started for the complete requirements to interact with SHOPLINE CLI.

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

Step 2: Initialize a New Theme with Seed​

Use the SHOPLINE theme init command to clone the Seed Git repository to your local machine.

Seed is SHOPLINE's reference theme designed for performance, flexibility, and ease of use. You can use Seed as a starting point for building your theme.

1. In your terminal, navigate to the working directory where you want to clone Seed.
2. Enter the following command:

shopline theme init <THEME_NAME>

3. <THEME_NAME> is the folder name where the theme will be cloned locally, such as my-new-theme-project.
4. After cloning the theme, navigate to the folder:

cd my-new-theme-project

Step 3: Authenticate with SHOPLINE CLI​

Use the SHOPLINE login command to connect SHOPLINE CLI with the store you want to work on.

1. In your terminal, enter the command to log in to your store shopline login --store <DOMAIN>, where <DOMAIN> is the store you want to log in to:

shopline login --store johns-apparel.myshopline.com

2. Your browser will open the login page, where you need to enter the account details for the store you are developing.

Step 4: Preview Your Theme​

After initializing the theme, you can run shopline theme serve to interact with the theme in your browser. SHOPLINE CLI uploads the theme as a development theme to the connected store.
This command returns a URL that reloads with your local file changes, providing a real-time preview of your changes using the store's data.

1. Use the following command to start a service for your theme:

shopline theme serve

2. In your browser, navigate to http://127.0.0.1:8282 to open the theme preview.

Step 5: Test Your Connection​

You can test the theme by making small changes to the theme code. In this example, we will update the page background color and then verify it in the theme editor.

1. Open your theme project in the editor.
2. Navigate to the config folder, and open the settings_data.json file.
3. Find the color_page_background setting in current -> theme and update the value to change the theme's page background color:

{
  "current": {
    "theme": {
      "color_page_background": "red"
    }
  }
}

4. Save your changes, then refresh and view the update in the theme editor.
5. The preview section in the theme editor will now show a page with a red background.

Step 6: Publish Your Theme​

To make your theme live in your store, you need to publish it. You can use SHOPLINE CLI to publish your theme code to the merchant's store in two ways:

• Use shopline theme package to package the local theme code into a zip file.
  • Deliver the zip file to the merchant.
  • The merchant uploads the zip file in the store admin -> Online Store.
• Use shopline theme push to upload the local theme code to the specified theme.

Once uploaded, the published theme will be available in the merchant's store admin.