Shopifyテーマに自作ブロックを作成・追加する方法【Liquid・JSON未経験でもできる】

前回作成した動的セクション内で、更にブロックを自由に追加できるようにしてみましょう。ブロックの追加方法を知ると、自作セクションだけではなく、既存のセクションファイルのカスタマイズも楽々できるようになります。

基本的なLiquid，JSONの記述についても解説。
プログラミング言語の経験が無い方でも、今すぐチャレンジできますよ！

• Shopifyテーマのブロック機能
• Shopifyのブロック（blocks）とは
• テーマディレクトリでブロックがある場所は？
• Shopifyのブロックを自作する方法
• 1.セクションにブロックを追加する基本書式
• 2.ブロックsettingsを追加する
• 3.ブロック表示のliquidタグを書く
• 複数のブロックを追加し、使い分ける
• ２つ目のブロックを作成する
• ブロックのカスタマイズ項目を増やす
• Liquidタグ“case”を使った条件分岐

Shopifyテーマのブロック機能

Shopifyのブロック（blocks）とは

Shopifyのテーマブロックとは、セクション内で追加、削除、再配置ができるコンテンツのモジュールです。もっと簡単に「カスタマイズ画面から、セクションごとに使えるパーツ」をイメージしていただくと分かりやすいかもしれません。

下図で赤線で囲った部分は全てブロックです。
カスタマイズ画面で、多くの文字や画像・コレクションを表示させているのはブロックと言っても過言ではないでしょう。

テーマディレクトリでブロックがある場所は？

上図の通り、ブロックはセクションの中で設定されています。
テーマディレクトリ・ファイル側としても、ブロックというディレクトリ（フォルダ）はありません。セクションファイルの中にコードを書くことで、ブロックは追加されます。

どのセクションでも使える共通のブロック、というものはありません。セクション毎、個別にブロックを作成する必要があるわけです。

本記事では、前回作成したセクション（lesson1.liquid）にブロックを追加します。
セクションの作り方・基本の書き方がわからない、という方は、先に以下の記事から見ていただくと進めやすいです。

Skillhubブログ

Shopifyのテーマセクションを自作する方法【Liquid・JSON未経験者でもできる】

Shopifyのブロックを自作する方法

ブロックの作成もセクションとよく似ています。

1.セクションにブロックを追加する基本書式

ブロックはschemaタグ内にblocks属性（キー）を記述することで追加できます。
1つのブロックごとに{ }で囲い、必須項目の name と type を設定する必要があります。

以下が必須項目のみ、ブロックを作成する最小限の記述です。

これを、"settings": []の後に追加します。
要素を区切る,（カンマ）を入れ忘れないように注意してください。

lesson1.liquid - schema全体

{% schema %}
  {
    "name": "lesson1 Section",
    "settings": [
      {
        "type": "text" ,
        "id": "s-heading" ,
        "label": "セクション見出し" ,
        "default":  "HELLO!" ,
        "info" : "見出しを入力してください"
      }
    ] ,
    "blocks": [
      {
        "name": "ブロック1",
        "type": "block1"
      }
    ] ,
    "presets": [
      {
        "name": "lesson1"
      }
    ]
  }
{% endschema %}

2.ブロックsettingsを追加する

ブロックは、それぞれのブロックごとにsettingsを記述し、カスタマイズ画面での変更が出来るようにすることも出来ます。

ブロックのsettingsも、セクション全体のsettingsとほぼ同じです。
必須要素である「type」「id」「label」の3つと、デフォルト値を設定できる「default」を書いてみましょう。

"blocks": [
    {
        "name": "ブロック1",
        "type": "block1",
        "settings": [
            {
                "type": "text",
                "id": "block1-1",
                "label": "確認用テキスト",
                "default":  "block1の確認用テキスト"
            }
        ]
    }
] ,

ちょっと紛らわしい type の値について

settingsの値（配列内）で設定するtypeは、テーマのカスタマイズ画面サイドバーで「何を使って入力・設定をするか」を指定します。これは、テキストフィールドやカラーピッカーなど、Shopifyがあらかじめ用意してくれているパーツを呼び出すイメージです。

対して、下図でオレンジ色の線で囲ったtype。
こちらはブロックのタイプ、識別子として使用できる文字列を設定します。識別子とは、このブロックを見分けるための名前のようなもの。ですので、分かりやすい名前を自分で好きに付けることが出来ます。

3.ブロック表示のliquidタグを書く

schemaでブロックを作ったら、セクション内に表示させるコードを書きましょう。

ブロックの情報を取り出す時は、Liquidのfor文を使います。
for文は、設定した条件に当てはまるものがある間、実行を繰り返すという構文です。繰り返し処理、ループ処理、なんて言い方もします。

以下が、ブロックを表示するためのfor文です。

{% for block in section.blocks %}
    // ここに、ブロックがあるときの処理を書く
{% endfor %} 

カスタマイズ画面で実際にブロックを追加すると、上図の意味が分かりやすいです。
ですので、とりあえず以下のブロック出力コードをh2タグの下に書いてみましょう。

{% for block in section.blocks %}
    {{ block.settings.block1-1 }}
{% endfor %} 

コードを上書き保存。
「テーマをカスタマイズ」からカスタマイズ画面を開きます。

作成したブロック1が追加できるようになっています。
追加してみましょう。

もう一つ、ブロック1を追加します。
今度はサイドバーを使って、テキストを打ち替えてみます。

上図のように、プレビューにも反映されていれば成功です。

for文の動き

コードとブラウザでの表示を見ながら、for文をもう一度見てみましょう。

for ~ endfor間の処理を終えると、配列にまだアイテムが有るか確認します。
他にもアイテムがある場合は、それを使って先ほどと同じ処理を繰り返します。

Shopifyのブロックは、カスタマイズ画面で好きに設定できます。
人（ストア）によって1回も使わないこともあれば、同じブロックが複数回使われることもあります。臨機応変に対応できるように、こうした書き方をしているわけです。

複数のブロックを追加し、使い分ける

ここまでで、基本的なブロックの作成・出力はできました。

もう一つ、セクション内で使えるブロックを追加してみましょう。
下図のように、カスタマイズ画面から変更可能な画像と文章を、2：3の割合で横並びに表示させられるブロックを作ります。

２つ目のブロックを作成する

ブロックを追加しましょう。
使えるブロックを増やしたい時は、blocks内のオブジェクト（{ } で囲まれている部分）を追加します。区切りの,も忘れずに入れてください。

2つめのブロックにもsettigsを書いていきましょう。
typeの値には、画像の選択・挿入ができる「image_picker」を指定してください。
id と label は分かりやすいワードを設定すればOKです。

"blocks": [
  {
    "name": "ブロック1",
    "type": "block1",
    "settings": [
      {
        "type": "text",
        "id": "block1-1",
        "label": "確認用テキスト",
        "default":  "block1の確認用テキスト"
      }
    ]
  } ,
  {
    "name": "ブロック2",
    "type": "block2",
    "settings": [
      {
        "type": "image_picker",
        "id": "block2-img",
        "label": "画像を選択"
      }
    ]
  }
] ,

まだ出力部分を書いていませんが、テーマのカスタマイズ画面を確認してみましょう。
ブロック2を追加でき、サイドバーで「画像を選択」出来るようになっていれば成功です。

このような形で、ブロックは追加していくことができます。
同じ方法で、既存のセクションファイル（例えばmain-product.liquidなど）に使いたいブロックを追加することも可能ですよ。

ブロックのカスタマイズ項目を増やす

settingsで設定している、ブロック内のカスタマイズ可能な項目も追加できます。

方法は、先程のブロック追加とほぼ同じ。
"settinngs": [ ]内のオブジェクト（{ } で囲まれている部分）を,で区切って追加します。

追加した方のtypeは、長めの文章を打ちやすい「textarea」を指定します。

{
  "name": "ブロック2",
  "type": "block2",
  "settings": [
    {
      "type": "image_picker",
      "id": "block2-img",
      "label": "画像を選択"
    } ,
    {
      "type": "textarea",
      "id": "block2-text",
      "label": "テキスト"
    }
  ]
}

サイドバーに画像選択と、テキストエリアの2つが表示されるようになりました。
お好きな画像と、テキストを登録してみてください。
画像はShopifyが用意してくれている“無料の画像”も使えます。

Liquidタグ“case”を使った条件分岐

ブロック1は入力した文字をそのまま表示させる。
ブロック2は、画像とテキストを横並びで表示させたい。
こうした時には、caseというLiquidタグを使用することで、「ブロック1ならこれ、ブロック2ならこれ」とブロックごとに出力する内容を設定することが出来ます。

case/whenを書いてみよう

case文は、変数の値を使った条件分岐を作りたいときに使います。
case文では、分岐に使いたい変数名をcase、分岐を実行する変数の値をwhenで指定します。

今回作っているlesson1.liquidなら、以下のようになります。

{% case block.type %}

    {% when 'block1' %}

    {% when 'block2' %}

{% endcase %}

caseでは、schemaで設定したブロックの“type”を指定。
そして、{% when 'block1' %} = ブロックの“type”の値が「block1」だったら、この処理をしてね、と条件と処理（表示させたい内容）を書いていきます。

Shopifyのセクションでブロックを呼び出す場合、最初に{% for block in section.blocks %}を書いて、取り出しているブロックの情報は変数「block」に入っています。
ですので、caseの後に書く変数は「block.type」になっています。

block1の時の表示は、先程書いた{{ block.settings.block1-1 }}を使いましょう。

出力部分のコード

<div class="page-width"> 
  <h2>{{ section.settings.s-heading }}</h2>

  {% for block in section.blocks %}
    {% case block.type %}
      {% when 'block1' %}
        {{ block.settings.block1-1 }}
      {% when 'block2' %}

    {% endcase %}
  {% endfor %}
</div>

画像-テキストのブロックを表示

{% when 'block2' %}の下に、ブロック2の時の記述をしていきます。
今回はお試しなので、Dawnで既に定義されているCSSクラス+スタイル直書きでサクッと作ってみましょう。

{% case block.type %}
    {% when 'block1' %}
        {{ block.settings.block1-1 }}
    {% when 'block2' %}
        <div class="grid">
            <div style="flex: 2;">
                <!-- ここで画像を呼び出す-->
            </div>
            <div style="flex: 3;">
                <!-- ここでテキストを呼び出す -->
            </div>
        </div>
{% endcase %}

テキストの呼び出しは、block1の時とほぼ同じです。idだけ変えればOKです。

<div style="flex: 3;">
    {{ block.settings.block2-text }}
</div>

Liquidのフィルターを使う

画像の方は{{ block.settings.block2-img }} と書いても、上手く表示されません。

画像を表示できるように、Liquidのフィルターを使ってみましょう。
フィルターは、Liquidで呼び出した情報の出力方法を変更するものです。
{{ }}内で、パイプ文字（|）の後に入力します。

今回使うフィルターは、画像のURLを出力する「img_url」です。
その後に付けている'master'はサイズパラメーターの一つで、元の画像のサイズのまま出力するよう指示しています。

{{ block.settings.block2-img | img_url: 'master' }}

フィルターによって出力されるのは画像URLになりました。
Liquidタグをimgタグ（srcの値）に入れ込みましょう。

<div style="flex: 2;">
    <img src="{{ block.settings.block2-img | img_url: 'master' }}" style="max-width: 100%;">
</div>

コードを保存して、プレビューを見てみましょう。
下図のように、画像と文字が横並びで表示されていれば完成です。

今回は簡単なスタイル指定のみで作りましたが、HTML&CSSで見た目を作り込めば汎用性の高いブロックになるのではないでしょうか。

schemaでのブロック、カスタマイズ画面で追加・編集可能な項目を作成する方法がわかれば、セクション（sections）ディレクトリ内のファイルがかなり読めるようになりますよ。カスタマイズ画面からの余白設定など「何を設定して、どうLiquidで組み込んで使っているか」を見てみると勉強になります。