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

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

Here are the list mostly uses:

1. Text:
   • "type": "text": Represents a single line of text input.
2. Textarea:
   • "type": "textarea": Represents a multi-line text input.
3. HTML:
   • "type": "html": Represents a WYSIWYG editor for HTML content.
4. Number:
   • "type": "number": Represents a numeric input field.
5. Checkbox:
   • "type": "checkbox": Represents a checkbox input.
6. Select:
   • "type": "select": Represents a dropdown select input with predefined options.
7. Color:
   • "type": "color": Represents a color picker input.
8. Image:
   • "type": "image": Represents an image uploader field.
9. Video:
   • "type": "video": Represents a video uploader field.
10. URL:
    • "type": "url": Represents a URL input field.
11. Date:
    • "type": "date": Represents a date picker input.
12. Range:
    • "type": "range": Represents a slider input for selecting a range of values.
13. Boolean:
    • "type": "boolean": Represents a toggle switch for a true/false value.

These are some of the field types that you can use within the {% schema %} block in Shopify themes. Each field type has its own specific properties and configurations that you can define to customize the behavior and appearance of the field.

Please note that the available field types may vary depending on your theme or any installed apps that introduce additional custom field types.

Here’s an example of using all the different field types within a {% schema %} block in a Shopify theme:

For example:

{% 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 %}

In this example, each field type is used with its corresponding configuration options. The settings define various fields like text, textarea, HTML, number, checkbox, select, color, image, video, URL, date, range, and boolean. These fields demonstrate different input types and their respective properties.

Please note that the above example showcases the field types and their basic configurations. You can further customize these fields by adding more properties or modifying the default values to suit your specific requirements.

Field Groups

Here are some examples of using field groups within a {% schema %} block in a Shopify theme:

Example 1: Fields within settings:

{% 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 %}

In this example, the fields “Textarea Field” and “Number Field” are grouped together within a field group labeled “Field Group”. This allows you to organize related fields and group them visually in the settings area.

Example 2: Nested Field 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 %}

In this example, we have an outer group labeled “Outer Group” and an inner group labeled “Inner Group”. The inner group is nested within the outer group, allowing for a hierarchical structure. You can further nest groups to create multiple levels of organization as needed.

Field groups provide a way to logically group related fields together and create a structured and organized settings area within your Shopify theme. You can add any number of fields to a group and nest groups within other groups to create a hierarchical structure.

Display or return the values of the fields

To display or return data in your Shopify theme, you can use Liquid templating language to access and output the desired information. Here are a few examples:

Outputting a variable value:

{{ variable_name }}

Replace variable_name with the actual name of the variable, you want to display.

Accessing properties of an object:

{{ object_name.property_name }}

Replace object_name with the name of the object and property_name with the specific property you want to access.

Looping through a list:

{% for item in list_name %} {{ item }} {% endfor %}

Replace list_name with the name of the list or array, and item with the variable to represent each item in the loop.

Conditional statements:

{% if condition %} <!-- Code to execute if the condition is true --> {% else %} <!-- Code to execute if the condition is false --> {% endif %}

Replace condition with the specific condition, you want to evaluate.

These are just a few examples of how you can display or return data within your Shopify theme using Liquid templating. Depending on the specific context and requirements, there may be additional Liquid tags and filters available to manipulate and format the data.

Some additional fields

To add multiple link lists in a Shopify theme, you can include multiple instances of the "link_list" block type within your theme’s configuration. Each "link_list" block can have its own unique settings and links.

Here’s an example of how you can add multiple link lists in your Shopify theme:

{
  "type": "link_list",
  "settings": [
    {
      "type": "menu",
      "label": "Main Menu",
      "links": [
        {
          "type": "link",
          "label": "Home",
          "url": "/"
        },
        {
          "type": "link",
          "label": "Products",
          "url": "/products"
        },
        {
          "type": "link",
          "label": "Contact",
          "url": "/contact"
        }
      ]
    }
  ]
},
{
  "type": "link_list",
  "settings": [
    {
      "type": "menu",
      "label": "Footer Menu",
      "links": [
        {
          "type": "link",
          "label": "About Us",
          "url": "/about"
        },
        {
          "type": "link",
          "label": "FAQ",
          "url": "/faq"
        },
        {
          "type": "link",
          "label": "Terms of Service",
          "url": "/terms"
        }
      ]
    }
  ]
}

In the above example, we’ve added two instances of the "link_list" block type. The first instance represents the “Main Menu” with its associated links, and the second instance represents the “Footer Menu” with its own set of links.

You can add additional "link_list" blocks by repeating the structure for each link list you want to create. Customize the "label", "links", and other settings as per your requirements.

Once you have defined the multiple "link_list" blocks, you can then reference them within your theme’s templates using Liquid templating to display the menus in the desired locations.

Remember to ensure that your theme’s templates and styles are set up to accommodate and display the multiple link lists as intended.

Cheers!

Thank you for reading my article on the Shopify field list for the schema. Understanding Shopify’s field lists is crucial for customizing themes and organizing data effectively. If you have any questions or want to learn more about web development, feel free to leave a comment or follow us on Twitter. Happy coding!