【shopify】セクションを追加するためのLiquidの書き方

前回の記事では、shopifyにおけるLiquidの役割や記述方法について説明しました。
今回はもう少し掘り下げて、shopifyのカスタマイズに使用するセクションの作成方法を説明したいと思います。

セクションとは

まずセクションとはshopifyのカスタマイズに使用するパーツのようなものと考えてください。
shopifyの管理画面上で、編集したいテーマを選択し「カスタマイズ」をクリックするとサイトの編集画面に切り替ります。

その中で、画面の左下にある「セクションを追加」よりセクションを追加することでサイトのカスタマイズを行っていきます。

セクションの作成

それでは早速セクションの作成を行ってみましょう。
管理画面より「コードを編集する」を選択し、コードの編集画面に入ります。

コード一覧にて[新しいsectionを追加する]を選択します。

作成したいセクションのファイル名を入力します。

そうすると、新しくセクションのliquidファイルが作成されます。

サンプルコードと設定内容の説明

以下のサンプルコードを元に、セクションがどのように動くのかを説明します。

<h2>{{ section.settings.text-input | escape }}</h2>
{% case section.settings.range %}
	{% when 2 %}
		<p>2です</p>
	{% when 3 %}
		<p>3です</p>
	{% when 4 %}
		<p>4です</p>
	{% when 5 %}
		<p>5です</p>
{% endcase %}

{% if section.settings.check %}
	<p>チェックあり</p>
{% else %}
	<p>チェックなし</p>
{% endif %}

{% schema %}
{
  "name":"セクション名",
  "settings": [
    {
      "type": "text",
      "id": "text-input",
      "label": "テキスト入力",
      "default": "デフォルトテキスト"
    },
    {
      "type": "range",
      "id": "range",
      "label": "レンジ入力",
      "min": 2,
      "max": 5,
      "step": 1,
      "default": 3
    },
    {
      "type": "checkbox",
      "id": "check",
      "label": "チェックボックス",
      "default": false
    }
  ],
  "presets": [
    {
      "name": "セクション名" 
    }
  ]
}
{% endschema %}

セクションのソースはHTML部分と{% schema %}〜{% endschema %}のセクション設定部分で構成されます。
HTML部分は画面に表示されるHTMLで、セクション設定部分はセクション名やセクション内で使用できる変数等の設定になります。
Schemaの設定内容は全てjson形式で記述します。

セクション名

まずセクションとして必要なパラメータが、21行目と45行目〜49行目のセクション名です。
セクション名を入力することでカスタマイズ画面から作成したセクションを追加できるようになります。

設定画面

セクションを追加するとセクションの設定画面が表示されます。
設定画面では次項の変数を画面から設定する事ができます。

変数

Setting配下に設定するものはセクション内で使用する変数になります。
変数はsection.settings.[id]でアクセスします。

テキストボックス

23行目〜28行目はテキストの入力項目です。
Typeをtextとすることでテキストボックスの入力になります。

カスタマイズ画面ではこのように、テキストが入力できます。
1行目では入力された値をh2タグで表示しています。

レンジ入力

29行目〜37行目はレンジ入力の入力項目です。
Typeをrangeとすることでレンジ入力になります。
その他の設定内容はそれぞれminが最小値、maxが最大値、stepが設定値の変動単位です。

カスタマイズ画面ではこのようにバーが表示され値を設定します。
2行目〜11行目では入力された値によって表示を切り替えています。

チェックボックス

38行目〜43行目はチェックボックスの入力項目です。
Typeをcheckboxとすることでチェックボックスになります。

カスタマイズ画面ではチェックボックスが表示されます。
13行目〜17行目ではチェックの有無によって表示を切り替えています。

参考ページ

今回のサンプルは最小限の構成でセクションを作成しています。
その他のパラメータの説明は下記のページにあるので、色々な設定を追加しセクションを作り込む事ができます。
https://shopify.dev/themes/architecture/sections

まとめ

今回はセクションの作成方法を説明させて頂きました。
普段からプログラムを行いサイト制作をしているエンジニアの方であれば、直接コーディングしてもサイトは作れます。
しかしセクションを作成することで、エンジニアを介さずともカスタマイズ画面からサイトを編集できるようになり、結果サイトの運用コストを軽くする事ができます。
UIの設定をカスタマイズできるようにすればユーザの動きに合わせたUI変更も可能なため、より良いサイト運営にに繋がります。