Input settings
Input settings can hold a value and are configurable by merchants.
Input settings are generally composed of standard attributes, and there are two categories
Standard attributes
The following are standard attributes across input settings. However, depending on the input type, there might be extra attributes or some might not apply:
Attribute | Description | Required |
---|---|---|
type | The setting type, which can be any of the basic or specialized input setting types. | Yes |
id | The setting ID, which is used to access the setting value. | Yes |
label | The setting label, which will show in the theme editor. | Yes |
default | The default value for the setting. | No |
info | An option for informational text about the setting. | No |
Basic input settings
The following are the basic input setting types:
checkbox
A setting of type checkbox
outputs a checkbox field. These fields can be used for toggling features on and off, such as whether to show an announcement bar.
For example, the following setting generates a checkbox
input labelled "Show announcement":
{
"type": "checkbox",
"id": "show_announcement",
"label": "Show announcement",
"default": true
}
When accessing the value of a checkbox type setting, data is returned as a Boolean.
Note
If
default
is unspecified, then the value isfalse
by default.
number
A setting of type number
outputs a single number field. In addition to the standard attributes of an input setting, number
type settings have the following attribute:
Attribute | Description | Required |
---|---|---|
placeholder | A placeholder value for the input | No |
You can use these fields to capture a varying numerical value, such as the number of products to show per page on a collection page.
For example, the following setting generates a number
input labelled "Products per page":
{
"type": "number",
"id": "products_per_page",
"label": "Products per page",
"default": 20
}
range
A setting of type range outputs a range slider field. In addition to the standard attributes of an input setting, range type settings have the following attributes:
Attribute | Description | Required |
---|---|---|
min | The minimum value of the input | Yes |
max | The maximum value of the input | Yes |
step | The increment size between steps of the slider | Yes |
unit | The unit for the input. For example, you can set px for a font-size slider. | No |
You can use these fields to capture a varying numerical value, such as font size.
For example, the following setting generates a range
input labelled with "Font size":
{
"type": "range",
"id": "font_size",
"min": 12,
"max": 24,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16
}
select
A setting of type select
outputs a drop-down selector field. In addition to the standard attributes of an input setting, select
type settings have the following attributes:
Attribute | Description | Required |
---|---|---|
options | Takes an array of value /label definitions for each option in the drop-down. | Yes |
group | An optional attribute you can add to each option to create option groups in the drop-down. | No |
You can use these fields to capture a multi-option selection, such as the vertical alignment of slideshow text.
For example, the following setting generates a select
input labelled with "Vertical alignment":
{
"type": "select",
"id": "vertical_alignment",
"label": "Vertical alignment",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "middle",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
],
"default": "middle"
}
text
A setting of type text
outputs a single-line text field. In addition to the standard attributes of an input setting, text
type settings have the following attribute:
Attribute | Description | Required |
---|---|---|
placeholder | A placeholder value for the input | No |
You can use these fields to capture short strings, such as titles.
For example, the following setting generates a text
input labelled with "Heading":
{
"type": "text",
"id": "footer_linklist_title",
"label": "Heading",
"default": "Quick links"
}
textarea
A setting of type textarea
outputs a multi-line text field. In addition to the standard attributes of an input setting, textarea
type settings have the following attribute:
Attribute | Description | Required |
---|---|---|
placeholder | A placeholder value for the input | No |
You can use these fields to capture larger blocks of text, such as messages.
For example, the following setting generates a textarea
input labelled "Welcome message":
{
"type": "textarea",
"id": "home_welcome_message",
"label": "Welcome message",
"default": "Welcome to my shop!"
}
Specialized input settings
The following are the specialized input setting types:
- article
- blog
- collection
- color
- font_picker
- html
- image_picker
- link_list
- page
- product
- richtext
- url
- video_url
article
A setting of type article
outputs an article picker field that's automatically populated with the available articles for the store. You can use these fields to capture an article selection, such as the article to feature on the homepage.
For example, the following setting generates a article
card:
{
"type": "article",
"id": "featured_article",
"label": "Featured article"
}
blog
A setting of type blog
outputs a blog picker field that's automatically populated with the available blogs for the store. You can use these fields to capture a blog selection, such as the blog to feature in the sidebar.
For example, the following setting generates a blog
card:
{
"type": "blog",
"id": "featured_blog",
"label": "Featured blog"
}
collection
A setting of type collection
outputs a collection picker field that's automatically populated with the available collections for the store. You can use these fields to capture a collection selection, such as a collection for featuring products on the homepage.
For example, the following setting generates a collection
card:
{
"type": "collection",
"id": "featured_collection",
"label": "Featured collection"
}
color
A setting of type color
outputs a color picker field. You can use these fields to capture a color selection for various theme elements, such as the body text color.
For example, the following setting generates a color
plate selector:
{
"type": "color",
"id": "body_text",
"label": "Body text",
"default": "#000000"
}
font_picker
A setting of type font_picker
outputs a font picker field.
You can use these fields to capture a font selection for various theme elements, such as the base heading font.
For example, the following setting generates a font_picker
picker input:
{
"type": "font_picker",
"id": "heading_font",
"label": "Heading font",
"default": "helvetica_n4"
}
html
A setting of type html
outputs a multi-line text field that accepts HTML markup. In addition to the standard attributes of an input setting, html
type settings have the following attribute:
You can use these fields to capture custom blocks of HTML content, such as a video embed.
For example, the following setting generates a html
input:
{
"type": "html",
"id": "video_embed",
"label": "Video embed"
}
image_picker
A setting of type image_picker
outputs an image picker field that's automatically populated with the available images from the Materials center
section of Shoplazza admin, and has the option to upload new images. You can use these fields to capture an image selection, such as logos, a favicons, and slideshow images.
For example, the following setting generates a image_picker
picker input:
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
}
link_list
A setting of type link_list
outputs a menu picker field that's automatically populated with the available menus for the store. You can use these fields to capture a menu selection, such as the menu to use for footer links.
For example, the following setting generates a link_list
input:
{
"type": "link_list",
"id": "footer_menu",
"label": "Footer menu"
}
page
A setting of type page
outputs a page picker field that's automatically populated with the available pages for the store. You can use these fields to capture a page selection, such as the page to feature content for in a size-chart display.
For example, the following setting generates a page
input:
{
"type": "page",
"id": "size_chart_content",
"label": "Size chart content"
}
product
A setting of type product
outputs a product picker field that's automatically populated with the available products for the store. You can use these fields to capture a product selection, such as the product to feature on the homepage.
For example, the following setting generates a product
input:
{
"type": "product",
"id": "featured_product",
"label": "Featured product"
}
richtext
A setting of type richtext
outputs a multi-line text field with the following basic formatting options:
- Bold
- Italic
- Underline
- Link
- Paragraph
You can use these fields to capture formatted text content, such as introductory brand content on the homepage.
For example, the following setting generates a richtext
input:
{
"type": "richtext",
"id": "paragrah",
"label": "Paragraph"
}
url
A setting of type url
outputs a URL entry field where you can manually enter external URLs and relative paths. It also has a picker that's automatically populated with the following available resources for the shop:
- Articles
- Blogs
- Collections
- Pages
- Products
You can use these fields to capture a URL selection, such as the URL to use for a slideshow button link.
For example, the following setting generates a url
input:
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
video_url
A setting of type video_url
outputs a URL entry field. In addition to the standard attributes of an input setting, video_url
type settings have the following attributes:
Attribute | Description | Required |
---|---|---|
accept | Takes an array of accepted video providers. Valid values are youtube , vimeo , or both. | Yes |
placeholder | A placeholder value for the input. | No |
These fields can be used to capture a video URL from YouTube and/or Vimeo, such as the URL for a static video to show in the product description.
For example, the following setting generates a video_url
video input:
{
"type": "video_url",
"id": "product_description_video",
"label": "Product description video",
"accept": [
"youtube",
"vimeo"
]
}
Updated over 2 years ago