Shopify

【Shopify】settings_schema.jsonって？管理者がテーマを簡単にカスタマイズできるようにする！

 
settings_schema.jsonって？管理者がテーマを簡単にカスタマイズできるようにする！のプレゼンテーション
悩んでいる人

「settings_schema.json」ってどうやって使うのかな？
使い方を知りたいな

こんな疑問を解決します。

「settings_schema.json」とは

「settings_schema.json」の記述方法

まとめ

shopifyテーマ開発で避けては通れない「settings_schema.json」

私も全く使い方がわからず、検索を繰り返したのでここでまとめようと思います。

私と同じように「settings_schema.json」の使い方がわからない人の役に立てば幸いです。

settings_schema.jsonって？

settings_schema.jsonって

「settings_schema.json」とは

管理者がテーマを簡単にカスタマイズできるようにするために、カスタマイズ項目を作る機能です。

SUGAWA

電話番号やお店の住所など、将来変更が必要そうな項目を
カスタマイズできるようにします。

ちなみにJSONとな何かというと
異なるプログラミング言語間でデータをやりとりするための、共通のデータ記述形式のことをいいます。

JSONはWEBアプリケーションやウェブサイトの開発に幅広く使われている欠かせない存在なので、ぜひ覚えておくと良いでしょう。

settings_schema.jsonの記述方法

settings_schema.jsonの記述方法2

例えば、以下のように記述します。

  {
    "name": "Header",
    "settings": [
      {
        "id": "topbar_tel",
        "type": "text",
        "label": "トップバーの電話番号設定",
        "default": "0120-777-777"
      },
      {
        "id": "topbar_message",
        "type": "text",
        "label": "トップバーの文言",
        "default": "送料無料キャンペーン実施中"
      }
    ]
  }

すると、以下のようなカスタマイズ項目が管理画面にできます。

自作カスタマイズ項目

そして、上の画像のフォームから電話番号や文言を設定して保存すると以下のように表示されます。

設定電話番号と文言の表示

表示するための記述は以下です。

<li class="list-inline-item"><i class="icon-telephone"></i>{{settings.topbar_tel}}</li>
<li class="list-inline-item">{{settings.topbar_message}}</li>

{{settings.topbar_tel}}

{{settings.topbar_message}}

の部分に設定した電話番号と、文言が出力されます。

まとめ

今回はshopifyのテーマ開発に欠かせないsettings_schema.jsonの書き方を紹介しました。

settings_schema.jsonを設定することで管理者がテーマをポチポチとカスタマイズできるようになります。

RELATED POST