Schema Types Deep Dive | Green Bag Developer

Shopify provides a rich set of input types for section and theme settings. Choosing the right input type improves both the merchant experience and your code. This lesson covers every available type with examples and best practices.

🛠 Try the Schema Builder: Build schemas visually with our Schema Builder. It supports all the setting types covered in this lesson with real-time JSON preview and built-in validation.

Setting Structure

Every setting follows this structure:

{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "Welcome",
  "info": "This appears above the main content"
}

Common properties:

type: The input type (required)
id: Unique identifier for accessing the value (required)
label: Display label in editor (required)
default: Default value
info: Help text below the input
placeholder: Placeholder text (some types)

Basic Input Types

text

Single-line text input:

{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "Welcome to our store",
  "placeholder": "Enter heading text"
}

{{ section.settings.heading }}

textarea

Multi-line text input:

{
  "type": "textarea",
  "id": "description",
  "label": "Description",
  "default": "This is a longer description that spans multiple lines.",
  "placeholder": "Enter description"
}

{{ section.settings.description }}

richtext

Rich text editor with formatting options:

{
  "type": "richtext",
  "id": "content",
  "label": "Content",
  "default": "<p>Add your content here.</p>"
}

{{ section.settings.content }}

Output includes HTML tags (<p>, <strong>, <em>, <a>, lists).

inline_richtext

Simpler rich text without block elements:

{
  "type": "inline_richtext",
  "id": "text",
  "label": "Text",
  "default": "Shop our <strong>new arrivals</strong>"
}

Only allows inline formatting (bold, italic, links). No paragraphs or lists.

html

Raw HTML input (use sparingly):

{
  "type": "html",
  "id": "custom_html",
  "label": "Custom HTML",
  "info": "For advanced users only"
}

{{ section.settings.custom_html }}

liquid

Liquid code input:

{
  "type": "liquid",
  "id": "custom_liquid",
  "label": "Custom Liquid",
  "info": "Advanced: Enter Liquid code"
}

{{ section.settings.custom_liquid }}

Number Inputs

number

Numeric input:

{
  "type": "number",
  "id": "items_count",
  "label": "Number of items",
  "default": 4
}

{% for product in collection.products limit: section.settings.items_count %}

range

Slider input with min/max:

{
  "type": "range",
  "id": "opacity",
  "label": "Overlay opacity",
  "min": 0,
  "max": 100,
  "step": 5,
  "default": 50,
  "unit": "%"
}

style="opacity: {{ section.settings.opacity | divided_by: 100.0 }};"

Properties:

min: Minimum value
max: Maximum value
step: Increment amount
unit: Display unit (%, px, etc.)

Boolean Input

checkbox

True/false toggle:

{
  "type": "checkbox",
  "id": "show_vendor",
  "label": "Show vendor name",
  "default": false
}

{% if section.settings.show_vendor %}
  <p>{{ product.vendor }}</p>
{% endif %}

Selection Inputs

select

Dropdown menu:

{
  "type": "select",
  "id": "alignment",
  "label": "Text alignment",
  "options": [
    { "value": "left", "label": "Left" },
    { "value": "center", "label": "Center" },
    { "value": "right", "label": "Right" }
  ],
  "default": "center"
}

<div class="text-{{ section.settings.alignment }}">

radio

Radio button group (visible options):

{
  "type": "radio",
  "id": "layout",
  "label": "Layout",
  "options": [
    { "value": "grid", "label": "Grid" },
    { "value": "list", "label": "List" }
  ],
  "default": "grid"
}

Use radio when there are 2-4 options that benefit from being visible at once.

Color Inputs

color

Color picker:

{
  "type": "color",
  "id": "text_color",
  "label": "Text color",
  "default": "#000000"
}

style="color: {{ section.settings.text_color }};"

color_background

Background color/gradient picker:

{
  "type": "color_background",
  "id": "background",
  "label": "Background",
  "default": "linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%)"
}

style="background: {{ section.settings.background }};"

Supports solid colors and gradients.

color_scheme

Theme color scheme selector:

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

<div class="color-{{ section.settings.color_scheme }}">

Requires color schemes defined in settings_schema.json.

color_scheme_group

For theme settings only, defines color scheme options.

Typography

font_picker

Font selector from Shopify’s font library:

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

{% style %}
  {{ section.settings.heading_font | font_face: font_display: 'swap' }}

  .heading {
    font-family: {{ section.settings.heading_font.family }}, {{ section.settings.heading_font.fallback_families }};
    font-weight: {{ section.settings.heading_font.weight }};
    font-style: {{ section.settings.heading_font.style }};
  }
{% endstyle %}

Resource Pickers

image_picker

Image upload/selection:

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

{% if section.settings.image != blank %}
  {{ section.settings.image | image_url: width: 800 | image_tag }}
{% endif %}

video

Video from Shopify’s library:

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

{% if section.settings.video != blank %}
  {{ section.settings.video | video_tag: autoplay: true, loop: true, muted: true }}
{% endif %}

video_url

External video URL (YouTube/Vimeo):

{
  "type": "video_url",
  "id": "video_url",
  "label": "Video URL",
  "accept": ["youtube", "vimeo"],
  "placeholder": "https://www.youtube.com/watch?v=..."
}

{% if section.settings.video_url != blank %}
  {{ section.settings.video_url | external_video_tag }}
{% endif %}

product

Product picker:

{
  "type": "product",
  "id": "featured_product",
  "label": "Featured product"
}

{% assign product = section.settings.featured_product %}
{% if product != blank %}
  <h3>{{ product.title }}</h3>
  <p>{{ product.price | money }}</p>
{% endif %}

product_list

Multiple product picker:

{
  "type": "product_list",
  "id": "products",
  "label": "Products",
  "limit": 8
}

{% for product in section.settings.products %}
  {% render 'product-card', product: product %}
{% endfor %}

collection

Collection picker:

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

{% for product in section.settings.collection.products limit: 4 %}

collection_list

Multiple collection picker:

{
  "type": "collection_list",
  "id": "collections",
  "label": "Collections",
  "limit": 6
}

blog

Blog picker:

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

{% for article in section.settings.blog.articles limit: 3 %}

page

Page picker:

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

{{ section.settings.page.content }}

article

Article picker:

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

link_list

Menu/navigation picker:

{
  "type": "link_list",
  "id": "menu",
  "label": "Menu",
  "default": "main-menu"
}

{% for link in section.settings.menu.links %}
  <a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}

URL Input

url

URL input with link picker:

{
  "type": "url",
  "id": "link",
  "label": "Link",
  "default": "/collections/all"
}

<a href="{{ section.settings.link }}">Shop Now</a>

Merchants can type a URL or select from products, collections, pages, etc.

Try it live: Practice accessing section.settings values for products, collections, and other objects in our Liquid Playground—all setting types are pre-configured.

Organizational Types

These don’t store values but help organize the settings panel.

Section divider with title:

{
  "type": "header",
  "content": "Layout Options"
}

paragraph

Informational text:

{
  "type": "paragraph",
  "content": "These settings control the visual appearance of the section."
}

Practical Examples

{
  "settings": [
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Background image"
    },
    {
      "type": "video_url",
      "id": "video_url",
      "label": "Or video URL",
      "accept": ["youtube", "vimeo"]
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Welcome"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button text",
      "default": "Shop Now"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "height",
      "label": "Banner height",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "full", "label": "Full screen" }
      ],
      "default": "medium"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": "Overlay opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "default": 40,
      "unit": "%"
    }
  ]
}

Product Card Block

{
  "type": "product_card",
  "name": "Product",
  "settings": [
    {
      "type": "product",
      "id": "product",
      "label": "Product"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "label": "Show rating",
      "default": true
    },
    {
      "type": "text",
      "id": "custom_badge",
      "label": "Custom badge text",
      "info": "Leave empty for automatic badges"
    }
  ]
}

Quick Reference Table

Type	Use For	Returns
`text`	Short text	String
`textarea`	Long text	String
`richtext`	Formatted content	HTML string
`html`	Raw HTML	HTML string
`number`	Numeric values	Number
`range`	Bounded numbers	Number
`checkbox`	On/off toggle	Boolean
`select`	Single choice (dropdown)	String (value)
`radio`	Single choice (visible)	String (value)
`color`	Color selection	Hex string
`color_background`	Background/gradient	CSS string
`font_picker`	Font selection	Font object
`image_picker`	Image upload	Image object
`video`	Shopify video	Video object
`video_url`	External video	String (URL)
`product`	Product selection	Product object
`collection`	Collection selection	Collection object
`page`	Page selection	Page object
`blog`	Blog selection	Blog object
`article`	Article selection	Article object
`link_list`	Menu selection	Linklist object
`url`	URL/link	String (URL)
`header`	Visual separator	None
`paragraph`	Help text	None

Key Takeaways

Choose appropriate types based on the data you need
Use select for 5+ options, radio for 2-4 visible options
Always provide defaults for required settings
Use headers to organize related settings
Add info text to explain complex settings
Resource pickers return full objects, not just IDs
Check for blank before using resource picker values

What’s Next?

Now that you know all the setting types, the next lesson covers Presets and Sensible Defaults for configuring how sections appear when first added.