#02 テーマ設定を編集できるファイル「settings_schema.json」について

「config」フォルダにある「settings_schema.json」はShopifyの管理画面などを設定するファイルです。今回はこのファイルについて深掘りしていきます。

この記事を読むことでテーマ設定の仕組みとJSONを使った管理画面のカスタマイズ方法が少しだけわかります。

上記の記事の続きです。まだ閲覧されていない方はご覧いただくことをおすすめします。

settings_schema.jsonにJSONを記述して管理画面の表示を見る

ローカル環境でShopifyテーマキットをインストール後の手順になります。まだ、ローカル環境にShopifyテーマキットをインストールできていない方は上記URLからShopifyテーマキットキットをインストールお願いします。

「settings_schema.json」を開きます。以下のコードが最初に記述されています。

[
 {
   "name": "theme_info",
   "theme_name": "Themekit template theme",
   "theme_version": "1.0.0",
   "theme_author": "Shopify",
   "theme_documentation_url": "https://github.com/Shopify/themekit",
   "theme_support_url": "https://github.com/Shopify/themekit/issues"
 }
]

//------から //------までの以下のコードを追記します。

[
 {
   "name": "theme_info",
   "theme_name": "Themekit template theme",
   "theme_version": "1.0.0",
   "theme_author": "Shopify",
   "theme_documentation_url": "https://github.com/Shopify/themekit",
   "theme_support_url": "https://github.com/Shopify/themekit/issues"
 }
 //-----------------------------------------------------------------
 ,
 {
   "name": "Navigational Bar Colors Setting",
   "settings": [
     {
       "type": "color",
       "id": "navbar_color",
       "label": "NavBar Background Color",
       "default": "#eee"
     }
   ]
 }
 
 //-----------------------------------------------------------------
]

コードの内容をShopifyテーマに反映させるにはターミナルを立ち上げてコマンドを入力します。

チェンジディレクトリのコマンド「cd」を使いテーマファイルの
保存場所まで移動する必要があります。

theme deploy --allow-live

Shopifyの管理画面側でテーマのカスタマイズ画面を開いておきます。

左メニュー「オンラインストア」の「テーマ」から「カスタマイズ」ボタンをクリックすると、カスタマイズ画面でホームページを表示できる

左メニューの下の「テーマ設定」をクリックすると、追加した「NAVIGATION BAR COLORS SETTING」が表示されます。

ローカル環境で編集した内容を自動で反映させるには以下のコマンドを使います。

theme watch --allow-live

Liquidは「,」があるだけでエラーになる

「,」があるだけで修正内容が反映されない現象になりました。
間違っていたコードです。

 //-----------------------------------------------------------------
 ,
 {
   "name": "Navigational Bar Colors Setting",
   "settings": [
     {
       "type": "color",
       "id": "navbar_color",
       "label": "NavBar Background Color",
       "default": "#eee",
     }
   ]
 }
 
 //-----------------------------------------------------------------

正常に修正内容が反映されたコードです。

 //-----------------------------------------------------------------
 ,
 {
   "name": "Navigational Bar Colors Setting",
   "settings": [
     {
       "type": "color",
       "id": "navbar_color",
       "label": "NavBar Background Color",
       "default": "#eee"
     }
   ]
 }
 
 //-----------------------------------------------------------------

間違っている箇所
× 上のコード："default": "#eee",
〇 下のコード："default": "#eee"

※「,」があるかないかだけで、修正内容が反映されずエラーメッセージが
　表示されます。