theme.schema.json​

theme.schema.json is the file for theme information and global configuration definitions. It is placed in the root directory of the project, and used to define:

• Theme information: includes the name, version, author, supported links, and so on.

• Global configurations: include form elements such as colors and fonts, which merchants can edit in the theme editor.

Theme information definitions​

The basic information about the theme includes the theme name, version number, author, and so on. This information will be used in the official Theme shop, theme editor, SHOPLINE Admin, and so on, to help merchants better understand the theme.

Data structure​

The following example shows the Bottle theme information.

// theme.schema.json 
{
  "theme_name": "Bottle",  														// Theme name
  "theme_version": "1.0.0",  													// Theme version
  "theme_author": "SHOPLINE",  												// Theme author
  "theme_documentation_url": "https://themes.shopline.com/themes/Bottle/styles/Default",                                               // Theme introduction URL
  "theme_support_url": "https://help.shopline.com/",  // SHOPLINE Help Center URL
  "theme_type_version": "OS_3.0",  										// Rendering engine version
  "schemas": [...]
}

Field description​

Global configuration definitions​

The global configuration defines common settings across the theme, which include, but are not limited to, the following scenarios:

• Font: Defines the fonts applied to all pages.

• Input box: Defines the style of input boxes on all pages.

• Add-to-cart method: Defines the interaction method for all add-to-cart actions.

All templates, sections, and blocks can access global configuration data via the settings object.

Data structure​

The following example shows a part of the global configuration definitions for the Bottle theme, which are stored in the schemas field.

// theme.schema.json
{
  ...
  "schemas": [  								// Configuration collection
    {
      "name": "Color",  				// Configuration category name
      "settings": [  						// Setting list for the configuration
        {
          "type": "color",  		// Control type for the configuration
          "label": "Sale",  		// Label for the configuration
          "id": "color_sale",  	// Unique identifier for the configuration
          "default": "#3D3819"  // Default value for the configuration
        }
      ]
    },
    {
      "name": "Font",
      "settings": [
        {
          "type": "font",
          "label": "Font",
          "id": "title_font",
          "default": "Brygada 1918:700"
        }
      ]
    }
  ]
}

Field description​

Use case examples​

The following images show an example of how the global configurations of the Bottle theme are displayed in the theme editor.