Please announce here

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

Shopify changing schema tags beginners lily

 

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す!

 

Shopify schema tag how to use gif

 

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

What you can do with Schema tags
  • Image replacement
  • Text editing
  • URL replacement
  • Color selection
  • Show / hide elements with checkboxes
  • Select and display blog articles
  • Select and display a collection

etc

 

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

Shopify theme code modification

 

There is a folder called section in it。

shopify section

 

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 %}
  • type: Set the text input box text
    (Select from type)
  • id: Get this ID and reflect it in the page
    (Any ID)
  • label: Text to be displayed on the customize screen

 

 

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。

shopify screenshot schema tag

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

 

 

EC Penguin おすすめ本

関連記事

Leave a comment

Please note, comments must be approved before they are published