Build a new theme

Use SHOPLINE CLI and the Bottle theme to create a new theme and upload it to SHOPLINE.

Before you begin

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

You have installed Git.
You have installed Node.js.
Obtain the URL of the store for which you create the theme. You can use the URL of a development store that you created in the Partner Portal, 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 template engine, independently developed by SHOPLINE. It froms the foundation for dynamically rendering the merchant's store pages.

Step 1: Install SHOPLINE CLI

Run the following command to install the SHOPLINE CLI.

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.

sl --version

Step 2: Log in to the store

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

sl login --store your-store.myshopline.com

Tip: --store represents the store handle name.

The terminal will automatically open the browser and redirect you to the login page.
Log in to the store and follow the prompts.
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

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

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

sl theme init my-theme

Tip: my-theme is the name of the local folder where you want to clone the theme.

Navigate to the theme directory you created.

cd my-theme

Step 4: Start the local preview

Run the following command to start a local development server.

sl theme serve

By default, the server performs hot loading for CSS and section file updates. If hot loading is insufficient, the store page automatically refreshes so you can preview updates in real time using store data.

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

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.

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

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

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

Step 6: Publish the theme

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 command. Then go to the SHOPLINE Admin, navigate to Online Store > Design > Theme library > Upload theme to upload it.