Shopifyで「セクションを追加」を表示させる

セクションを追加したいのにできない

Open: Pasted image 20241230154009.png
テーマエディター、セクションを追加したいページが有るのに追加ができないところがあったので、
これをコードをいじってどうにかしたいと思います。

ファイルの形式

Shopify のテーマをいじっていくわけですが、ファイルの形式は大きく分けて２つあります。

• .liquid
• .json

この .liquid をいじって実装を目指していくわけですが、
実際いじってみると、セクションを追加できるようなオプションや記法は存在しないことがわかりました。

(あるのかもしれないし、将来実装予定なのかもしれない)

じゃあ、どうすればよいかというと、.json を使えば良いわけです。
.json を用いることでテーマエディターにおいてセクションの追加が簡単に行えるようになります。

試してないので予測ですが、似たようなことを liquid でやろうとするとこんな感じにいじらないと行けないと思われます。

{% section 'セクションA' %}
{% section 'セクションB' %}

これで静的に入れたあとにエディターで編集、って感じですかね。
そんなことはやりたくないので json で構築します。

JSON を書く

ざっくりこんな感じでかきます。

{
  "sections": {
    "<適当な名前>": {
      "type": "<sectionsフォルダの中のファイル名 notパス>",
      "settings": {
      }
    }
  },
  "order": ["<適当な名前 (上で設定した適当な名前と同じ文字列)>"]
}

これで更新をかけると、無事セクションを追加ボタンが表示されました。

Open: Pasted image 20241230154029.png

はい勝ち。

ということで json を使うとエディターでセクションが追加できるようになります。