Shopify Theme 2.0 Input Settings Tutorials

In Shopify Theme 2.0, the input object is used to define customizable settings in the Theme Editor. Each input type has specific properties that allow merchants to configure their theme without modifying the code.

Shopify Theme 2.0 Input Types

Input Type Description Example Use Case Key Properties

Input Type	Description	Example Use Case	Key Properties
`checkbox`	Toggle switch (true/false)	Show/hide banner, enable feature	`default` (true/false)
`number`	Numeric input field	Items per row, max products	`default`, `placeholder`
`radio`	Radio button selection	Layout style, display options	`options`, `default`
`range`	Numeric slider	Padding, font size	`min`, `max`, `step`, `default`
`select`	Dropdown menu	Font style, layout type	`options`, `default`
`text`	Single-line text input	Store name, heading text	`default`, `label`, `info`, `placeholder`
`textarea`	Multi-line text input	Store description, long text fields	`default`, `label`, `placeholder`
Specialized input setting types
`url`	URL input field	Button link, social media link	`default`
`color`	Color picker	Background color, button color	`default` (hex value)
`color_background`	Allows merchants to select a background color	Section background color	`default` (hex code)
`color_scheme`	Lets merchants select a predefined color scheme	Theme color presets	`default`, `options`
`color_scheme_group`	Defines a group of colors used together in a section	Customizing multiple color elements
`article`	Allows merchants to select a specific blog article	Featured blog post section
`blog`	Allows merchants to select a blog from their store	Display latest blog posts
`collection`	Allows merchants to select a single collection	Featured collection section
`collection_list`	Allows merchants to select multiple collections	Displaying multiple collections	`limit`
`font_picker`	Allows users to select a font.	Choosing a custom font for headings/body text.	`default`
`html`	Provides a field for custom HTML	Custom embedded code, tracking scripts	`placeholder`
`image_picker`	Allows users to select an image.	Hero banner, product feature images.
`inline_richtext`	A simple rich text input allowing basic formatting	Short descriptions, subtitles	`default`
`link_list`	Allows merchants to select a navigation menu	Footer links, sidebar navigation
`liquid`	Allows merchants to add custom Liquid code	Custom dynamic content
`page`	Allows merchants to select a specific page	About Us, FAQ page selection
`product`	Allows merchants to select a single product	Featured product display
`product_list`	Allows merchants to select multiple products	Showcasing a product collection	`limit`
`richtext`	Allows formatted text input.	Blog excerpts, footer text.	`default`
`text_alignment`	Provides text alignment options (left, center, right)	Adjusting heading and text alignment	`default`, `options`
`video`	Allows merchants to upload or embed a video	Hero section video, product demos	`accept` (MP4, YouTube, Vimeo)
`video_url`	Accepts YouTube/Vimeo video URLs.	Embedding a promotional video.	`accept` (youtube, vimeo), `placeholder`
`header`	Non-interactive title for grouping settings	Theme settings sections	`content`
`paragraph`	Informational text block	Descriptive text in settings	`content`
`metaobject`	Allows merchants to select a single metaobject entry	Displaying structured data	`definition_id`
`metaobject_list`	Allows merchants to select multiple metaobject entries	Listing structured data sets	`definition_id`

checkbox

Toggle switch (true/false)

Show/hide banner, enable feature

default (true/false)

number

Numeric input field

Items per row, max products

default, placeholder

radio

Radio button selection

Layout style, display options

options, default

range

Numeric slider

Padding, font size

min, max, step, default

select

Dropdown menu

Font style, layout type

options, default

text

Single-line text input

Store name, heading text

default, label, info, placeholder

textarea

Multi-line text input

Store description, long text fields

default, label, placeholder

Specialized input setting types

url

URL input field

Button link, social media link

default

color

Color picker

Background color, button color

default (hex value)

color_background

Allows merchants to select a background color

Section background color

default (hex code)

color_scheme

Lets merchants select a predefined color scheme

Theme color presets

default, options

color_scheme_group

Defines a group of colors used together in a section

Customizing multiple color elements

article

Allows merchants to select a specific blog article

Featured blog post section

blog

Allows merchants to select a blog from their store

Display latest blog posts

collection

Allows merchants to select a single collection

Featured collection section

collection_list

Allows merchants to select multiple collections

Displaying multiple collections

limit

font_picker

Allows users to select a font.

Choosing a custom font for headings/body text.

default

html

Provides a field for custom HTML

Custom embedded code, tracking scripts

placeholder

image_picker

Allows users to select an image.

Hero banner, product feature images.

inline_richtext

A simple rich text input allowing basic formatting

Short descriptions, subtitles

default

link_list

Allows merchants to select a navigation menu

Footer links, sidebar navigation

liquid

Allows merchants to add custom Liquid code

Custom dynamic content

page

Allows merchants to select a specific page

About Us, FAQ page selection

product

Allows merchants to select a single product

Shopify Theme 2.0 Input Standard Attributes

Attribute Description Required

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

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.

info

An option for informational text about the setting.

Shopify Theme 2.0 Input Schema and Output

Name JSON Schema Output

Name	JSON Schema	Output
`checkbox`	`{ "type": "checkbox", "id": "show_announcement", "label": "Show announcement", "default": true }` If default is unspecified, then the value is `false` by default.
`number`	`{ "type": "number", "id": "products_per_page", "label": "Products per page", "default": 20 }`
`radio`	`{ "type": "radio", "id": "logo_aligment", "label": "Logo alignment", "options": [ { "value": "left", "label": "Left" }, { "value": "centered", "label": "Centered" } ], "default": "left" }`
`range`	`{ "type": "range", "id": "font_size", "min": 12, "max": 24, "step": 1, "unit": "px", "label": "Font size", "default": 16 }`
`select`	Segmented Select `{ "type": "select", "id": "vertical_alignment", "label": "Vertical alignment", "options": [ { "value": "top", "label": "Top" }, { "value": "middle", "label": "Middle" }, { "value": "bottom", "label": "Bottom" } ], "default": "middle" }` When Show Two to five options are provided. All options fit within their container and don’t overflow. Dropdown Select `{ "type": "select", "id": "sizes", "label": "Sizes", "options": [ { "value": "xs", "label": "X-small" }, { "value": "s", "label": "Small" }, { "value": "m", "label": "Medium" }, { "value": "l", "label": "Large" }, { "value": "xl", "label": "X-large" }, { "value": "xxl", "label": "XX-large" } ], "default": "m" }` When Show More than five options are provided. The options are too long and might overflow their container.	Segmented Select Dropdown Select
`text`	`{ "type": "text", "id": "footer_linklist_title", "label": "Heading", "default": "Quick links" }`
`textarea`	`{ "type": "textarea", "id": "home_welcome_message", "label": "Welcome message", "default": "Welcome to my shop!" }`
`article`	`{ "type": "article", "id": "article", "label": "Article" }`
`blog`	`{ "type": "blog", "id": "blog", "label": "Blog" }`
`collection`	`{ "type": "collection", "id": "collection", "label": "Collection" }`
`collection_list`	`{ "type": "collection_list", "id": "collection_list", "label": "Collections", "limit": 8 }`	Collection List Details
`color`	`{ "type": "color", "id": "body_text", "label": "Body text", "default": "#000000" }`
`color_background`	`{ "type": "color_background", "id": "background", "label": "Background", "default": "linear-gradient(#ffffff, #000000)" }`
`color_scheme`	`{ "type": "color_scheme", "id": "color_scheme", "default": "scheme_1", "label": "Color scheme" }`
`font_picker`	`{ "type": "font_picker", "id": "heading_font", "label": "Heading font", "default": "helvetica_n4" }`
`html`	`{ "type": "html", "id": "video_embed", "label": "Video embed" }`
`image_picker`	`{ "type": "image_picker", "id": "image_with_text_image", "label": "Image" }`
`inline_richtext`	`{ "type": "inline_richtext", "id": "inline", "default": "my <i>inline</i> <b>text</b>", "label": "Inline rich text" }`
`link_list`	`{ "type": "link_list", "id": "menu", "label": "Menu" }`
`liquid`	`{ "type": "liquid", "id": "battery_message", "label": "Battery message", "default": "{% if product.tags contains 'battery' %}This product can only be shipped by ground.{% else %}This product can be shipped by ground or air.{% endif %}" }`
`page`	`{ "type": "page", "id": "page", "label": "Page" }`
`product`	`{ "type": "product", "id": "product", "label": "Product" }`
`product_list`	`{ "type": "product_list", "id": "product_list", "label": "Products", "limit": 12 }`
`richtext`	`{ "type": "richtext", "id": "paragraph", "label": "Paragraph" }`
`text_alignment`	`{ "type": "text_alignment", "id": "alignment", "label": "Text alignment", "default": "center" }`
`url`	`{ "type": "url", "id": "button_link", "label": "Button link" }`
`video`	`{ "type": "video", "id": "video", "label": "A Shopify-hosted video" }`
`video_url`	`{ "type": "video_url", "id": "product_description_video", "label": "Product description video", "accept": [ "youtube", "vimeo" ] }`

checkbox

{
  "type": "checkbox",
  "id": "show_announcement",
  "label": "Show announcement",
  "default": true
}

If default is unspecified, then the value is false by default.

number

{
  "type": "number",
  "id": "products_per_page",
  "label": "Products per page",
  "default": 20
}

radio

{
  "type": "radio",
  "id": "logo_aligment",
  "label": "Logo alignment",
  "options": [
    {
      "value": "left",
      "label": "Left"
    },
    {
      "value": "centered",
      "label": "Centered"
    }
  ],
  "default": "left"
}

range

{
  "type": "range",
  "id": "font_size",
  "min": 12,
  "max": 24,
  "step": 1,
  "unit": "px",
  "label": "Font size",
  "default": 16
}

select

Segmented Select

{
  "type": "select",
  "id": "vertical_alignment",
  "label": "Vertical alignment",
  "options": [
    {
      "value": "top",
      "label": "Top"
    },
    {
      "value": "middle",
      "label": "Middle"
    },
    {
      "value": "bottom",
      "label": "Bottom"
    }
  ],
  "default": "middle"
}

When Show

Two to five options are provided.
All options fit within their container and don’t overflow.

Dropdown Select

{
  "type": "select",
  "id": "sizes",
  "label": "Sizes",
  "options": [
    {
      "value": "xs",
      "label": "X-small"
    },
    {
      "value": "s",
      "label": "Small"
    },
    {
      "value": "m",
      "label": "Medium"
    },
    {
      "value": "l",
      "label": "Large"
    },
    {
      "value": "xl",
      "label": "X-large"
    },
    {
      "value": "xxl",
      "label": "XX-large"
    }
  ],
  "default": "m"
}

When Show

More than five options are provided.
The options are too long and might overflow their container.

Segmented Select

Dropdown Select

text

{
  "type": "text",
  "id": "footer_linklist_title",
  "label": "Heading",
  "default": "Quick links"
}

textarea

{
  "type": "textarea",
  "id": "home_welcome_message",
  "label": "Welcome message",
  "default": "Welcome to my shop!"
}

article

{
  "type": "article",
  "id": "article",
  "label": "Article"
}

blog

{
  "type": "blog",
  "id": "blog",
  "label": "Blog"
}

collection

{
  "type": "collection",
  "id": "collection",
  "label": "Collection"
}

collection_list

{
  "type": "collection_list",
  "id": "collection_list",
  "label": "Collections",
  "limit": 8
}

Collection List Details

color

{
  "type": "color",
  "id": "body_text",
  "label": "Body text",
  "default": "#000000"
}

color_background

{
  "type": "color_background",
  "id": "background",
  "label": "Background",
  "default": "linear-gradient(#ffffff, #000000)"
}

color_scheme

{
    "type": "color_scheme",
    "id": "color_scheme",
    "default": "scheme_1",
    "label": "Color scheme"
}

font_picker

{
  "type": "font_picker",
  "id": "heading_font",
  "label": "Heading font",
  "default": "helvetica_n4"
}

html

{
  "type": "html",
  "id": "video_embed",
  "label": "Video embed"
}

image_picker

{
  "type": "image_picker",
  "id": "image_with_text_image",
  "label": "Image"
}

inline_richtext

{
  "type": "inline_richtext",
  "id": "inline",
  "default": "my <i>inline</i> <b>text</b>",
  "label": "Inline rich text"
}

link_list

{
  "type": "link_list",
  "id": "menu",
  "label": "Menu"
}

liquid

{
  "type": "liquid",
  "id": "battery_message",
  "label": "Battery message",
  "default": "{% if product.tags contains 'battery' %}This product can only be shipped by ground.{% else %}This product can be shipped by ground or air.{% endif %}"
}

page

{
  "type": "page",
  "id": "page",
  "label": "Page"
}

product

{
  "type": "product",
  "id": "product",
  "label": "Product"
}

product_list

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

richtext

{
  "type": "richtext",
  "id": "paragraph",
  "label": "Paragraph"
}

text_alignment

{
   "type": "text_alignment",
   "id": "alignment",
   "label": "Text alignment",
   "default": "center"
}

url

{
  "type": "url",
  "id": "button_link",
  "label": "Button link"
}

video

{
  "type": "video",
  "id": "video",
  "label": "A Shopify-hosted video"
}

video_url

{
  "type": "video_url",
  "id": "product_description_video",
  "label": "Product description video",
  "accept": [
    "youtube",
    "vimeo"
  ]
}

Color Scheme Group

A setting of type color_scheme_group outputs a color scheme which is composed of the following input setting types:

header
color
color_background

Color schemes can be added only in settings_schema.json.

Schema

{
  "type": "color_scheme_group",
  "id": "color_schemes",
  "definition": [
    {
      "type": "color",
      "id": "background",
      "label": "t:settings_schema.colors.settings.background.label",
      "default": "#FFFFFF"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:settings_schema.colors.settings.background_gradient.label",
      "info": "t:settings_schema.colors.settings.background_gradient.info"
    },
    {
      "type": "color",
      "id": "text",
      "label": "t:settings_schema.colors.settings.text.label",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "button",
      "label": "t:settings_schema.colors.settings.button_background.label",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "button_label",
      "label": "t:settings_schema.colors.settings.button_label.label",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "secondary_button_label",
      "label": "t:settings_schema.colors.settings.secondary_button_label.label",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "shadow",
      "label": "t:settings_schema.colors.settings.shadow.label",
      "default": "#121212"
    }
  ],
  "role": {
    "text": "text",
    "background": {
      "solid": "background",
      "gradient": "background_gradient"
    },
    "links": "secondary_button_label",
    "icons": "text",
    "primary_button": "button",
    "on_primary_button": "button_label",
    "primary_button_border": "button",
    "secondary_button": "background",
    "on_secondary_button": "secondary_button_label",
    "secondary_button_border": "secondary_button_label"
  }
}

Output

Role

The role field outputs a color scheme preview. The color scheme previews are visible to merchants anywhere in the editor where they might pick a color scheme.

Role Description Required Gradient

Role	Description	Required	Gradient
`role.background`	Renders the background color of the preview	Yes	Optional
`role.text`	Renders the text color of the preview	Yes	No
`role.primary_button` `role.secondary_button`	Render the 1st and 2nd pills in the preview	Yes	Optional
`role.primary_button_border` `role.secondary_button_border`	Render the 1st and 2nd pills' border in the preview	Yes	No
`role.on_primary_button` `role.on_secondary_button`	Aren’t used in the preview	Yes	No
`role.links` `role.icons`	Aren’t used in the preview	Yes	No

role.background

Renders the background color of the preview

Yes

Optional

role.text

Renders the text color of the preview

Yes

role.primary_button role.secondary_button

Render the 1st and 2nd pills in the preview

Yes

Optional

role.primary_button_border role.secondary_button_border

Render the 1st and 2nd pills' border in the preview

Yes

role.on_primary_button role.on_secondary_button

Aren’t used in the preview

Yes

role.links role.icons

Aren’t used in the preview

Yes

Shopify Theme 2.0 Input Settings Tutorials

Shopify Theme 2.0 Input Types

Shopify Theme 2.0 Input Standard Attributes

Shopify Theme 2.0 Input Schema and Output

Color Scheme Group

Role

Objects

Layout