Shopify Theme Kit を使って 管理画面上で操作できる section を作る方法

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

今回は Shopify のテーマ構築キットである Shopify Theme Kit を使用して、Shopify 管理画面上で操作可能な section を作る方法についてまとめたいと思います。

Shopify Theme Kit の使用が前提となっていますので、こちらの記事もお読みいただけると幸いです。

section とは？

Shopify のテーマで使用されるコンポーネントは概ね以下の3種類となっています。

• snippet: 他の snippet や section, templete で再利用可能、かつ外から操作する必要のない小さいコンポーネント（アイコンやボタンなど）
• section: Shopify のテーマカスタマイズでページに追加したり中身が編集できる、snippet よりも大きいコンポーネント（商品リストや告知など）
• template: snippet や section を呼ぶページコンポーネント

コンポーネントのファイルは基本的なテーマであればそれぞれ snippets/ sections/ templates/ ディレクトリに格納されています。

今回はその section の作り方についてまとめます。

section の作り方

section ファイルには

• ページに表示される部分のHTML
• テーマカスタマイズで編集できる項目を設定する schema

の2つが必要となります。

<div data-section-id="{{ section.id }}">
  <p>example</p>
</div>

{% schema %}
// schema の内容
{% endschema %}

以上のようなファイルをテーマファイルの sections/ ディレクトリに追加することで、Shopify のテーマカスタマイズ画面からページに追加していけるようになります。

既存のテーマからカスタマイズしている場合は、既にある他の section ファイルを複製して作成すると効率的かと思います。

schema の書き方

schema には、その section の名前と編集項目を設定します。

たとえば画像をアップして表示する section の場合、以下のように書きます。

<div data-section-id="{{ section.id }}" data-section-type="key-visual">
  <img src="{{ section.settings.image | img_url: '2000x2000' }}" alt="{{ section.settings.image.alt | escape }}">
</div>

{% schema %}
{
  "name": { // section の名前
    "ja": "キービジュアル"
  },
  "class": "key-visual", // section の親要素に付与される class
  "settings": [ // テーマカスタマイズ画面での設定項目。複数作成可能
    {
      "type": "image_picker", // 設定の種別
      "id": "image", // 設定内容が格納される変数名
      "label": {
        "ja": "画像" // 設定画面に表示されるラベル
      }
    }
  ],
  "presets": [
    {
      "name": {
        "ja": "キービジュアル" // テーマカスタマイズ画面で表示されるラベル
      },
      "category": {
        "ja": "画像" // テーマカスタマイズ画面の section 選択画面で分類されるカテゴリ
      }
    }
  ]
}
{% endschema %}

settings の type 一覧は公式にドキュメントが用意されておりますのでそちらもご覧ください。

テーマカスタマイズ上で section に設定した各内容は section.settings.[id名] という変数から出力することが可能です。

管理画面上では以下のように編集することができます。

まとめ

今回は Shopify テーマの section の作り方についてまとめました。

最初は内容の把握に少しかかりましたが、慣れると設定項目とその出力が1ファイルにまとまっているため書きやすい印象を受けました。

Shopify のテーマを作成している方の参考にしていただければと思います。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。