Shopifyでセクションを自作する際にLiquidファイル内で使用するschemaタグについてご紹介します。

Shopifyのセクションとは？

Shopifyのストアカスタマイズ画面でショップページを作成する際に使う、この1つ1つのまとまりが《セクション》です。


Shopifyのショップページは、セクションを並べて作成されています。
セクションを使用することで、ページの作成や編集がとても簡単にできるのが特徴です。
テーマテンプレートごとにセクションのスタイルは異なります。

schemaタグの書き方

セクションは自作することも可能で、Liquidファイル内のschemaタグで設定していきます。
セクションを作ると、ストアカスタマイズ画面から画像の編集やテキストの編集が簡単にできるようになります。

書き方としては、Liquidファイル内の下の方に以下のように記述します。
なお、基本的にschemaはSectionフォルダ内のLiquidファイルでのみ使用します。

{% schema %}
{
    "name": "Custom Section",
    "settings": [
      {
        "type": "text",
        "id": "custom-section_text",
        "label": "テキストを入力する"
      }
    ],
    "presets": [
      {
      "name": "Custom Section"
      }
    ]
  }
{% endschema%}

"name": 任意のセクションの名前
"type": セクションのタイプ設定
"id": 任意のセクション ID
"label": カスタマイズ画面に表示されるテキスト

"presets"内の"name": カスタマイズ画面でセクションを追加する際に出てくるセクションの名前

こちらのschemaタグでは、テキストを入力するセクションを作成しました。
その他にも、typeを変更することで

• 長文テキストの挿入("type": textarea)
• 画像の挿し替え("type": image_picker)
• チェックボックス("type": checkbox)
• url指定("type": url)
• カラー指定("type": color)

などのセクションを作成することができます。

複数のセクションを記述する時

schemaで複数の記述をする時は、以下のようにコンマで区切ります。

{% schema %}
{
    "name": "Custom Section",
    "settings": [
      {
        "type": "text",
        "id": "custom-section_title",
        "label": "タイトルを入力する"
      }, //←コンマで区切る
      {
        "type": "image_picker",
        "id": "custom-section_img",
        "label": "画像を選択する"
      } //←最後はコンマなし
    ],
    "presets": [
      {
      "name": "Custom Section"
      }
    ]
  }
{% endschema%}

先ほどのテキストセクションの後ろに、画像の挿し替えをするセクションを追加してみました。
この時注意したいのが、最後のセクションにはコンマを付けない点です。

途中にコンマが抜けていたり、最後にコンマがついていると保存ができないのでエラーが出た時は一番に確認してみましょう。

HTML内にLiquidを使ってセクションを挿入する

カスタマイズ画面で「セクションを追加する」からセクションを追加できるようにはなりましたが、これだけでは画面に反映されません。
反映するためには、HTMLタグの中にセクションを表示させるコードを記述する必要があります。

先ほどのテキストをHTMLのpタグに挿入してみましょう。

<p>{{ section.settings.custom-section_title }}</p>

pタグ内には、Liquidで表示するための記述（中括弧2つ）をしてその中に
section.settings.schemaで指定した任意のID
と記述することで、schemaの内容が画面に反映されます。

あとは、pタグに任意のclassを付けてCSSでスタイルを当てていきましょう。
セクションはテキスト以外にもできることがたくさんあるのでぜひ色々試してみてください！