【Shopify】管理画面でサイトをカスタマイズできるようにする方法

仕事中にチロルチョコは欠かせない、カリーです。

今回はShopifyのschemaを使って、管理画面からサイトをカスタマイズできるようにする方法と、schemaの使用例を紹介します。

schemaを使うことで、ページ内に表示されている画像を定期的に変えたい、季節ごとにロゴを変えたいといった場合でも、ソースコードを変えずにカスタマイズできるようになります。

所々前の記事と被るところがありますが、ご了承ください。

※今回は「Down」のテーマを使用して紹介します

この記事の対象者

Shopifyの管理画面からサイトをカスタマイズできるようにしたい人
どんなカスタマイズができるのか知りたい人

最終的にどうカスタマイズできるようになる？

カスタマイズ画面にて、以下のように編集できるようになります。

「画像一覧」セクションの「画像blockを追加」を選択することで、表示させる画像を追加することができます。

実装の仕方

カスタマイズ画面での要素編集や追加を行うには、セクション内でschemaの設定を行います。

以下セクションのテストコードです。

<div class="testSection">
  <div class="page-width">
    <h3 class="title">{{ section.settings.title }}</h3>
      <ul class="grid" role="list">
        {% for block in section.blocks %}
          <li class="grid__item">
            <p>{{ block.settings.image_comment }}</p>
            <img src="{{ block.settings.image_data | img_url: 'master' }}">
          </li>
        {% endfor %}
      </ul>
  </div>
</div>

{% schema %}
{
  "name": "画像一覧",
  "class": "test-wrap",
  "blocks": [
    {
     "type": "image",
     "name": "画像block",
     "limit": 3,
     "settings": [
       {
        "type": "image_picker",
        "id": "image_data",
        "label": "画像"
       },
       {
        "type": "text",
        "id": "image_comment",
        "label": "一言コメント"
       }
     ]
    }
  ],
  "settings": [
    {
     "type": "text",
     "id": "title",
     "info": "画像一覧上部に表示するタイトル名",
     "default": "デフォルトタイトル",
     "label": "画像一覧タイトル"
    }
  ],
  "presets": [
    {
     "name": "【presets】画像一覧",
     "category": "Custom"
    }
  ]
}
{% endschema %}

schemaの内、要素編集の項目を作成するのに使用するのがblocksとsettingsになります。

■blocks

画像や商品など、セクション内で数が増減する可能性がある内容を設定する為に使用する

name	カスタマイズ画面で表示される設定項目の名前
type	使用されない値。複数のblocksを設定する際に一意の値であれば何でも良い
limit	設定項目の上限数。設定は任意（無い場合は無制限）
settings	カスタマイズ画面で設定する内容。以下settingsと設定の仕方は同じ

■settings

タイトルや見出しなど、セクション内で数がそれ以上増えない内容を設定する為に使用する

id	liquid側で呼び出すための値。一意である必要がある
type	textやnumberなど、設定する項目の種類
label	カスタマイズ画面で表示する、設定項目の名前
info	カスタマイズ画面で表示する、設定項目についての説明文。設定は任意
default	設定項目の初期値。設定は任意

まずはsettingsから説明します。

settingsではセクション内で単体で使用する要素を定義します。以下はサンプルコードでの記述と、実際のカスタマイズ画面での表示例です。

"settings": [
    {
     "type": "text",
     "id": "title",
     "info": "画像一覧上部に表示するタイトル名",
     "default": "デフォルトタイトル",
     "label": "画像一覧タイトル"
    }
],

settingsで定義した要素をliquidで呼び出す際は、以下のように{{ section.settings.[id] }}の形式で記述します。

<h3 class="title">{{ section.settings.title }}</h3>

次にblocksです。

blocksではセクション内で複数個使用する要素を定義します。以下はサンプルコードでの記述と、実際のカスタマイズ画面での表示例です。

"blocks": [
    {
     "type": "image",
     "name": "画像block",
     "limit": 3,
     "settings": [
       {
        "type": "image_picker",
        "id": "image_data",
        "label": "画像"
       },
       {
        "type": "text",
        "id": "image_comment",
        "label": "一言コメント"
       }
     ]
    }
  ],

blocksで定義した要素をliquidで呼び出す際は、section.blocksをforで回し、for内でblock.settings.[id]の形式で記述して呼び出します。

<ul class="grid" role="list">
  {% for block in section.blocks %}
    <li class="grid__item">
      <p>{{ block.settings.image_comment }}</p>
      <img src="{{ block.settings.image_data | img_url: 'master' }}">
    </li>
  {% endfor %}
</ul>

使用例

blocksで複数要素登録できるのを利用して、動的に追加できるFAQセクションを作成してます。カテゴリを分けることで、各カテゴリごとにFAQを表示させることもできます。

<section class="c-shopFaq" data-contents-trigger>
  <div class="c-shopFaq_inner c-mainInner">
    <h2 class="c-shopFaq_title c-sectionTitle">Q&A</h2>
    <div class="c-shopFaq_contentWrap">
      <div class="c-shopFaqItem">
        <ul class="c-shopFaqItem_list">
          {% for block in section.blocks %}
            {% if block.settings.question_category == 'SHOPについて' %}
              <li class="-item c-shopFaqQuestion" >
                <p class="c-shopFaqQuestion_question">{{ block.settings.question }}</p>
                <div class="c-shopFaqQuestion_answer">
                  <p class="c-shopFaqQuestion_answer_text">{{ block.settings.answer }}</p>
                </div>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
        <ul class="c-shopFaqItem_list">
          {% for block in section.blocks %}
            {% if block.settings.question_category == '発送について' %}
              <li class="-item c-shopFaqQuestion" >
                <p class="c-shopFaqQuestion_question">{{ block.settings.question }}</p>
                <div class="c-shopFaqQuestion_answer">
                  <p class="c-shopFaqQuestion_answer_text">{{ block.settings.answer }}</p>
                </div>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "ストアFAQ",
  "settings": [],
  "blocks": [
    {
      "type": "question",
      "name": "質問",
      "settings": [
        {
          "type": "select",
          "id": "question_category",
          "label": "質問カテゴリ",
          "options":[
            { "value": "SHOPについて", "label": "SHOPについて" },
            { "value": "発送について", "label": "発送について" }
          ]
        },
        {
          "type": "text",
          "id": "question",
          "label": "質問タイトル"
        },
        {
          "type": "richtext",
          "id": "answer",
          "label": "答え"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "【presets】FAQ",
      "category": "Custom"
    }
  ]
}
{% endschema %}