Input settings​

A value can be saved and configured by the merchant. The input configuration is divided into two categories based on standard attributes:

• Basic Input Settings
• Specialized Input Settings

Standard Attributes​

Below are the standard attributes for input configurations. However, depending on the input type, there may be additional attributes or some attributes may not be applicable:

Basic Input Settings​

Below are the basic input control types:

• switch
• checkbox
• radio
• range
• select
• text
• textarea
• richtext

switch​

Set type to switch to display a switch control. This control can be used to toggle features on and off, such as displaying the language selector.
Example code:

{
  "type": "switch",
  "id": "enable_auto_switching",
  "label": {
    "en": "Enable the auto-switching"
  },
  "info": {
  },
  "default": true
}

The return value of the switch control is of boolean type.
Effect in the theme editor:

checkbox​

Set type to checkbox to display a single checkbox control. This control can be used to toggle features on and off, such as displaying the search entrance.
Example code:

{
  "type": "checkbox",
  "id": "outline_style",
  "label": {
    "en": "Use outline button style"
  },
  "default": true
}

Effect in the theme editor:

The return value of the checkbox control is of boolean type.

radio​

Set type to radio to display a radio button control. In addition to the standard attributes, the radio control requires the options attribute, which accepts an array defined by value and label.
This control can be used for single selections among multiple options, such as the alignment of a title logo.
Example code:

{
  "type": "radio",
  "id": "mask_color",
  "label": {
    "en": "Text mask layer color"
  },
  "default": "dark",
  "options": [
    {
      "value": "dark",
      "label": {
        "en": "Dark"
      }
    },
    {
      "value": "light",
      "label": {
        "en": "Light"
      }
    }
  ]
}

Effect in the theme editor:

The return value of the radio control is of string type.

range​

Set type to range to display a slider control. It displays the current value and the selectable range. In addition to the standard attributes, the range control has the following configurations:

This control can be used for multiple numeric inputs, such as the logo width on a PC.
Example code:

{
  "type": "range",
  "id": "mask_opacity",
  "label": {
    "en": "Layer mask opacity"
  },
  "default": 32,
  "min": 0,
  "max": 100,
  "step": 1,
  "unit": "%"
}

Effect in the theme editor:

The return value of the range control is of number type.

select​

Set type to select to display a dropdown menu control. A dropdown menu is displayed for the user to select an option. In addition to the standard attributes, the select control requires the options attribute, which accepts an array defined by value and label.
This control can be used for single selections among multiple options, such as image size.
Example code:

{
  "type": "select",
  "id": "mask_color",
  "label": {
    "en": "Text mask layer color"
  },
  "default": "dark",
  "options": [
    {
      "value": "dark",
      "label": {
        "en": "Dark"
      }
    },
    {
      "value": "light",
      "label": {
        "en": "Light"
      }
    }
  ]
}

Effect in the theme editor:

The return value of the select control is of string type.

text​

Set type to text to display a single-line text control. In addition to the standard attributes, the text control has the following configuration:

This control can be used for single-line text input, such as a component title.
Example code:

{
  "type": "text",
  "id": "button_text",
  "default": "Shop this",
  "label": {
    "en": "Button text"
  }
}

Effect in the theme editor:

The return value of the text control is of string type.

textarea​

Set type to textarea to display a multi-line text control. In addition to the standard attributes, the textarea control has the following configurations:

This control can be used for multi-line text input, such as a main title display.
Example code:

{
  "type": "textarea",
  "id": "title",
  "label": {
    "en": "Main title"
  },
  "default": "Two Line\nTitle Slide",
  "limit": 500
}

Effect in the theme editor:

The return value of the text control is of string type.

Specialized Input Settings​

Below are the specialized input control types:

• richtext
• text_Align
• vertical_align
• horizontal_align
• url
• color
• image_picker
• font
• blog
• collection_picker
• product_picker
• page_picker
• menu_picker
• padding
• video
• video_url
• html
• product_list

richtext​

Set type to richtext to display a rich text control, outputting text in the following basic formats:

• Bold text
• Italic text
• Hyperlinks
• Paragraphs

This control can be used to display body text with multiple content elements, such as image size.
Example code:

{
  "type": "richtext",
  "id": "content",
  "label": {
    "en": "Main text"
  },
  "default": "A sentence or two introducing your brand, what you sell, and what makes your brand compelling to customers."
}

Effect in the theme editor:

The return value of the richtext control is of string type.

text_align​

Set type to text_align to display a text alignment control on the x-axis. This control can be used to select the text alignment, such as the alignment of a title.
Example code:

{
  "type": "text_align",
  "id": "text_align",
  "label": {
    "en": "Text alignment",
  }
}

Effect in the theme editor:

The return value of the text_align control is of string type with the following enumerations:

• left
• center
• right

vertical_align​

Set type to vertical_align to display a vertical alignment control. This control can be used to control the alignment of components along the vertical cross-axis, such as the alignment of elements in each row.
Example code:

{
  "type": "vertical_align",
  "id": "vertical_align",
  "label": {
    "en": "Alignment",
  }
}

Effect in the theme editor:

The return value of the vertical_align control is of string type with the following enumerations:

• top
• middle
• bottom

horizontal_align​

Set type to horizontal_align to display a horizontal alignment control. This control is used to control the alignment of components along the horizontal main axis, such as the alignment of elements in each row.
Example code:

{
  "type": "horizontal_align",
  "id": "horizontal_align",
  "label": {
    "en": "Alignment",
  }
}

Effect in the theme editor:

The return value of the horizontal_align control is of string type with the following enumerations:

• left
• center
• right

url​

Set type to url to display a URL input control. You can manually enter external URLs and relative paths in the input box. There is also a selector to automatically fill in the following available resources from the current store:

• Home page
• Collection page
• Product page
• Custom page
• Policy page
• Blog collection page
• Blog article page
• Customer center page
• Cart page

Example code:

{
  "type": "url",
  "id": "image_link",
  "label": {
    "en": "URL"
  }
}

Effect in the theme editor:

The return value of the URL type setting is returned as one of the following:

1. A string containing the selected URL.
2. A string type that has been JSON.stringify() of an object.

3. If no input is made, it returns an empty string.

For the above URL return value in point 2, the following attributes can be obtained:

• value, with the following scenarios:
  • If a collection page is selected, the collection ID is saved.
  • If a product page is selected, the product ID is saved.
  • If a custom page is selected, the page ID is saved.
  • If a policy page is selected, the page path is saved.
  • If a blog collection page is selected, the blog collection ID is saved.
  • If a blog page is selected, the page ID and the blog collection ID to which the page belongs are saved.
• label, the page title
• pageType, with the following enumerations:
  • 10 - Product page
  • 12 - Collection page
  • 3 - Custom page
  • 0 - Preset page (policy page)
  • 4 - Blog page
  • 11 - Blog collection page
  • -1 - Manually entered link
• linkType, with the following enumerations:
  • select - Page selected through the selector
  • input - Page entered by the user

The URL control does not support the default field.

color​

Set type to color to display a color selection control. You can manually enter the color value in the input box. There is also a color palette selector for quick color selection by dragging the shader.
This control can be used to control the UI color of elements, such as the global background color.

Example code:

{
  "id": "color_page_background",
  "type": "color",
  "label": {
    "en": "Background",
  },
  "default": "#FFFFFF"
}

Effect in the theme editor:

The return value of the color control is returned as one of the following: 2. A string containing the selected hexadecimal color code, such as #FFFFFF. 3. If no selection is made, it returns empty.

When configuring the default value, the string must include #. Non-compliance will result in errors.

image_picker​

Set type to image_picker to display an image selection control. This control allows direct selection of available images from the SHOPLINE admin backend image library and allows uploading new images. This control can be used for image selection, such as choosing carousel images.
Example code:

{
  "type": "image_picker",
  "id": "image",
  "label": {
    "en": "Image on PC"
  }
}

Effect in the theme editor:

The return value of the image_picker control is of object type with the following attributes:

• alt, alt text of the image
• height, height of the image
• paddingBottom, aspect ratio of the image
• scale, scale of the image
• url, URL of the image
• width, width of the image

The image_picker control does not support the default field.

font​

Set type to font to display a font selection control. This control allows direct selection of fonts from the Google Fonts Library.
This control can be used for font selection of various theme elements, such as global title fonts.
Example code:

{
  "id": "type_title_font",
  "type": "font",
  "label": {
    "en": "Typography",
  },
  "default": "Arimo:700"
}

Effect in the theme editor:

The return value of the font control is returned as one of the following: 2. A string containing the selected font, such as Arimo:700, only supported in OS2.0 theme versions.

3. If no selection is made, it returns empty.

blog​

Set type to blog to display a blog collection selection control. This control allows selecting available blogs from the store for display, such as a blog to be shown in the sidebar.

Example code:

{
  "id": "blog_collection",
  "type": "blog",
  "label": {
    "en": "Blogs"
  }
}

Effect in the theme editor:

The return value of the blog type setting is returned as one of the following: 2. If no selection is made or the selection no longer exists, it returns empty.

When accessing the value of a control set to blogs_picker, the data is returned as one of the following:

• The ID string of the selected blog collection. For compatibility with the old value retrieval method, refer to the following code:

{{assign "blog_id" section.settings.blog_collection}} 
{{assign "blogData" (get blog_id all_blogs) }}
{{#for blogData.blogs.list as |blog|}}
  {{ blog.title }}
{{/for}}

collection_picker​

Set type to collection_picker to display a collection selection control. This control allows direct selection of all available collections in the store.
This control can be used to select collections for display, such as showing the top 20 products of a collection on the homepage.
Example code:

{
  "id": "product_categories",
  "type": "collection_picker",
  "label": {
    "en": "Collection list"
  },
  "default": ""
}

Effect in the theme editor:

The return value of the collection_picker control is of string type, which is the collection ID.

product_picker​

Set type to product_picker to display a product selection control. This control allows direct selection of all available products in the store.
This control can be used to select products for display, such as showing a single product detail on the homepage.
Example code:

{
  "type": "product_picker",
  "id": "product_id",
  "label": {
    "en": "Product"
  }
}

Effect in the theme editor:

The return value of the product_picker control is of string type, which is the product ID.

page_picker​

Set type to page_picker to display a page selection control. This control allows direct selection of all available custom pages in the store. This control can be used to select custom pages, such as a custom tab page in the product detail page.
Example code:

{
  "id": "custom_page",
  "type": "page_picker",
  "label": {
    "en": "Custom page",
  }
}

Effect in the theme editor:

The return value of the page_picker control is of string type, which is the page ID.

menu_picker​

Set type to menu_picker to display a menu selection control. This control allows direct selection of all available navigation menus in the store. This control can be used to select navigation menus for display, such as the navigation menu links in the header.
Example code:

{
  "type": "menu_picker",
  "id": "main_menu_link_list",
  "label": {
    "en": "Navigation menu"
  },
  "default": "main-menu"
}

Effect in the theme editor:

The return value of the menu_picker control is of string type, which is the navigation ID.

The head and footer navigation menus are created by default when the store is set up and cannot be deleted. Regardless of how these menus are renamed, the keys point to header and footer. Therefore, the default value can directly use head.

padding​

Set type to padding to display a layout control. This control can be used to store values for the top, bottom, left, and right margins on both PC and mobile. It is mainly used to input the inner or outer margins of a container. Example code:

{
  "type": "padding",
  "id": "padding_info",
  "label": {
    "en": "Padding"
  },
  "default": {
    "pc":{
      "left":10,
      "right":10,
      "top":10,
      "bottom":10
    },
    "mobile":{
      "left":10,
      "right":10,
      "top":10,
      "bottom":10
    }
  }
}

Effect in the theme editor:

video​

Set type to video to output a video picker. This picker automatically fills in the available videos from the SHOPLINE admin backend's file library. Merchants can also upload new videos.

For example, the following setting generates the following output:

{
  "type": "video",
  "id": "video",
  "label": "Local video"
}

Effect in the theme editor:

The video type setting also accepts the file_reference meta-field as a dynamic source.

The return value of the video type setting is returned as one of the following:

• video object.
• null if no selection has been made or the selection does not exist.

video_url​

Set type to video_url to output a URL input field. In addition to the standard attributes of input settings, the video_url type setting also has the following attributes:

These fields can be used to capture video URLs from YouTube and/or Vimeo, such as static video URLs to be displayed in product descriptions.

For example, the following setting generates the following output:

{
  "type": "video_url",
  "id": "external_video",
  "format": "video",
  "label": "External video link",
  "placeholder": "https://www.youtube.com/watch?v=V7BEzkRBp_g",
  "info": "Enter the embedded link from YouTube or Vimeo"
}

Effect in the theme editor:

The return value of the video_url type setting is returned as one of the following:

• external_video object.
• null if no input is made.

For example, suppose you use this video through the above setting. In that case, SHOPLINE will generate the following output:

ID: {{ settings.external_video.external_id }}
Host: {{ settings.external_video.host }}

html​

Set type to html to output HTML strings. In addition to the standard attributes of input settings, the HTML type setting also has the following attribute:

For example, the following setting generates the following output:

{
  "type": "html",
  "id": "html",
  "label": "html"
}

Effect in the theme editor:

The return value of the HTML type setting is returned as one of the following:

• HTML string.
• null if no input is made.

For example, suppose you render HTML using this control as configured above. In that case, SHOPLINE will generate the following output by entering triple braces for rendering:

{{settings.html}}

product_list​

Set type to product_list to output an array of product objects. In addition to the standard attributes of input settings, the product_list type setting also has the following attribute:

For example, the following setting generates the following output:

{
  "type": "product_list",
  "id": "product_list",
  "label": "Products",
  "limit": 12
}

Effect in the theme editor:

The return value of the product_list type setting is returned as one of the following:

• An array of product objects.
• null if no input is made.

For example, suppose you use this control through the above setting. In that case, SHOPLINE will generate the following output:

{{#paginate section.settings.product_list by=2}}
  {{#for section.settings.product_list as |product|}}
    {{product}}
    <div>{{product.title}}</div>
  {{/for}}
{{/paginate}}

Using Links in Text​

You can add hyperlinks to the info attribute in each configuration.
Example code:

{
  "type": "group_header",
  "label": {
    "en": "Subcollection"
  },
  "info": {
    "en": "The collection menu configured in the navigation menu will be displayed here. [Know more](https://shoplineapphelp.zendesk.com/hc/articles/4404860397977)"
  }
}

Effect in the theme editor: