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

• Basic input settings
• Specialized input settings

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:

Basic input settings

The following are the basic input setting types:

• checkbox
• number
• range
• select
• text
• textarea

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 is false 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:

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:

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:

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:

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:

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:

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"
  ]
}