[Shopify] Schema tag description and simple liquid usage [Getting an overview, beginners]

This time I'll summarize what a schema tag is in Shopify and how to use it easily.

The most attractive thing about Shopify is that the management screen is easy to use. The charm of Schema tags is that you can edit texts and replace images from the management screen.

I will introduce at once from the outline explanation of what is a schema to the simple usage of liquid using schema.

What is a schema tag?？

First of all, let's explain what a Schema tag is.

Use the Schema tag to get images and wording from the Shopify customization screenAnd so onYou will be able to editす！

In the above GIF, you can change the text from the customize screen. This is the biggest feature of scheme.

It's insanely convenient. Normally, you have to replace the image or link and ask the development company to replace it, but since all can be handled on the client side, it will be a great time reduction efficiency for both parties.

What's more, the client can edit it without having to mess with the code.

By the wayFor developersWhat does the code look like?、、、

{% schema %}
{
	"name": "Penguin Schema",
	"settings": [
		{
			"type": "image_picker（pick from types）",
			"id": "image（ID you like to use）",
			"label": "Background Image（displayed in customize page）"
		}
	]
}
{% endschema %}

Like this{% schema %}By the way, the above code is a tag that allows you to select an image from the customization screen.I just wanted to tell you something like this, so it's okay to just take a quick look.

I think that it is already written by default in Shopify, so if you want more various Schema tags, you can find it by searching the above tag with CommandShiftF for whole search VScode.

What you can do with Schema tags

Did you get a general idea of what the schema tag looks like?？

That's right, it's an excellent thing that you can replace and edit text and images directly from the customize screen of Shopify without changing the code.

Let's summarize what you can actually do with the Schema tag.！

It can be said that there is still more that can be done depending on the ability of the engineer.

However, even if you look at the above, it is a very attractive function and it is a big advantage to use Shopify.。

Files that can use Schema

Some people may think that such a convenient Schema tag should be applied to the entire site and edited entirely on the client side, or set by yourself so that you do not have to touch the code.

But actuallyはSchema tags are generally in sectionsFileOnly used in。（There are exceptions such as in the config folder）

What is a section。。

It chooses to edit the action code from the theme list on the Shopify admin screen

There is a folder called section in it。

Basically only the files in this section folder use the schema tagん。

On the contrary, most of the files in the above section may not have the schema tag set, and if you have a Shopify store and have time, you may find that this is a schema.

Easy to use with Liquid

And finally, a simple way to use Liquid。

Even if you set the schema tag, it will not be reflected on the page without permission. You need to specify where in the page it will be reflected.

By the way, from here it is for people who can understand HTML / CSS a little.

If you change the Schema tag from earlier to text and explain a little、、

{% schema %}
{
	"name": "Penguin Schema",
	"settings": [
		{
			"type": "text",
			"id": "text_id",
			"label": "input text（showed in customize page）"
		}
	]
}
{% endschema %}

thisIf you set the type part to image_picker and set it to image selection url, you can change the editing target such as url selection.This time it's text, so it's text input。

It looks like this on the customize screen。

If you want to know all the types of type in detail, you can find it on the official Shopify website.。

https://shopify.dev/docs/themes/settings

And、After setting the schema tag and entering text from the customize screen, describe liquid in the part of the file where you want to add textTo do

The description method is、、

{{ section.settings.text_id }}

Just write！

For example, if you want to output the text entered from the customize screen in the HTML p tag

& lt; p & gt;{{ section.settings.text_id }}& lt; / p & gt;

Was it easy for people who usually develop it?

Summary of how to use Schema tags in Shopify

That was the basic usage of the schema tag

However, I would like to say that the schema tag is not like this yet lol There are still many ways to use it, and there are many application methods, so I feel that it is deep as a person who is developing every day.

This ease of use and versatility is what makes Shopify so appealing.。

I wonder if I will write an advanced version soon.。