Editor controls​

Editor controls enable merchants to visually edit online store themes within the theme editor.

You can define the settings attributes for each module control in the theme schema configuration.

Basic controls​

Standard control attributes​

The following table lists the standard control attributes. Some controls may have specialized attributes. For specific specialized attributes, see the following control descriptions.

text​

This type of control outputs a single-line text input field, used to enter single-line text, such as a section's title.
When accessing the configuration value of this control, the data is returned as a string.

Specialized attributes​

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "my section title",
      "placeholder": "please enter title"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

textarea​

This type of control outputs a multiple-line text input field, used to enter multiple-line text, such as a section's content.
When accessing the configuration value of this control, the data is returned as a string.

Specialized attributes​

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "textarea",
      "id": "content",
      "label": "Content",
      "default": "my section content",
      "placeholder": "please enter content",
      "limit": 500
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

richtext​

This type of control outputs a rich text input field, used to display diverse text content such as blog posts. It supports basic text formatting, including.

• Bold
• Italics
• Hyperlinks
• Paragraphs

When accessing the configuration value of this control, the data is returned as a string.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "richtext",
      "id": "content",
"label": "Content",
      "default": "content"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

range​

This type of control outputs a slider, used to adjust multiple numeric values, such as the section width.

When accessing the configuration value of this control, the data is returned as a string.

Specialized attributes​

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "range",
      "id": "width",
      "label": "Width",
      "default": 100,
      "min": 100,
      "max": 1000,
      "step": 10,
      "unit": "px"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

select​

This type of control outputs a dropdown menu, used in scenarios with multiple options, such as the icon selection.

When accessing the configuration value of this control, the data is returned as a string.

Specialized attributes​

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "select",
      "id": "icon",
      "label": "Icon",
      "default": "none",
      "options": [
        {
          "label": "none",
          "value": "none"
        },
        {
          "label": "pay",
          "value": "pay"
        },
        {
          "label": "package",
          "value": "package"
        },
        {
          "label": "email",
          "value": "email"
        },
        {
          "label": "position",
          "value": "position"
        },
        {
          "label": "customer",
          "value": "customer"
        },
        {
          "label": "chat",
          "value": "chat"
        },
        {
          "label": "gift",
          "value": "gift"
        },
        {
          "label": "phone",
          "value": "phone"
        },
        {
          "label": "faq",
          "value": "faq"
        },
        {
          "label": "logistics",
          "value": "logistics"
        },
        {
          "label": "discount",
          "value": "discount"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

switch​

This type of control outputs a switch, suitable for toggling functional states, such as controlling the visibility of a country selector.

When accessing the configuration value of this control, the data is returned as a boolean.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "switch",
      "id": "show_country_selector",
      "label": "Show country selector",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

text_align​

This control provides an interface element for selecting the horizontal alignment of an element, used for text alignment, such as aligning a title horizontally.

When accessing the configuration value of this control, the data is returned as a string. Possible returned values are as follows. You can also configure the default attribute using the following values.

• left
• center
• right

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "text_align",
      "id": "text_align",
      "label": "Text align",
      "default": "left"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

vertical_align​

This control provides an interface element for selecting the vertical alignment, used to configure the alignment of elements along the vertical cross-axis, such as aligning section blocks.

When accessing the configuration value of this control, the data is returned as a string. Possible returned values are as follows. You can also configure the default attribute using the following values.

• top
• middle
• bottom

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "vertical_align",
      "id": "vertical_align",
      "label": "Vertical align",
      "default": "top"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

horizontal_align​

This control provides an interface element for selecting the horizontal alignment, used to align elements along the horizontal main axis, such as aligning section blocks.

When accessing the configuration value of this control, the data is returned as a string. Possible returned values are as follows. You can also configure the default attribute using the following values.

• left
• center
• right

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "horizontal_align",
      "id": "horizontal_align",
      "label": "Horizontal align",
      "default": "left"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

url​

This control provides a URL combo box. Merchants can input an external URL or a relative path, or select the target page in the page selector. The following shows supported pages.

• Home page
• Collection overview page
• Product detail page
• Custom page
• Policy page
• Blog overview page
• Blog post page
• User account page
• Cart page

When accessing the configuration value of this control, the data is returned in one of the following forms:

• A URL string entered by the merchant
• A SHOPLINE protocol string that begins with shopline://
• An empty string if no input is provided

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "url",
      "id": "url",
      "label": "Url"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

color​

This type of control outputs a color picker, used to manage different element colors, such as a page background color. Merchants can input a color value into the text box or select the desired color in the color picker panel.

When accessing the configuration value of this control, the data is returned in one of the following forms:

• color object
• An empty string if no input is provided

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#ffffff"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

color_background​

This type of control outputs a gradient color picker, used to manage gradient background colors of elements, such as a page background color. Merchants can select from preset gradient colors or customize the gradient color as needed.

When accessing the configuration value of this control, the data is returned as a linear gradient or radial gradient in CSS code:

• linear-gradient()
• radial-gradient()

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "color_background",
      "id": "color_background",
      "label": "Background color",
      "default": ""
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

color_scheme​

This type of control outputs a selector containing all available theme color schemes and displays a preview of the selected scheme.

The theme color schemes in the selector are defined through the color_scheme_group setting. You can apply these color schemes to global theme configurations, sections, and blocks.

When accessing the configuration value of this control, the data is returned in the selected color_scheme object from the color_scheme_group.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme-1"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

color_scheme_group​

This type of control outputs a color scheme, allowing merchants to modify the theme's color scheme.

The colors defined within the color scheme can only be added in the settings.schema.json file.

Color controls are defined in definition, and supported control typevalues are limited to the following:

• color
• color_background

The role field outputs a preview of the color scheme. Each field represents a position on the following image, with the value of each field being the control's id, as defined in the definition.

Rules for defining the role field:

Use case example​

Example code:

{
  "type": "color_scheme_group",
  "id": "color_schemes",
  "definition": [
    {
      "type": "color_background",
      "id": "color_background",
      "label": "t:settings_schema.color.settings.color_schemes.definition_0.label",
      "default": "#F3F2E0"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": "t:settings_schema.color.settings.color_schemes.definition_1.label",
      "default": "#3D3819"
    },
    {
      "type": "color",
      "id": "color_light_text",
      "label": "t:settings_schema.color.settings.color_schemes.definition_2.label",
      "default": "#726C4A"
    },
    {
      "type": "color",
      "id": "color_entry_line",
      "label": "t:settings_schema.color.settings.color_schemes.definition_3.label",
      "default": "#DDDDDD"
    },
    {
      "type": "color",
      "id": "color_button_background",
      "label": "t:settings_schema.color.settings.color_schemes.definition_4.label",
      "default": "#3D3819"
    },
    {
      "type": "color",
      "id": "color_button_text",
      "label": "t:settings_schema.color.settings.color_schemes.definition_5.label",
      "default": "#F3F2E0"
    },
    {
      "type": "color",
      "id": "color_button_secondary_background",
      "label": "t:settings_schema.color.settings.color_schemes.definition_6.label",
      "default": "#F3F2E0"
    },
    {
      "type": "color",
      "id": "color_button_secondary_text",
      "label": "t:settings_schema.color.settings.color_schemes.definition_7.label",
      "default": "#3D3819"
    },
    {
      "type": "color",
      "id": "color_button_secondary_border",
      "label": "t:settings_schema.color.settings.color_schemes.definition_8.label",
      "default": "#726C4A"
    },
    {
      "type": "color",
      "id": "color_button_text_link",
      "label": "t:settings_schema.color.settings.color_schemes.definition_9.label",
      "default": "#3D3819"
    }
  ],
  "role": {
    "text": "color_text",
    "background": {
      "solid": "color_background"
    },
    "primary_button": "color_button_background",
    "primary_button_border": "color_entry_line",
    "secondary_button": "color_button_secondary_background",
    "secondary_button_border": "color_button_secondary_border"
  }
}

The corresponding output effect in the theme editor is as follows:

image​

This type of control outputs an image picker. Merchants can directly select images from the image library in the SHOPLINE Admin or upload new images.

When accessing the configuration value of this control, the data is returned in an image object.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "image",
      "id": "image",
      "label": "Image"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

font​

This type of control outputs a font picker.

Merchants can use this control to enhance the variety of font styles on their pages.

When accessing the configuration value of this control, the data is returned in a font object. It can be used in conjunction with font-related filters such as font_modify and font_face.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "font",
      "id": "title_font",
      "label": "Title font",
      "default": "Brygada 1918:400"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

article​

This type of control outputs a blog post picker.

When accessing the configuration value of this control, the data is returned in an article object.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "article",
      "id": "article",
      "label": "Article"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

blog​

This type of control outputs a blog tribe picker.

When accessing the configuration value of this control, the data is returned in a blog object.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "blog"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

collection​

This type of control outputs a product collection picker. Merchants can select from available product collections in the store. For example, display the top ten products of the selected product collection on the home page.

When accessing the configuration value of this control, the data is returned in a collection object.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

product​

This type of control outputs a product picker, used to select the product for display. For example, display a product's details on the home page.

When accessing the configuration value of this control, the data is returned in a product object.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "product",
      "id": "product",
      "label": "Product"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

product_list​

This type of control outputs a product list picker, used to select certain products as a list for display. For example, display some recommended products on the home page.

When accessing the configuration value of this control, the data is returned in a list of product objects.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "product_list",
      "id": "product_list",
      "label": "Product list"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

page​

This type of control outputs a custom page selector, used to select a custom page for display. For example, display the information of a custom page on the home page.

When accessing the configuration value of this control, the data is returned in a page object.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "page",
      "id": "page",
      "label": "Page"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

menu​

This type of control outputs a navigation menu selector, used to select and display certain navigation menus from those available in the store. For example, display the navigation menus in the page header of the home page.

When accessing the configuration value of this control, the data is returned in a menu object.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "menu",
      "id": "menu",
      "label": "Menu"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

video​

This type of control outputs a video selector, used to select certain videos from the file library of the SHOPLINE Admin or upload videos. For example, display the product video on the home page.

When accessing the configuration value of this control, the data is returned in a video object.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "video",
      "id": "video",
      "label": "Video"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

external_video​

This type of control outputs a URL input field.
When accessing the configuration value of this control, the data is returned in an external_video object.

Specialized attributes​

This control can be used to retrieve information from YouTube or Vimeo videos and is typically used in conjunction with the external_video_tag tag and external_video_url filter.

{{#external_video_tag section.settings.external_video | external_video_url() /}}

Use case example: section title​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "external_video",
      "id": "external_video",
      "label": "External video"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

padding​

This type of control outputs a padding.

This control is used to store the top, bottom, left, and right padding values of container elements for both desktop and mobile platforms, serving the purpose of defining the internal spacing of the containers.

The default value structure of this control is a data model comprising two objects: one tailored for the desktop view and the other designed for the mobile view. Each object is equipped with specific numerical settings that represent the attributes for the four directions: top, bottom, left, and right.

When accessing the configuration value of this control, the data is returned in the data structure format of the default value.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "padding",
      "id": "padding",
      "label": "Padding",
      "default": {
        "pc":{
          "left":10,
          "right":10,
          "top":10,
          "bottom":10
        },
        "mobile":{
          "left":10,
          "right":10,
          "top":10,
          "bottom":10
        }
      }
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

sline​

This type of control outputs a code input box that accepts Sline template language. It allows merchants to input custom content using Sline syntax, such as injecting additional information into specific sections on the home page.

When accessing the configuration value of this control, the data is returned as a string.

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "sline",
      "id": "sline",
      "label": "Sline"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

html​

This type of control outputs a multi-line text input box that accepts HTML. It enables merchants to enter custom content using HTML syntax, such as composing HTML within specific sections on the home page.
When accessing the configuration value of this control, the data is returned as a string.

Specialized attributes​

Use case example​

Example code:

{
  "name": "My Section",
  "settings": [
    {
      "type": "html",
      "id": "html",
      "label": "HTML"
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

payment_icon​

This type of control outputs a list of payment icons. It can be used to select and display the payment methods supported by the store.
When accessing the configuration value of this control, it usually needs to be used in conjunction with the payment_icon_svg tag.

<div class="footer__payment-icons">
  {{#for pay_channel in block.settings.payment_icons.pay_channel_list}}
    {{#payment_type_svg pay_channel.type /}}
  {{/for}}
</div>

default attributes​

The default attribute value of this control is structured in JSON format, intended to display a preset list of icons in the theme editor.

Use case example​

{
  "name": "My Section",
  "settings": [
    {
      "type": "payment_icon",
      "id": "payment_icon",
      "label": "Payment icon",
      "default": {
        "show": true,
        "pay_channel_list": [
          {
            "type": "visa",
            "show": true
          },
          {
            "type": "master-card",
            "show": true
          },
          {
            "type": "master-card2",
            "show": true
          },
          {
            "type": "visa-electron",
            "show": true
          }
        ]
      }
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

favicon​

This type of control outputs a website icon upload control. It can be used to select and display the website's icon, typically configured in theme.schema.json.

Use case example​

{
  ...
  "schemas": [
    {
      "name": "website icon",
      "settings": [
        {
          "type": "favicon",
          "id": "favicon_image",
          "label": "website icon",
        }
      ]
    }
  ]
}

The corresponding output effect in the theme editor is as follows:

Set the website icon in layout/theme.html:

<!DOCTYPE html>
<html>
  <head>
    {{#if settings.favicon_image}}
      <link rel="icon" type="image/png" href="{{settings.favicon_image}}" />
    {{/if}}
  </head>
  <body>
    ...
  </body>
</html>

The output is as follows:

Display control​

Display controls are exclusively for presenting information and are generally used to organize and group foundational controls for display purposes.

group_header​

This type of control adds a heading element and groups it with subsequent configuration settings.

Configuration attributes for this control are as follows:

Use case example​

Group the following configurations together:

{
  "name": "My Section",
  "settings": [
    {
      "type": "group_header",
      "label": "Desktop"
    },
    {
      "type": "range",
      "label": "desktop columns",
      "id": "desktop_columns",
      "default": 2,
      "min": 1,
      "max": 8,
      "step": 1
    },
    {
      "type": "group_header",
      "label": "Mobile"
    },
    {
      "type": "range",
      "label": "mobile columns",
      "id": "mobile_columns",
      "default": 2,
      "min": 1,
      "max": 8,
      "step": 1
    },
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}

The corresponding output effect in the theme editor is as follows: