【Shopify】Online Store 2.0で各ページにセクションを追加する方法

赤城乳業さんから出てるブラックチョコバーって世界一美味いよね。カリーです。
今回はShopifyのOnlineStore2.0で各ページにセクションを追加する方法を紹介します。
久々にShopifyに触れて気付いたのですが、結構前にShopifyのOnline Store 2.0がリリースされ、様々な機能が追加・便利になってましたね。
そのうちの一つが、TOPページでしか出来なかったカスタマイズ画面でのセクション追加が、各ページで出来るようになったこと。非エンジニアの方でも各ページの編集が簡単にできるようになったのはデカい。
今回セクション追加について学習しているときに、自作セクションを追加する方法で詰まったので、備忘録として書き残そうと思います。
この記事の対象者
・TOP以外のページにセクションを追加したい人
・自作セクションを実装して、カスタマイズ画面からページに追加したい人
・OnlineStore2.0以降、初めてセクションを追加しようとしている人
まずは通常セクションの追加方法
OnlineStore2.0以前のTOPページ同様、以下の手順でいけます。
①Shopify管理画面→オンラインストア→カスタマイズ
②上のプルダウンから該当ページを選択
③サイドバーのセクションを追加で、任意のセクションを選択


自作セクションの追加方法
自作セクションを上記方法で管理画面から追加する場合、ただセクションを実装するだけでは一覧に表示されません。
表示させるには、セクション内にschemaの設定をしてあげる必要があります。
以下セクションのテストコードです。
<div class="test">
{% if section.settings.test_text %}
<p>{{ section.settings.test_text }}</p>
{% endif %}
</div>
{% schema %}
{
"name": "テスト用セクションschema",
"class": "test-wrap",
"blocks": [],
"settings": [
{
"id": "test_text",
"type": "text",
"label": "画面に表示するテキスト"
}
],
"presets": [
{
"name": "【presets】テスト用セクションschema",
"category": "Custom"
}
]
}
{% endschema %}
name | カスタマイズ画面のセクション設定箇所で表示されるセクション名 |
class | セクションに追加されるclass名 |
blocks | カスタマイズ画面で、セクションの内容をノーコードで設定したい項目。 (画像や商品など、数が増減する可能性がある内容) |
settings | カスタマイズ画面で、セクションの内容をノーコードで設定したい項目。 (テキストや見出しなど、数がそれ以上増えない内容) |
presets | カスタマイズ画面でセクションを追加できるようにするための設定。 name:セクション選択時に表示されるセクション名 category:セクションが該当するカテゴリー。好きに設定できる |
nameとclassはそのまんまです。
今回はセクションの追加の仕方なので、セクション内の設定に関わるblockとsettingsの詳細については省きます。(別記事にまとめるかも・・・)
セクション追加時に大事なのはpresetsで、こちらの設定が無いとセクション追加時の一覧に表示されません。僕はここで小1時間詰まりました・・・
nameとpresets内のnameの違いが分かりにくいのですが、以下の通りとなります。

上記のschema設定を行うことで、セクション一覧に自作セクションが表示されているかと思います。
自作ページにセクションを追加する方法
OnlineStore2.0以前は自作ページを作成するとなると、Liquidテンプレートで実装していましたが、上記セクションの追加を行いたい場合、JSONテンプレートで用意する必要があります。
page.test.jsonというファイル名で作成↓

その後、ページ画面でtestページを追加↓

これだけでOK!
これでカスタマイズ画面にてtestページを選択できるので、あとは最初にセクション追加した時と同様にセクションを追加・並び替えできます。

最後に
いかがでしたでしょうか。
わざわざLiquidテンプレートで {% section 'collection-list' %}
とコードを実装しなくても、簡単にセクションを追加できるようになりました。
僕と同様に久々にShopifyを触った人、これからShopifyを触る人の助けになれたら幸いです。