【Shopify】Content Schemaを理解して、管理画面からサイトをカスタマイズできるようにする - #08

content_for_indexcontent_for_indexShopifyでは、管理画面上からサイトをカスタマイズすることができます。

 

ここで指す「カスタマイズ」とは、サイト上にお知らせを追加したり、おすすめ商品を追加したり削除したり…です。

無料テーマを使用している場合、管理画面 > 販売チャネル > オンラインストア > テーマの画面で「カスタマイズ」をクリックして、各セクションで様々な設定ができるはずです。

上記はリッチテキストのセクション設定画面で、表示させる文章などを設定できます。

 

 

このように、管理画面でカスタマイズできるような仕組みを実現するには、themeファイルのconfig/settings_data.jsonとContent Schemaという機能を理解してカスタマイズする必要があります。

 

かなりややこしい内容ですが、これを理解すると柔軟な運用しやすいサイトを作れるので、ぜひマスターしましょう。

 

■今回の内容に関する公式ドキュメント

https://shopify.dev/docs/themes/sections/content-schema

https://shopify.dev/docs/themes/settings#image-picker

https://shopify.dev/docs/themes/sections#restriction-on-additional-section-settings

https://shopify.dev/themes/architecture/settings#settings_schema-json

 

■バックナンバー

• #01 - ローカルで開発する環境を構築する手順
• #02 - 無料テーマのディレクトリ構造の解説
• #03 - 仕様や用語、開発の流れの解説
• #04 - 独自言語「liquid」の基本的な書き方
• #05 - 動的な情報を出力できるオブジェクトとプロパティについて
• #06 - 商品一覧ページのカスタマイズ方法
• #07 - TOPページに商品一覧を新着順で出力する
• #08 - Content Schemaを理解して、管理画面からサイトをカスタマイズできるようにする
• #09 - 商品検索を理解する
• #番外編 - （随時更新）開発Tips
• #番外編 - （随時更新）便利なオブジェクト
• #オブジェクトの中身を確認する（PHPのprint_rやJavaScriptのconsole.logのようなイメージ）

はじめに

今回使用するテーマは無料の「Minimal」です。

公式テーマのURL：https://themes.shopify.com/themes/minimal/styles/modern

このテーマをベースにカスタマイズしていきます。

 

とはいえ、各テーマの既存のコードは一切使わないので、どのテーマをベースにしても大丈夫だと思います。

今回のゴール

管理画面から以下のようなセクションを追加して、自由にテキストや画像を設定して表示できるようにします。

コードの実装など

新規sectionsファイルの作成

まず初めに、sectionsディレクトリに新規でファイルを作成します。

今回はsample_section.liquidとファイル名を付けます。

そして、以下コードを貼り付けます。

 

<section>

  <section>
    <h2>Images</h2>
    <div>
      {% assign get_sec_image = false %}

      {% for block in section.blocks limit: section.blocks.size %}
        {% if block.settings.image_picker != blank %}
          {% assign get_sec_image = true %}
          {{ block.settings.image_picker | img_url: '300×' | img_tag }}
        {% endif %}
      {% endfor %}

      {% if get_sec_image == false %}
        <p>Nothing image.</p>
      {% endif %}
    </div>
  </section>

  <br><hr><br>

  {% if section.settings.is_visivle %}
    <section>
      <h2>Text</h2>
      {% if section.settings.text != blank %}
        <p>{{ section.settings.text }}</p>
      {% endif %}
    </section>
  {% endif %}

</section>



{% schema %}
{
  "name": {
    "ja": "サンプルセクション"
  },
  "class": "sample_section",
  "blocks": [
    {
      "type": "custom",
      "name": {
        "ja": "画像"
      },
      "limit": 3,
      "settings": [
        {
          "type": "image_picker",
          "id": "image_picker",
          "label": {
            "ja": "画像"
          }
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "checkbox",
      "id": "is_visivle",
      "label": {
        "ja": "表示する？"
      },
      "info": {
        "ja": "チェックを入れると表示、外すと非表示になります。"
      }
    },
    {
      "type": "textarea",
      "id": "text",
      "label": {
        "ja": "本文"
      },
      "default": {
        "ja": "default text. default text."
      }
    }
  ],
  "presets": [
    {
      "name": {
        "ja": "サンプルセクション"
      },
      "category": {
        "ja": "_カスタム"
      }
    }
  ]
}
{% endschema %}

 

これで、ベースとなるsectionsファイルの作成は完了です。

次に、管理画面からセクションを追加します。

 

管理画面からセクションを追加しようとすると、以下のように_カスタムというグループが追加されているはずです。
（_カスタムの頭にアンダーバー「_」を付けているのは、五十音順で一番上に作成したグループが来るからです）

 

そこから先程作成した「サンプルセクション」を追加して、挙動を確認してください。

自由にテキストや画像が変更できれば成功です。

 

もし、反映されなかったり、そもそも「サンプルセクション」が表示されない場合は、theme watchを実行しているか、watch中のターミナルにエラーが表示されていないか、などを確認してください。

 

コードの解説

では、sectionsファイルのコードの解説をしていきます。

 

このファイルの中のコードは大きく2つに分かれており、前半がサイト上に表示させるHTML、後半の{% schema %}の部分が管理画面の設定関係のコードです。

 

管理画面で設定した値を、liquid側で受け取り、それをサイト上に反映させるようなイメージです。

まずは、{% schema %}の解説をします。

{% schema %}について

{% schema %}
// 設定
{% endschema %}

上記のように、schemaタグの中に設定を記述します。

主な構成は以下の通りです。

 

{% schema %}
{
  "name": {
    "ja": "セクション名"
  },
  "class": "セクションに自動で追加されるclass名",
  "blocks": [
    // 画像や商品など数が増える可能性がある設定を記述する
  ],
  "settings": [
    // 見出しやテキストなど数が増えない設定を記述する
  ],
  "presets": [
    {
      "name": {
        "ja": "管理画面のセクション一覧に表示されるセクション名"
      },
      "category": {
        "ja": "管理画面のセクション一覧のグループに表示される名前"
      }
    }
  ]
}
{% endschema %}

 

settingsとblocksがややこしいので、こちらを解説します。

他のプロパティは上記の通りです。

 

基本的にはsettingsに設定を追加していきます。

settingsは、以下のように記述します。

 

"settings": [
    {
      "type": "checkbox",
      "id": "is_visivle",
      "label": {
        "ja": "表示する？"
      },
      "info": {
        "ja": "チェックを入れると表示、外すと非表示になります。"
      }
    },
    {
      "type": "textarea",
      "id": "text",
      "label": {
        "ja": "本文"
      },
      "default": {
        "ja": "default text. default text."
      }
    }
],

 

プロパティ名	解説
type	設定の種類。 一行のテキストボックスの場合はtext、複数行の場合はtextarea、チェックボックスの場合はcheckboxのように記述します。 種類によって戻り値が異なり、textの場合は入力したテキスト、checkboxの場合はtrue/falseで返ってきます。 他にも画像や商品、コレクションなども設定できます。 詳しくは公式ドキュメントを参照ください。
id	一意のユニークな値を設定します。 このid名を使い、liquid側で設定した値を呼び出します。 変数名のようなイメージです。
label	管理画面に表示される設定の名前
info	管理画面に表示される設定の説明文
default	設定のデフォルト値 typeがtextの場合、default: "デフォルトテキスト"のように記述しておくと、「デフォルトテキスト」が最初から入力された状態になります。

 

 

blocksは、以下のように記述します。

 

"blocks":[
  {
    "type": "bg_image",
    "name": {
      "ja": "背景画像"
    },
    "limit": 3,
    "settings": [
      {
        "type": "image_picker",
        "id": "image_picker",
        "label": {
          "ja": "背景画像"
        }
      }
    ]
  },
  {
    "type": "gallery",
    "name": {
      "ja": "スライドショーの画像"
    },
    "limit": 5,
    "settings": [
      {
        "type": "image_picker",
        "id": "image_picker",
        "label": {
          "ja": "スライドショーの画像"
        }
      }
    ]
  }
],

 

プロパティ名	解説
type	blocksを複数設定する場合、typeの値は重複しないユニークな値にしなければいけません。 この値をどこかで使うことは無いので、重複しないようにするだけを意識すれば大丈夫です。
name	管理画面に表示される設定の名前
limit	設定を複数登録する場合の上限数
settings	先程解説したsettingsで設定を定義します。

 

settingsとblocksの違いですが、今回のサンプルセクションを例にすると、見出しやテキストのような設定する値が1つの場合はsettings、商品や画像のような値を複数設定する可能性があるものはblocksにする…のような違いがあります。

 

サンプルコードをご覧の通り、blocksの中でもsettingsを記述しています。

なので、あくまでも{% schema %}のベースはsettingsになるので、まずはsettingsをちゃんと理解できるようにしましょう。

設定した値の呼び出し方

次に設定した値の呼び出し方を解説します。

settingsとblocksで少々異なります。

 

しかし、どちらも共通する点もあり、それは設定した値が無い可能性があるので、それを考慮した書き方をすることです。

settingsのdefaultでデフォルト値を設定していればいいですが、基本的には値がある場合のみタグを呼び出すような書き方をしましょう。

 

例えば、<p>{{ name }}</p>のような書き方をしていて、もしnameの値が無かったらサイト上では<p></p>ように出力されてしまいます。

なので、if文などで値があるなら…のような書き方をしましょう。

 

少し話がそれてしまいましたが、値の呼び出し方を解説していきます。

settingsを呼び出す

section.settings.idのように、オブジェクトとプロパティのような形式になります。

idはsettingsのidで設定した値です。

idをtextで設定した場合、section.settings.textのようにして値を呼び出します。

blocksを呼び出す

settingsはひとつしか値がないので前述のような書き方で呼び出せるのですが、blocksは値が複数（配列）ある場合があるので、forで回して値を呼び出します。

 

{% for block in section.blocks limit: section.blocks.size %}
    {% if block.settings.image_picker != blank %}
        {{ block.settings.image_picker | img_url: '300×' | img_tag }}
    {% endif %}
{% endfor %}

サンプルコードでは、上記のように呼び出しています。

1. section.blocksオブジェクトをforで回しblockに代入
2. if文でblock.settings.image_pickerオブジェクトだったら、その値を呼び出す

とても大事な注意点（必読）

管理画面上でセクションのテキストや画像を設定する。

この行為を行うと、本番環境にアップされているsettings_data.jsonのファイルに、管理画面で行ったアクション（テキストの追加や画像の設定など）が反映されます。

例：画像を追加したら、その画像のURLなどの情報がsettings_data.jsonのファイルに追記されます

 

つまり、管理画面で色々操作をすると、その分、本番環境のsettings_data.jsonが更新されるので、ローカル環境のsettings_data.jsonと差分が生まれます。

 

もう何が言いたいのか分かるとは思いますが、差分がある状態で、watch中にローカル環境のsettings_data.jsonを何かしら変更して保存をすると、その内容で本番環境のsettings_data.jsonが上書きされてしまいます。

なので、管理画面で色々操作した内容が無くなってしまいます。

 

これを防ぐには、管理画面で操作をしたら、管理画面 > テーマ > アクション > コード編集するからsettings_data.jsonのコードをコピーしてローカル環境のsettings_data.jsonに反映させるしかないです。

 

このフローを忘れなければ、色々設定をしたにも関わらず、それがいつの間にか元に戻ってしまったという恐ろしいことは起きないと思います。

まとめ

settings_data.jsonとContent Schemaはかなりややこしい内容だったと思います。

しかし、これらを少しでも使いこなせると、冒頭でも書きましたが柔軟な運用しやすいサイトを作れるようになるので、まずはぜひ試してみて下さい。

 

■バックナンバー

• #01 - ローカルで開発する環境を構築する手順
• #02 - 無料テーマのディレクトリ構造の解説
• #03 - 仕様や用語、開発の流れの解説
• #04 - 独自言語「liquid」の基本的な書き方
• #05 - 動的な情報を出力できるオブジェクトとプロパティについて
• #06 - 商品一覧ページのカスタマイズ方法
• #07 - TOPページに商品一覧を新着順で出力する
• #08 - Content Schemaを理解して、管理画面からサイトをカスタマイズできるようにする
• #09 - 商品検索を理解する
• #番外編 - （随時更新）開発Tips
• #番外編 - （随時更新）便利なオブジェクト
• #オブジェクトの中身を確認する（PHPのprint_rやJavaScriptのconsole.logのようなイメージ）