自作セクション作成②カスタマイズ可能な項目を追加

自作したセクションファイルを、テーマのカスタマイズ画面から使いやすいようにグレードアップさせます。 カスタマイズ画面で打ち替えるだけで、セクション見出しの文言を変更できるようにしてみましょう。

カスタマイズ項目を作るsettings

前回のレッスンで、テーマのカスタマイズ画面で呼び出せる自作セクションが出来ました。 表示部分に、ユーザーがカスタマイズする必要がない場合は、このまま{% schema %}の上にHTMLを書いていけばOK。

ユーザーが簡単にカスタマイズ出来るようにするには、更に設定が必要です。 カスタマイズ画面で、ユーザーがセクション見出しの文言を変更できるようにしてみましょう。

1.セクションのsettingsを記述

コード編集画面で、自作セクション（lesson1.liquid）を開きます。 赤線で囲ったsettings: [] という記述を見つけてください。

角括弧の中で、セクション内で使用する変数を設定していきます。 この一手間で、ユーザーが入力した内容が反映されるようになりますよ。

settings: [] で設定するキー（属性）は、以下5種類が基本となっています。

• ★id：Liquid変数として使う際の名前
• ★type：表示される入力設定のタイプ
• ★label：テーマのカスタマイズ画面で表示されるラベル
• default：typeのデフォルトの値
• info：入力設定設定に関する説明等

★がついているid、type、labelの3属性は必須項目です。 …とは言え、全部でも5種類。 どう表示されるか、確認も兼ねて5つ全部書いてみましょう。

lesson1.liquid - schema全体

{% schema %}
  {
    "name": "Section name",
    "settings": [
      {
        "type": "" ,
        "id": "" ,
        "label": "" ,
        "default":  "" ,
        "info" : ""
      }
    ] ,
    "presets": [
      {
        "name": "lesson1"
      }
    ]
  }
{% endschema %}

※この状態で保存すると、エラー表示がでます。
値を入れると保存できるようになりますので、そのまま進めてください。

2.settingsの値を記述

カスタマイズ画面から変更できる内容・その説明文などを設定してきましょう。

まず、メインであるカスタマイズ可能な項目は"type"を使って用意します。 設定できる"type"の種類（値）については、あらかじめShopifyが用意しています。

今作りたいのは、セクションの見出し。 ですので、1 行のテキストフィールドを表示する「text」を指定してみましょう。

{
    "type": "text" ,
    "id": "" ,
    "label": "" ,
    "default":  "" ,
    "info" : ""
}

"id"以下の項目は、値を自由に設定できます。
以下のように設定してみました。

{
    "type": "text" ,
    "id": "s-heading" ,
    "label": "セクション見出し" ,
    "default":  "HELLO!" ,
    "info" : "見出しを入力してください"
}

3.カスタマイズ画面の表示を確認

セクションのsettings記述によって、カスタマイズ画面の表示がどう変わったか見てみましょう。 「テーマをカスタマイズ」から、テーマのカスタマイズ画面を開いてください。

セクションを追加からlesson1を選択して追加します。 （※既に追加されているセクションには、変更が反映されません。）

今回追加したセクションは、サイドバーに設定項目が表示されています。

こうして見比べると、なんの項目がどう表示されるのか一目瞭然ですね。 公式ドキュメントの説明でピンと来ないときは、こうして見比べると早いです。

カスタマイズ画面の設定内容を反映する

テーマのカスタマイズ画面で、文字を入力出来るようにはなりました。 ですが、今のままでは、テキストフィールドを打ち替えても反映されません。

最後に、カスタマイズ画面から設定された内容が反映されるようにしていきましょう。

1.settingsの情報を取得・出力する

コード編集画面で、最初に{% schema %}よりも上にh2タグを書きました。 h2タグの中身を「settingsで用意したテキストフィールドに打ち込まれた文言」が出力されるように変更します。

liquidでデータ（変数）の出力に使う囲みは{{ }}。 設定の値を取得する変数は、以下のように書きます。

schemaで呼び出したい項目のidを確認してみましょう。

今回の場合は {{ section.settings.s-heading }}となります。

h2タグ内の記述を、このliquidコードに変更しましょう。

書き換えたら、保存ボタンで保存してください。

2.カスタマイズ画面で確認

では、再びテーマのカスタマイズ画面の方を見てください。

セクション見出しを打ち替えてみましょう。 プレビューに、入力した通りの見出しが表示されれば成功です。

おまけ：自作セクションの調整

ここまでで、基本のShopifyテーマセクションは作れました。 ですが、他のセクションと幅があっていないのが嫌ですよね。

検証ツールでページを見てみましょう。 他セクションはdiv.page-widthで囲うことで統一した幅を保っている、ということがわかります。

lesson1.liquidも同様にdiv.page-widthで囲えば、統一できそうです。 書き足して、幅を揃えましょう。

<div class="page-width">
  <h2>{{ section.settings.s-heading }}</h2>
</div>

ここまでで、Shopifyテーマに自作した動的セクションの追加が出来ました。 次は、セクションの中に“ブロック”を作っていきましょう！