【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：セクションが該当するカテゴリー。好きに設定できる