【新機能！？】Section groupsについて

セクショングループのイメージ

アイコンが上下に動いていると思いますが他のセクショングループに影響していないのわかりますか？独立して動かせるので非常に便利です！

保守とか運用考えると非常に便利ですよね！

セクショングループとは

セクション グループは、レンダリングされるセクションとアプリ ブロックのリスト、およびそれらに関連付けられた設定を格納する JSON データ ファイルです。マーチャントは、テーマ エディタで、セクション グループにセクションを追加したり、セクションを削除して並べ替えたりすることができます。 Shopify.dev

テンプレート以外にもヘッダーやフッターなどセクショングループを作成できる機能になります。

セクションではなくセクショングループです

ショピクラでもこの機能を使っていて、サイドバーの部分がそれにあたります

文章じゃわかりにくいかと思いますので画像を使いながら説明していきます

ショピクリのサイト構成

サイト構成
管理画面での見え方

①〜④それぞれがセクショングループになります

これの何がいいかというと今まで「③サイドバー」など「②テンプレート」以外の部分のセクションを動かしたいって時、コードを直接いじらないと動かせなかったものが管理画面から動かせる様になりました。

セクショングループの作り方

sectionsフォルダの中にfooter-group.jsonとheader-group.jsonファイルがあるのですがこれがセクショングループになります。JSONファイルにすることでセクションを動的に動かすことができ削除したり並べ替えたりすることができます。

任意のセクショングループを作ってみましょう

今回作るセクショングループの概要

セクショングループはsectionsフォルダ内に作成します。

1. {
2.   "name": "カスタムセクショングループ",
3.   "type": "custom.test",
4.   "sections": {
5.   },
6.   "order": [
8.   ]
9. }

ファイルを作るだけだと管理画面で操作ができないのでtheme.liquidにコードを追記します

1.     {% sections 'custom-group' %}

※ {%section ''%}ではなく{%sections ''%}になります

theme.liquidにコードを追記後に管理画面を見ると「カスタムセクショングループ」が表示されているのがわかります

あとは他のグループと同じようにセクションを追加をしてカスタマイズできます

ヘッダーにセクションが追加できない！？

Dawnのデフォルトだとheaderに追加できるセクションは「カスタムLiquid」のみとなっています

他のセクションも追加したい時ってありますよね

今回は画像バナーをヘッダーに追加できる様にしたいと思います。

画像バナーのschemaを編集

画像バナーのファイル名はimage-banner.liquidです。

1. {% schema %}
2. {% endschema %}

の中身を見ると

1. "disabled_on": {
2.     "groups": ["header", "footer"]
3.   }

こちらのコードを編集します

簡単に言えば「headerとfooterのセクショングループには追加できないよー」って意味です

なので

1. "disabled_on": {
2.     "groups": ["footer"]
3.   }

headerを削除してあげれば

headerグループで画像バナーセクションが追加できる様になります。

ちなみにですが、特定のグループのみ追加させたい場合は

1. "enabled_on": {
2.     "groups": ["header", "footer"]
3.   }

enabled_onで実現できます！

 

開発者ログ

We are introducing sections liquid tag and section groups
Introducing new enabled_on / disabled_on section schema attributes (deprecating templates)