[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.

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

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.

https://ec-penguin.com/blogs/shopify/schema-tag-perfect-guide-steps

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

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",
"default":
4}

schema type "number"

{
"type": "number",
"id": "number_id_desu",
"label": "Customer Maximum number",
"default":
6}

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",
"default"
:
"helvetica_n4"
}
]
}

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.

Then

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

https://shopify.dev/docs/themes/settings#input-setting-types