Commonly used field types within the `{% schema %}` block in Shopify themes

The {% schema %} block is the backbone of Shopify theme customization. It defines the settings, blocks, and dynamic content that make Shopify themes flexible and user-friendly. Whether you’re building a new section, block, or template, understanding the available field types is essential.

Why the `{% schema %}` Block Matters

Every Shopify section, block, and snippet can include a {% schema %} block. Inside this JSON structure, you define the settings users can configure from the theme editor. Each field type has its own properties, validation rules, and use cases.

Commonly Used Field Types

Here are the field types you’ll use most often when building Shopify themes:

Field Type	Description
Text	Single-line text input (`"type": "text"`)
Textarea	Multi-line text input (`"type": "textarea"`)
HTML	WYSIWYG editor for HTML content (`"type": "html"`)
Number	Numeric input field (`"type": "number"`)
Checkbox	Boolean checkbox (`"type": "checkbox"`)
Select	Dropdown with predefined options (`"type": "select"`)
Color	Color picker (`"type": "color"`)
Image	Image uploader (`"type": "image"`)
Video	Video uploader (`"type": "video"`)
URL	URL input with validation (`"type": "url"`)
Date	Date picker (`"type": "date"`)
Range	Slider for numeric ranges (`"type": "range"`)
Boolean	Toggle switch (true/false) (`"type": "boolean"`)
Font Picker	Select from available fonts (`"type": "font_picker"`)

Code Example: Using All Field Types

Here’s a complete example showing how to use each field type inside a {% schema %} block:

{% schema %}
{
  "name": "Example Settings",
  "settings": [
    {
      "type": "text",
      "label": "Text Field",
      "id": "text_field",
      "default": "Default Text"
    },
    {
      "type": "textarea",
      "label": "Textarea Field",
      "id": "textarea_field",
      "default": "Default Textarea"
    },
    {
      "type": "html",
      "label": "HTML Field",
      "id": "html_field",
      "default": "<strong>Default HTML</strong>"
    },
    {
      "type": "number",
      "label": "Number Field",
      "id": "number_field",
      "default": 10
    },
    {
      "type": "checkbox",
      "label": "Checkbox Field",
      "id": "checkbox_field",
      "default": true
    },
    {
      "type": "select",
      "label": "Select Field",
      "id": "select_field",
      "options": [
        { "label": "Option 1", "value": "option1" },
        { "label": "Option 2", "value": "option2" },
        { "label": "Option 3", "value": "option3" }
      ],
      "default": "option1"
    },
    {
      "type": "color",
      "label": "Color Field",
      "id": "color_field",
      "default": "#ff0000"
    },
    {
      "type": "image",
      "label": "Image Field",
      "id": "image_field"
    },
    {
      "type": "video",
      "label": "Video Field",
      "id": "video_field"
    },
    {
      "type": "url",
      "label": "URL Field",
      "id": "url_field",
      "default": "https://example.com"
    },
    {
      "type": "date",
      "label": "Date Field",
      "id": "date_field",
      "default": "2022-01-01"
    },
    {
      "type": "range",
      "label": "Range Field",
      "id": "range_field",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 50
    },
    {
      "type": "boolean",
      "label": "Boolean Field",
      "id": "boolean_field",
      "default": true
    }
  ]
}
{% endschema %}

Each field type accepts specific attributes that control its behavior. The most common ones are:

label – The display name in the theme editor.
id – A unique identifier used to access the value in Liquid.
default – The default value when the section is first added.
info – Helper text shown below the field.

Field Groups

For more complex settings, you can group related fields together. Field groups appear as collapsible sections in the theme editor, keeping your settings organized.

Simple Field Group Example

{% schema %}
{
  "name": "Example Settings",
  "settings": [
    {
      "type": "text",
      "label": "Text Field 1",
      "id": "text_field_1"
    },
    {
      "type": "text",
      "label": "Text Field 2",
      "id": "text_field_2"
    },
    {
      "type": "group",
      "label": "Field Group",
      "id": "field_group",
      "settings": [
        {
          "type": "textarea",
          "label": "Textarea Field",
          "id": "textarea_field"
        },
        {
          "type": "number",
          "label": "Number Field",
          "id": "number_field"
        }
      ]
    }
  ]
}
{% endschema %}

Nested Field Groups

You can even nest groups inside other groups:

{% schema %}
{
  "name": "Example Settings",
  "settings": [
    {
      "type": "text",
      "label": "Text Field",
      "id": "text_field"
    },
    {
      "type": "group",
      "label": "Outer Group",
      "id": "outer_group",
      "settings": [
        {
          "type": "text",
          "label": "Nested Text Field 1",
          "id": "nested_text_field_1"
        },
        {
          "type": "group",
          "label": "Inner Group",
          "id": "inner_group",
          "settings": [
            {
              "type": "text",
              "label": "Nested Text Field 2",
              "id": "nested_text_field_2"
            },
            {
              "type": "text",
              "label": "Nested Text Field 3",
              "id": "nested_text_field_3"
            }
          ]
        }
      ]
    }
  ]
}
{% endschema %}

Field groups are especially useful when a section has many settings. By grouping related options together, you make the theme editor cleaner and easier to navigate.

Displaying Field Values with Liquid

After defining your schema, you’ll want to display the values in your theme. Use Liquid templating to output the data.

Outputting a simple value:

{{ section.settings.text_field }}

Accessing nested properties:

{{ section.settings.button_text }}

Looping through blocks:

{% for block in section.blocks %}
  {{ block.settings.image }}
{% endfor %}

Conditional display:

{% if section.settings.show_title %}
  <h2>{{ section.settings.title }}</h2>
{% endif %}

Additional Field Types

Beyond the basics, Shopify supports a few more specialized field types worth mentioning.

Link List

The link_list field type lets you add navigation menus:

{
  "type": "link_list",
  "id": "menu",
  "label": "Select a menu",
  "options": {
    "main-menu": "Main Menu",
    "footer-menu": "Footer Menu"
  }
}

Page List

Similar to link lists but used for selecting pages:

{
  "type": "page",
  "label": "Select a page",
  "id": "featured_page"
}

Product and Collection Lists

For product-based sections:

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

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

Article

For blog-related sections:

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

Tips for Working with Schema Field Types

Use descriptive IDs – Keep them lowercase with underscores (e.g., section_heading, button_link).
Add default values – This prevents empty states and speeds up theme setup.
Group related settings – Use field groups to keep the theme editor organized.
Test in the theme editor – Always preview changes in the Shopify theme editor to ensure fields behave as expected.
Keep accessibility in mind – Labels and helper text help merchants use your theme correctly.

Conclusion

Understanding Shopify’s schema field types is essential for building professional, customizable themes. From simple text inputs to nested field groups, each field type gives merchants the control they need to personalize their store without touching code.

If you’re just getting started with Shopify theme development, take the time to experiment with each field type in a test theme. The more comfortable you are with schema, the more powerful your themes will become.

Happy coding!