[{"value":"Schema","id":"n0lzg","hLevel":2,"level":1},{"value":"JSON configuration data","id":"pBles","hLevel":2,"level":1},{"value":"Access configuration values","id":"nHakX","hLevel":2,"level":1,"children":[{"value":"Access global configuration values","id":"UZoSP","hLevel":3,"level":2},{"value":"Access section configuration values","id":"SZcSx","hLevel":3,"level":2},{"value":"Access block configuration values","id":"MTeis","hLevel":3,"level":2}]}]

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 specification 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	`settings.{specific configuration item ID}`
Section control configuration	section.settings	`section.settings.{specific configuration item ID}`
Block control configuration	block.settings	`block.settings.{specific configuration item ID}`

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

Access 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}}