スキーマは、Shopify Online Store2.0のテーマを開発するのに、大変重要な要素です。
Shopifyの公式サイトには以下のように書かれています。
各セクションには単一のタグのみを含めることができます。タグには、コンテンツにリストされている属性を使用する有効なJSONのみを含める必要があります。タグはセクションファイル内のどこにでも配置できますが、別のLiquidタグ内にネストすることはできません。
Section schema：https://shopify.dev/themes/architecture/sections/section-schema#content
それでは、詳しく解説していきますね。
筆者がShopifyテーマを開発していたときに備忘録的にまとめたものなので、テーマ開発者の方に参考になればと思います。ブックマークしてもらえると嬉しいです！
スキーマ（schema）ってなに？
スキーマはテーマの/sections/内の.liquidファイルに設定できるセクション・ブロックの設定項目です。
テーマで重要なセクションを作成する際の設定ファイルですね。
まず、セクションを作成する流れは以下です。
- /sections/内の.liquidファイルのスキーマ（schema）で設定項目を作成
- /sections/内の.liquidファイルのスキーマ（schema）で設定した項目をhtmlで出力
1.でセクションの設定を作成し、2.でhtmlを表示させる流れです。
そして、スキーマで設定できる項目は以下です。
{% schema %}
"name":, //セクションのタイトル
"tag":, //セクションとして出力する際に、ラップするタグを設定できる
"class":, //ラッパーに付与するクラス名を設定できる
"limit":, //追加できるセクション数を制限する
"settings":, //セクションに追加するカスタマイズ要素を設定する
"blocks":, //セクションの中に設定する再利用な可能ブロック
"max_blocks":, //追加できるブロック数を制限する 上限は16
"presets":, //
"default":, //
"locales":, //
"templates":, //
{% endschema %}name
nameは、追加するセクションのタイトルを設定できます。
tag
tagは、追加するセクションをラップするタグを設定できます。
ラップするタグは以下です。
{% schema %}
"tag": article //aside,div,footerheader,section
{% endschema %}class
classは、ラップするセクションに付与したいクラス名を設定できます。
{% schema %}
"class": "add-section" //ラッパーに付与したいクラス名を設定
{% endschema %}limit
limitは、追加できるセクションの数の制限を設定することができます。
{% schema %}
"limit": 1 //追加できるセクションの数を制限できる
{% endschema %}settings
settingsは、セクション自体に追加するカスタマイズできる要素を設定することができます。
settingには以下の値を設定することができます。
| 属性 | 説明 | 必須 |
|---|---|---|
type | 設定タイプ。または特殊な入力設定タイプ のいずれかです。 | はい |
id | 設定値にアクセスするために使用される設定ID。 | はい |
label | テーマエディタに表示される設定ラベル。 | はい |
default | 設定のデフォルト値。 | No |
info | 設定に関する情報テキストのオプション。 | No |
{% schema %}
{
"type": "image_picker", // セクションのブロックに追加するカスタマイズ要素
"id": "image", //カスタマイズ要素のid名settings内で被らないように設定する必要がある
"label": "１枚目の画像を設定してください。" //カスタマイズ要素に表示させるテキストを設定
},
{
"type": "image_picker",
"id": "image_2", //カスタマイズ要素のid名settings内で被らないように設定する必要がある
"label": "２枚目の画像を設定してください。"
},
{% endschema %}typeに設定する値によって、テキストや画像ピッカー、チェックボックスなどを設定することが出来ます。
blocks
blocksは、セクションの中に追加するセクション内で再利用可能なモジュールを設定できます。
イメージ的には、セクションの中にセクションを追加するイメージです。
なので、スキーマに設定できるタグをblocksの中でも設定して作成します。
{% schema %}
"blocks": [
{
"type": "",
"name": "",
"limit": 1,
"settings": [
{
"type": "",
"id": "",
"default": "",
"label": ""
},
]
},
{% endschema %}max_blocks
max_blocksは、追加できるブロック数を制限することができます。
上限は16なので、それ以下の数字を設定することができます。
{% schema %}
"max_blocks": 12, //追加できるブロック数を制限する 上限は16
{% endschema %}presets
presetsは、ストアの管理画面からJSONテンプレートを触れるようにするために設定する項目です。
{
"presets": [
{
"name": "",
"settings": {
"title": ""
},
"blocks": [
{
"type": ""
},
]
}
]
}default
defaultは、presetsで設定する項目のデフォルト値を設定させる項目です。
{
"default": {
"settings": {
"title": ""
},
"blocks": [
{
"type": ""
},
]
}
}locales
ロケールは、翻訳ファイルの設定ファイルです。
スキーマとは、別のディレクトリの/locales/配下に翻訳ファイルを配置しておきます。
翻訳ファイルを設定することで、言語地域が違うユーザーが見たときに表示させるテキストを設定しておくことができます。
ストア管理者が言語設定を変更したいときに、管理画面から言語設定を編集することができます。
言語設定を編集する際は、スキーマファイルを触るのではなく、翻訳ファイルを直接修正することができます。
{
"locales": {
"en": {
"title": ""
},
}
}templates
テンプレートは、セクションを表示させるテンプレートを選択することができます。
トップページだけ、商品ページだけに表示させるセクションを作成したい場合は以下のように設定します。
{
"templates": ["index","product"]
}ShopifyのCLIコマンドを知りたい方はこちら
Shopifyを本気で学ぶならテックギーク
Shopifyに特化したプログラミングスクール「テックギーク」です。独学で限界を感じている方は、一度無料カウンセリングをうけてみてはいかがでしょうか？
