Designing Your Store with the Theme Editor

Once you've chosen your preferred store theme, you can access the theme editor to personalize your store using SHOPLINE's built-in tools. This guide walks you through accessing the editor, its core features, and advanced settings to help you quickly create an attractive online store.

Accessing the Theme Editor

After selecting your store's theme, follow these steps to access the theme editor and start customizing:

1. From your SHOPLINE admin panel, go to Online Store > Design.

   

2. Go to the My theme tab, locate the Current theme section, and click Design.

   

3. Begin customizing your theme within the theme editor.

   

Introduction to Theme Editor Features

When you click the Design button on your current theme, you enter the SHOPLINE theme editor. Here is an overview of the key tools available:

Page Selector and Preview Actions

Use the page selector and preview tools to quickly switch layouts and see how your changes will look before going live.

• Page Selector: Navigate between different pages (e.g., Homepage, Product Page) to customize individual layouts.

  

• Preview Button: Click Preview located in the top-right corner to choose between:

  

  • Preview in editor: View changes within the current editor window.
  • View online store: Open your live storefront in a new window to see the published version.

Component Sidebar (Left Sidebar)

Manage your site's visual structure by adding, rearranging, and customizing page elements using the component sidebar.

• Add Component: Click Add component to insert and configure new page modules for further customization.

  

• Drag-and-Drop: Easily move sections and blocks to rearrange your page structure.

  

Theme Settings

Maintain brand consistency by configuring global styles for your entire store. You can customize branding (logo and favicon), typography, colors, and layout elements such as buttons, cards, and media containers to ensure a cohesive identity.

Device Preview Options

Ensure your store looks professional on every screen size with multiple preview methods:

• Icon Switcher: Click the Desktop or Mobile icons next to the Page selector to quickly toggle between views.

  

• Preview Device Selection: At the bottom of the editor, click Preview device to select from various popular smartphone and tablet models.

  

• Mobile QR Code: Hover over the QR code icon and scan it with your smartphone to preview the theme directly on your own device.

  

Undo and Redo for Quick Editing

While customizing your store, you can easily undo or redo recent changes to your layout or settings. This allows you to experiment with different designs confidently and quickly restore previous edits or reapply changes as needed, without affecting your saved work.

Customizing Your Store’s Default Text

Each theme comes with built-in default text, but you can customize it using the Edit default text feature. It allows you to personalize system wording throughout your store to better align with your brand voice. Below are two common use cases to help you get started.

Example Use Case 1: Customizing Copyright Text

You can change the standard system copyright notice to include your brand name or a specific message. For example, changing "© 2026 Your Brand Name" to "Copyright © 2026 Your Brand Name. All rights reserved."

How to set up:

1. In the theme editor, click the three-dot icon [...] and select Edit default text.

2. Use the search bar to find the specific message (e.g., Copyright).

   

3. Enter your custom text in the field and click Update.

   

Example Use Case 2: Multilingual Optimization

If your store supports multiple languages, you can switch between language tabs to ensure every default label is translated naturally and correctly for different markets.

How to set up:

1. In the theme editor, click the three-dot icon [...] and select Edit default text.

2. At the top of the editing interface, click Toggle to select the language tab you wish to optimize. Click Complete to save the change.

   

3. Search for the phrases you want to adjust (e.g., error 404 message), enter the localized text, and click Update.

   

Customizing and Downloading Theme Code

For users with technical expertise, SHOPLINE provides deeper control over the theme structure. You can access these advanced options by clicking the three-dot icon [...].

Editing Code

Use this feature to edit the theme’s source files (HTML, CSS, JSON) for advanced customization: 

1. From your SHOPLINE admin panel, go to Online Store > Themes.
2. Locate your current theme, click the three-dot icon […] on the theme card, and select Edit code.

3. In the code editor, select a file from the left sidebar (for example, under Layout, Templates, Sections, Snippets, Assets, Config, or Locales) to start editing.

   

Downloading Theme Code

Use this feature to download a ZIP file of your theme source code for local backup:

1. From your SHOPLINE admin panel, go to Online Store > Themes.
2. Locate your current theme, click the three-dot icon […] on the theme card, and select Download code.
3. In the pop-up window, confirm the download request by clicking Send an email. The download link will then be sent to the email address associated with your admin account.