---
title: "Overview"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/online-store-3-0-themes/theme-and-editor-interaction/overview'
  md: 'https://developer.shopline.com/docs/online-store-3-0-themes/theme-and-editor-interaction/overview.md'
---
# 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{#n0lzg}

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:

<table>
  <colgroup>
    <col/>
    <col/>
  </colgroup>
  <tbody>
    <tr>
      <th>
        <p><strong>File</strong></p>
      </th>
      <th>
        <p>Description</p>
      </th>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        theme.schema.json
      </td>
      <td colSpan="1" rowSpan="1">
        Configuration for global controls
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        Section files in the `sections` directory
      </td>
      <td colSpan="1" rowSpan="1">
        Configuration for section controls
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        Block files in the `blocks` directory
      </td>
      <td colSpan="1" rowSpan="1">
        Configuration for block controls
      </td>
    </tr>
  </tbody>
</table>

* * *

## JSON configuration data{#pBles}

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{#nHakX}

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

<table>
  <colgroup>
    <col/>
    <col/>
    <col/>
  </colgroup>
  <tbody>
    <tr>
      <th>
        <p><strong>Configuration type</strong></p>
      </th>
      <th>
        <p><strong>Object</strong></p>
      </th>
      <th>
        <p><strong>Access method</strong></p>
      </th>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        Global control configuration
      </td>
      <td colSpan="1" rowSpan="1">
      settings 
      </td>
      <td colSpan="1" rowSpan="1">
        `settings.{specific configuration item ID}`
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        Section control configuration
      </td>
      <td colSpan="1" rowSpan="1">
        section.settings
      </td>
      <td colSpan="1" rowSpan="1">
        `section.settings.{specific configuration item ID}`
      </td>
    </tr>
    <tr>
      <td colSpan="1" rowSpan="1">
        Block control configuration
      </td>
      <td colSpan="1" rowSpan="1">
        block.settings
      </td>
      <td colSpan="1" rowSpan="1">
        `block.settings.{specific configuration item ID}`
      </td>
    </tr>
  </tbody>
</table>

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

### Access global configuration values{#UZoSP}

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

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

```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](https://developer.shopline.com/docs/sline/object/settings.md) object, for example:

```html
<!-- layout/theme.html -->

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

```

Output:

```html
<!-- layout/theme.html -->

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <div>My Theme Title</div>
    ...
  </body>
</html>
```

### Access section configuration values{#SZcSx}

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

For example, consider the following schema defined in the [schema](https://developer.shopline.com/docs/sline/tag/schema.md) tag of a section:

```json
{{#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](https://developer.shopline.com/docs/sline/object/section.md) object, for example:

```json
<!-- 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:

```json
<!-- 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](https://developer.shopline.com/docs/sline/object/section.md) object can only be used in section files.

### Access block configuration values{#MTeis}

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

For example, consider the following schema defined in the [schema](https://developer.shopline.com/docs/sline/tag/schema.md) tag of a block:

```json
<!-- 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](https://developer.shopline.com/docs/sline/object/block.md) object, for example:

```json
<!-- blocks/button.html -->

<button>{{ block.settings.text }}</button>

{{#schema}}
{
  "name": "Button",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Button",
      "default": "confirm"
    }
  ]
}
{{/schema}}
```

Output:

```json
<!-- blocks/button.html -->

<button>confirm</button>

{{#schema}}
{
  "name": "Button",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Button",
      "default": "confirm"
    }
  ]
}
{{/schema}}
```

> **CAUTION**
>
> The [block](https://developer.shopline.com/docs/sline/object/block.md) object can only be used in block files.