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 のテーマを作成している方の参考にしていただければと思います。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか?

「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」

役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。

リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。