[Shopify] Schemaタグのブロックtype一覧 まとめ

[Shopify] Schemaタグのブロックtype一覧 まとめ

In this article, we will discuss the list of Types of blocks that can be set with the Schema tag, which is essential for editing Shopify customization.

I have often used schema tags in my development work, and I thought it would be inconvenient to have a list of the types that can be used in schema tags.

What is schema Type?

When the schema tag itself is described in the code, text and images can be set on the left side of the customization screen as shown below.

Shopify schema タグ Type カスタマイズ

Incidentally, the code of the schema tag is as follows.

{% schema %}
"name": "Text Box",
"settings": [
"id": "text-box",
"type": "text",
"label": "Heading",
"default": "Title" },


"id": "text",
"type": "richtext",
"label": "Add custom text below",

default":"<p>Add your text here</p>"

}{% endschema %}

This is the "type" part that I will introduce in this article.

If you still do not understand the schema tag properly, please refer to the following article.


Text, text areas, links, and images are often used, but there are various other types that are useful to know, such as drop-downs, radio buttons, and color selections, which we will introduce.

List of schema tag "types

List of TYPE TYPE Description
text One line of text
textarea Multiple lines of text
radio Radio button
select Drop-down list
checkbox Checkbox
range Range slider
number Number counter
color Color Selection
font_picker Font selection
collection Collection selection
product Product Selection
blog Select Blog
page Select Page
link_list Menu Selection
url URL selection
video_url Video URL selection
richtext Decoratable text
html HTML Elements
article Article Selection
image_picker Image Selection
header Header Heading
paragraph Explanatory paragraph

The above is a list of schema tags available in Shopify. Some types are used infrequently, but may be useful in a pinch. It is not necessary to remember how to use each type, but it is helpful to know that each type exists. You may be able to recall that

Specific Usage of Each Type

Next, we will describe how each type is used and give specific examples.

Even if you know the list of types, how should you actually use them? Please refer to the following for more information.

schema type "text"

{ "
type": "text",

id": "text_id_desu",


default": "default text",


label": "header text"

schema type "textarea"

"type": "textarea",
"id": "textarea_id_desu",
"default": "Default text.",

label": "Element description text"

schema type "radio"

"type": "radio",
"id": "radio_id_desu",
"options": [ {
"value": "right", "label": "right-aligned"},
{ "value": "center", "label": "centered"}
"label": "logo position"

schema type "select"

"type": "select",

id": "select_id_desu"
"options": [ { "
value": "select1", "label": "option1"},
{ "value": "select2", "label": "option2"}, {
"value": "select3", "label": "option3 "}
"label": "drop-down choice"

schema type "checkbox"

"type": "checkbox",
"id": "checkbox_id_desu",
"default": true,
"label": "checkbox"

schema type "range".

"type": "range",
"id": "range_id_desu",
"min": 1,
"max": 5,
"step": 1,
"unit": "sec",
"label": "fade-in time",

schema type "number"

"type": "number",
"id": "number_id_desu",
"label": "Customer Maximum number",

schema type "color"

"type": "color",
"id": "color_id_desu",
"label": "Background color ",
"default": "#efefef"

schema type "font_picker"

"name": "Typography",
"settings": [
"type": "font_picker",
"label": "Font selection ",
"id": "font_id_desu",

schema type "collection"

"type": "collection",
"id": "collection_d_desu",
"label": "featured collection"

schema type "product"

"type": "product",
"id": "product_id_desu",
"label": "featured Products"

schema type "blog"

"type": "blog",
"id": "blog_id_desu",
"label": "blog selection"

schema type "page"

"type": "page",
"id": "page_id_desu",
"label": "page selection"

schema type "link_list"

"type": "link_list",
"id": "nav_id_desu",
"label": "menu Select"

schema type "url"

"id": "url_id_desu",
"type": "url",
"label": "URL selection"

schema type "video_url"

"id": "video_id_desu",
"type": "video_url",
"label": "video URL",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=drvH4XbZoPs", "
info": "text",
"placeholder": "url"

schema type "richtext"

"type": "richtext",
"id": "richtext_id_desu",
"label":" richtext", "
default": "<p>The default character is</p>"

schema type "html"

"type": "html",
"id": "html_id_desu",
"label": "Custom HTML ",
"default":"<div><p>Default HTML element</p></div>"

schema type "article"

"type": "article",
"id": "article_id_desu",
"label": "article Select"

schema type "image_picker"

"name": "logo",
"settings": [
"type": "image_picker",
"id": "image_id_desu",
"label": "Image selection "

List of Types of schema tags in Shopify Conclusion

That's all for the list of schema tag types in Shopify!

Once the schema tags are mastered, image replacement, URL replacement, text replacement, etc. can be handled on the client side, without the need for the developer to handle them.


Developer = No more hassle with replacements

Client = Can replace as many times as they like without hesitation.

This is highly recommended, as it allows us to build a win-win relationship.

Thank you for reading to the end. Have a great day!

Official Shopify Reference Links


Contact form