Build a custom theme

This guide will walk you through how to customize a store theme for a merchant. This process involves personalized theme design and development based on the merchant's requirements, which can range from minor tweaks to complete redesigns.

Prerequisites

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

You have installed Git.
You have installed Node.js.
Learn about the Sline template engine, independently developed by SHOPLINE. It froms the foundation for dynamically rendering the merchant's store pages.

Step 1: Request store access

You can request access to a merchant's store through the following methods:

The merchant adds your account as a staff account.
Request store access through the Partner Portal .

Regardless of the method, make sure your account has permission to operate the Online Store.

Step 2: 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 3: 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 4: Download the merchant theme

You can download a merchant theme via these methods:

Through SHOPLINE CLI:

Navigate to an empty directory.
Run the following command and select the target theme to download:

shopline theme pull

Follow the prompts to download the chosen theme to the specified directory.

From the SHOPLINE Admin:

Log in to the SHOPLINE Admin using the authorized account.
Go to ** Online Store** > ** Design** .
Find the target theme, click ** Options** > ** Download code** .
Follow the prompts to download the code to your email.
Extract the files locally after retrieving them from your email.

Step 5: Start the local preview

Run the following command in the theme's root directory 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 6: Customize the theme

Assume one of the merchant’s requirements is to set the page background color to red. In the following example, we will change the page background color to fulfill this customization.

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 7: Share effects with the merchant

Once modifications are complete, share the online preview link displayed in the terminal with the merchant to view and confirm your changes in real-time.

Step 8: 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.

sl theme package

Note: Uploading a zip file in the SHOPLINE Admin will add a new theme.

Upload your theme code directly to the SHOPLINE Admin using the push command.

sl theme push

** Caution:**

The changed theme must undergo testing and merchant approval before launching in the store backend.
Using the push command to upload the theme will overwrite the specified theme.

Was this article helpful to you?

SHOPLINE

Legal

Build a custom theme​