Overview

SHOPLINE provides a theme editor that enables merchants, even those without coding expertise, to customize their store styles using a graphical interface. This tool allows for easy adjustments, such as uploading or replacing carousel images, to align storefront aesthetics with various marketing campaigns.

schema

A schema is a protocol that defines the configuration for global controls, component controls, and block controls within themes, allowing merchants to design themes using these defined controls in the theme editor. You can add schemas in the following theme files:

File	Description
theme.schema.json	Configuration for global controls
Section files in the `sections` directory	Configuration for section controls
Block files in the `blocks` directory	Configuration for block controls

JSON configuration data

JSON configuration data refers to the data configured by merchants through the theme editor controls. The configuration data is stored in JSON format in the following two locations:

theme.config.json: Stores data for global control configurations.
templates/*.json: Stores data for section and block control configurations. The specific template file where the data is stored depends on which page the section is added to.

Access configuration values

Once the schema is defined, different types of configuration values can be accessed in HTML code using different Sline objects.

Configuration type	Object	Access method
Global control configuration		`settings.{specific configuration item ID}`
Section control configuration		`section.settings.{specific configuration item ID}`
Block control configuration		`block.settings.{specific configuration item ID}`

To see how to access different configuration values, refer to the following instructions.

Accessing global configuration values

Global configuration items can only be defined in the theme.schema.json file.

For example, consider the following schema in theme.schema.json:

{
  ...
  schemas: [
    {
      "name": "Theme Title",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "My Theme Title"
        }
      ]
    }
  ]
}

You can access the configuration items in any .html file using the settings object, for example:

<!-- layout/theme.html -->
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <div>{{ settings.title }}</div>
    ...
  </body>
</html>

Output:

<!-- layout/theme.html -->
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <div>My Theme Title</div>
    ...
  </body>
</html>

Access section configuration values

Section configuration items can only be defined in the section's .html file.

For example, consider the following schema defined in the schema tag of a section:

{{#schema}}
{
  "name": "Blog",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Blog title",
      "default": "My Blog Title"
    }
  ]
}
{{/schema}}

You can access the section configuration items in any section .html file using the section.settings object, for example:

<!-- sections/blog/blog.html -->
<div>
  {{ section.settings.title }}
</div>
{{#schema}}
{
  "name": "Blog",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Blog title",
      "default": "My Blog Title"
    }
  ]
}
{{/schema}}

Output:

<!-- sections/blog/blog.html -->
<div>
  My Blog Title
</div>
{{#schema}}
{
  "name": "Blog",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Blog title",
      "default": "My Blog Title"
    }
  ]
}
{{/schema}}

Caution: The section object can only be used in section files.

Access block configuration values

Block configuration items can only be defined in the block's .html file.

For example, consider the following schema defined in the schema tag of a block:

<!-- blocks/button.html -->
{{#schema}}
{
  "name": "Button",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Button",
      "default": "confirm"
    }
  ]
}
{{/schema}}

You can access the block configuration items in any block .html file using the block.settings object, for example:

<!-- blocks/button.html -->
<button>{{ block.settings.text }}</button>
{{#schema}}
{
  "name": "Button",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Button",
      "default": "confirm"
    }
  ]
}
{{/schema}}

Output:

<!-- blocks/button.html -->
<button>confirm</button>
{{#schema}}
{
  "name": "Button",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Button",
      "default": "confirm"
    }
  ]
}
{{/schema}}