---
title: "Build a new theme"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/online-store-3-0-themes/get-started/build-a-new-theme'
  md: 'https://developer.shopline.com/docs/online-store-3-0-themes/get-started/build-a-new-theme.md'
---
# Build a new theme

Use [SHOPLINE CLI](https://developer.shopline.com/docs/online-store-3-0-themes/development-tools/cli/overview.md) and the [Bottle theme](https://developer.shopline.com/docs/online-store-3-0-themes/bottle.md) to create a new theme and upload it to SHOPLINE.

* * *

## Before you begin{#IKGhH}

Before you begin, make sure that you meet the following requirements:

-   You have installed [Git](https://git-scm.com/downloads).
    
-   You have installed [Node.js](https://nodejs.org/en/).
    
-   Obtain the URL of the store for which you create the theme. You can use the URL of a [development store](https://developer.shopline.com/docs/apps/development-tool/development-stores/overview.md) that you created in the [Partner Portal](https://developer.myshopline.com/home/index), or you can get the URL of a store through the merchant's authorization.
    
-   Make sure that your account can access the **Online Store** in the SHOPLINE Admin, or you are the store owner.
    
-   Learn about the [Sline](https://developer.shopline.com/docs/sline/sline-overview.md) template engine, independently developed by SHOPLINE. It forms the foundation for dynamically rendering the merchant's store pages.

* * *    

## Step 1: Install SHOPLINE CLI{#q3oqj}

Run the following command to install the SHOPLINE CLI.

```shell
npm install --global @shoplineos/cli
```

You can use the following command to verify that the CLI is successfully installed or to check the current CLI version.

```shell
sl --version
```

* * *

## Step 2: Log in to the store{#UwJhM}

1.  In the terminal, enter the following command to log in to the store.
    

```shell
sl login --store your-store.myshopline.com
```
> **TIP**
>
> `--store` represents the store handle name.  

2.  The terminal will automatically open the browser and redirect you to the login page.
    
3.  Log in to the store and follow the prompts.
    
4.  You can close the browser after completing the operation. A successful message will appear in the terminal once the login is successful.
    

* * *

## Step 3: Initialize the Bottle theme{#hGEWd}

The Bottle theme is the basic theme template provided by SHOPLINE. You can use it as the starting point to build your theme.

1.  In the terminal, navigate to a project directory where you want to clone the Bottle theme.
    
2.  Enter the following command:
    

```shell
sl theme init my-theme
```
> **TIP**
>
> `my-theme` is the name of the local folder where you want to clone the theme.

3.  Navigate to the theme directory you created.
    

```shell
cd my-theme
```

* * *

## Step 4: Start the local preview{#o5XuN}

1.  Run the following command to start a local development server.
    

```shell
sl theme serve
```

By default, the server performs hot loading for CSS and [section](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/sections.md) file updates. If a change does not support hot reloading, the page will automatically refresh so you can preview updates in real time using store data.

2.  In the terminal, you can see the following URLs:
    
    -   **Local preview URL**: A `http://127.0.0.1:8282` link, which provides the local development server functionality.
        
    -   **Online preview URL**: An online URL to check and share the current theme effect in real time.
        
    -   **Theme editor URL**: A URL to the theme editor in the SHOPLINE Admin, used for theme development and debugging.
        

* * *

## Step 5: Modify and test the theme{#ebICH}

Modify the theme effect and functionality to meet your expectations. Then test the updates.

The following example shows how to modify the background color of the theme and verify the effect.

1.  Open the theme project using your preferred code editor.
    
2.  Open the `layout/theme.html` file.
    
3.  Insert the following CSS code to change the background color:
    

```shell
<!DOCTYPE html>
<html>
  <head>
    ...
    <style>
      body {
        background: red;
      }
    </style>
  </head>
  ...
</html>
```

4.  Check the terminal to see whether the code has been successfully updated.
    
5.  Open the preview link, refresh the page, and you will see that the background color becomes red.
    

* * *

## Step 6: Publish the theme{#Ikq17}

To activate your theme in the SHOPLINE Admin, use one of the following two methods to publish your theme to the store:

-   Package your local theme code into a zip file using the [package](https://developer.shopline.com/docs/online-store-3-0-themes/development-tools/cli/theme-commands.md#lTKEQ) command. Then go to the SHOPLINE Admin, navigate to **Online Store** > **Design** > **Theme library** > **Upload theme** to upload it.
    

```shell
sl theme package
```

-   Upload your theme code directly to the SHOPLINE Admin using the [push](https://developer.shopline.com/docs/online-store-3-0-themes/development-tools/cli/theme-commands.md#wcsSb) command.
    

```shell
sl theme push
```