セクションとは
Shopifyの公式サイトでは、以下のように説明されています。
セクションは、特定の機能をもったモジュールであり、カスタマイズできるページ要素です。テーマのテンプレートに（ヘッダーやフッター同様に）静的に含まれるか、テーマエディターによってテーマのホームページに動的に追加されます。
ざっくりいうと、カスタマイズの一つで、ページに文字を入れたり画像を入れたりするためのテンプレートのことです。
カスタマイズの「セクションを追加」を押下した際に出てくるのは動的なもの、元々入っていてカスタマイズからは削除できないものは静的なものという認識で問題ないと思います。
コード全体
全体の流れとしては、
ファイルの作成 → コードの記述 → セクションの追加
という流れで進めていくのですが、すべてを飛ばしてコードだけ確認したい方向けに、以下にコード全体を記載しますのでご確認ください。
<section class="text-section">
<h2>{{ section.settings.text-section-title }}</h2>
{% if section.settings.text-section-summary != blank %}
{{ section.settings.text-section-summary }}
{% endif %}
</section>
{% schema %}
{
"name": "テキスト",
"settings": [
{
"id": "text-section-title",
"type": "text",
"label": "見出し",
"default": "これは見出しです。"
},
{
"id": "text-section-summary",
"type": "richtext",
"label": "概要"
}
],
"presets": [
{
"name": "テキスト",
}
]
}
{% endschema %}
ファイルの作成
オリジナルのセクションを追加するにはコードを編集する必要があるため、まずはその画面まで移動します。
「オンラインストア」の「テーマ」から「…」の中にある「コードを編集」を押下します。
画面が遷移したら、「sections」の中にある「新しいセクションを追加する」を押下します。
そうするとファイル名の入力を促されるので、任意の名前を入力してください。
この解説と同じように進める場合は、「text-section」と入力してください。
ファイル名を入力するエリアより上に「liquid」と「JSON」の2択があるかと思いますが、「liquid」のままで問題ありません。
ファイル名の入力が終わったら、「完了」を押下してください。
これでファイルが作成されるかと思います。
コードの記述
コードの記述を始める前に、ファイル作成時にデフォルトで記述されえているコードについての解説から始めます。
以下がそのコードになります。
{% schema %}
{
"name": "Section name",
"settings": []
}
{% endschema %}
スキーマ（schema）
{% schema %}と{% endschema %}に囲われた部分で、ここにはJSONの記述が可能です。
ここで、どのような項目（文字や画像など）を含めるかを定義します。
そしてその定義されたものをliquidの記述で出力していくイメージです。
name
カスタマイズの画面から「セクションを追加」した後に、他のセクションたちが並んでいるところに表示される名前になります。
settings
この中に、項目（文字や画像など）を定義します。
項目の追加
ファイル作成時のコードは確認し終えたので、次は実際にコードを書いていきます。
その前に、何を作成するかを確認したいと思います。今回作成するのは以下の2項目です。
- テキスト（見出しとして使用）
- リッチテキスト（概要として使用）
では早速コードを書いていきます。コードは以下の通りです。
{% schema %}
{
"name": "テキスト",
"settings": [
{
"id": "text-section-title",
"type": "text",
"label": "見出し",
"default": "これは見出しです。"
},
{
"id": "text-section-summary",
"type": "richtext",
"label": "概要"
}
]
}
{% endschema %}
「text-section-title」は見出しとして使用するテキストの定義、「text-section-summary」は概要として使用するリッチテキストの定義になります。
次に進む前に、各プロパティの詳細について確認していきます。
id
画面に値を表示する際に使用します。
一般的なIDと同じで、値は被りなしのユニークなものである必要があります。
type
「どのような項目（文字や画像など）」がこれにあたります。
このtypeにはいろいろな種類があるので、興味のある方は、公式のリファレンスをご参照ください。
label
カスタマイズの画面で表示される項目の名前になります。
default
任意の項目で、初期値を指定したい場合に使用します。
ここに入力したものが、その項目の初期値となります。
動的であるという指定
どういうことかというと、このままではカスタマイズの画面で「セクションを追加」に表示されません。
表示させるには、liquidファイル側から「{% section ‘ファイル名’ %}」などで静的に呼び出す必要があります。
それが適切な場合もありますが、今回は”動的な”セクションを追加したので、その方法について解説していきます。
動的にするには、schemaの中で以下のプロパティを設定します。
{% schema %}
{
"name": "テキスト",
"settings": [
{
"id": "text-section-title",
"type": "text",
"label": "見出し",
"default": "これは見出しです。"
},
{
"id": "text-section-summary",
"type": "richtext",
"label": "概要"
}
],
"presets": [
{
"name": "テキスト",
}
]
}
{% endschema %}
追加したのは、presetsです。この中のプロパティを設定することで、動的なセクションであると認識されます。
その中の”name”について解説していきます。
name
スキーマ（schema）の部分で解説した”name”は『「セクションを追加」した後、他のセクションたちが並んでいるところに表示される名前』でしたが、この”name”は『「セクションを追加」を押下した際に、どのセクションを追加するか、セクション一覧から選ぶときに表示される名前』です。
違いを一文で表すと、「追加した後に表示されるname」か「追加する前に表示されるname」かの違いです。
項目の出力
諸々の記述が終わったら、次は値を出力していきます。
出力はHTMLの中にliquidの記述を書く形になり、似たような書き方をする言語だとphpが近いかと思います。
コードは以下の通りです。
<section class="text-section">
<h2>{{ section.settings.text-section-title }}</h2>
{% if section.settings.text-section-summary != blank %}
{{ section.settings.text-section-summary }}
{% endif %}
</section>
出力方法は「{{}}（ブレイスまたはブレース）」記号を使用します。
リッチテキストの出力は設定されている場合のみ出力したいので、if文で値が設定されているかを判定してから出力させます。
これれらの記述が終わったら、右上の「保存」を押下して変更をセーブします。
作成したセクションを管理画面で追加する
コードの記述が終わったら、コードの編集を閉じて「カスタマイズ」に移動します。
「カスタマイズ」に移動するボタンは、先ほどコードを編集する際に押した「…」の隣にあります。
「カスタマイズ」に移動すると、大きくページトップの画面とその横にデフォルトで設定されているセクションたちが並んでいます。
そのセクションたちの中に、今回作ったオリジナルのセクションを追加していきます。
まずは、任意の場所の「セクションを追加」を押下します。解説では、テンプレートの一番下の「セクションを追加」を押下しています。
すると、追加できるセクションの一覧が出るかと思います。
その中から、今回追加した「テキスト」を選択します。
そうすると、「セクションを追加」した場所にデフォルトの値が入った状態でオリジナルのセクションが表示されます。
この解説と同じ位置に追加した場合は、テンプレートの一番下、フッターの上に追加されているかと思います。
これはブラウザの幅によって異なりますが、パソコンで見た場合は画面の右か左に値を変更できるエリアが現れます。
作成した項目の更新は、このエリアから自由に行えます。
最後に
以上で解説は終わります。
テキストとリッチテキストというラインナップでしたが、チェックボックスや数字の項目を作成することもできるので、使い方は無限大です！
これらの内容に近いアプリでもっと色々なことができるようなものもあると思うので、それを使うのも良いと思います！が、他に何もいらないシンプルな入力欄が欲しいだけなどの場合にはコードで書いてしまうのもお勧めです！
今回は静的なセクションの追加でしたが、次回は動的なブロックを追加していきたいと思います。
