1. はじめに

1.1　記事について

本記事は、前回のThemeBlocksを使用したセクションを具体的に使用していきます。

1.2　記事の対象

この記事は、Shopifyテーマ開発者に向けて記載しております。

1.3　記事

この記事を読み終えるまでに、約10分です。

2. テーマブロックの基本構成の確認

今回のテーマでは前回のテーマブロックの記事に引き続き、具体的な開発方法を見ていこうと思います。

今回の記事で詳細に全て書く予定でしたが、今回のテーマブロックの記事に関してはもう一つ追加で書かせてください。結論テーマブロックの記事に関しては全部で「3部作」での構成を予定しております。

ではテーマブロックの構成についてお伝えさせていただければと思うのですが、その前に念頭においていただきたいことをお伝えします。

まず今回のアップデートでShopifyのブロックは二種類になりました。

### ブロックの種類

1. セクション定義ブロック 
   セクションファイル内で定義されているブロックのこと
2. テーマブロック
   blocksディレクトリ内に存在するブロックのこと

Shopifyのブロックがこのように2種類になった点を踏まえると、セクションの種類も次のように整理できます。

### セクションの種類

1. 従来のセクション
2. テーマブロックを使用するセクション
   備考：これがいわゆるFlexSectionsになっていくのだと思います。詳細は割愛

とセクションの種類も2つになったとと念頭においていただければと思います。そして

### テーマのディレクトリ基本構成が7→8になった

上記をまずご念頭においていただくことで、今回の記事と次に執筆する記事をの理解が進みやすいかと思います。

2025/04/18追記：

【最重要】ブロック混在不可の大原則

さて、ブロックとセクションがそれぞれ2種類になったことを確認しましたが、ここでテーマブロック開発における最も重要なルールをお伝えします。それは、

「セクション定義ブロック」と「テーマブロック」は、 一つのセクションファイル内で絶対に混在させることはできない

という大原則です。 具体的には、

従来のセクションを作る場合： そのセクションは、schema内に直接定義するセクション定義ブロックだけで構成されます。blocks/ディレクトリにあるテーマブロックを呼び出すことはできません。

テーマブロックを使用するセクションを作る場合： そのセクションは、blocks/ディレクトリにあるテーマブロックだけで構成されます。schema内に従来のセクション定義ブロックを記述することはできません。

つまり、セクションを開発する際には、「従来のブロックだけで作る」か、「テーマブロックだけで作る」かのどちらか一方のアプローチを選択する必要がある、ということです。

この点をしっかり押さえておくことが非常に重要です。

それでは冒頭長くなりましたが、具体的に「テーマブロック」を使用したセクションの”基本的”な作成方法を見ていきましょう。

2.1 custom-secitonの作成

まずはcustom-section.liquidファイルとして新たなセクションファイルを追加

2.2 Schemaの作成

従来のセクション通り、Schemaを記述していくのですが、

Schema内のプロパティに”blocks”というものが出現しています。ここが新しい。

→ この値を@themeにすれば、blocksディレクトリ内で作成されている全てのblocksを読み込むことができます。

このプロパティの中でテーマブロックを指定してあげるとスコープが絞られ、特定のブロックしか使用できないセクションが作成できます。※詳細は次回記事にて

2.3 テーマブロックの呼び出し方法

はい、また新しい記述が出てきました

{% content_for 'blocks'%}

この記述をしてあげることで、schema内

    "blocks": [
        {"type": "@theme"},
        {"type": "@app"}
     ],

で指定されたテーマブロックを呼び出すことができます。※この場合は@themeが指定されているので、blocksディレクトリにある全てのブロックを呼び出すこと可能です。

2.4 テーマブロックを作成してみる

ではblocksディレクトリにblockを作成していきましょう~ 「heading.liquid」を作成します。

ファイルが作成されたら、shemaをまずは記述していきます。この辺りはセクションの構成と同じですね。

セクション定義ブロックではセクションファイル内のsettings>blocksのschemaの中にblockの記述していく形でしたが、これはテーマブロックでは必要ありません。settingsの中に直接書いちゃいます。

続いて要素を作っていきます。

通常セクションのファイルないだと{% for %}分の中でblockを呼び出す必要がありましたが、blocksディレクトリの中ではその必要はありません！直接書いちゃいます。

Memo：テーマブロックでも {{ block.shopify_attibutes }} は有効ですので忘れずに。

するとこのようにテーマエディタ上で出現します。

ここまでが基本的なテーマブロックの構成です。今回の記事はここまでなのですが、

「え？ここまでだとセクション内で定義した方が早くない？」と思われた方、おっしゃる通りです。

ただ、テーマブロックの強みである「汎用的にテーマ内で使用できる」「ブロックをネストできる」などの利点を踏まえた上で「テーマブロックを使用したセクションの構築方法」を次回の記事で詳細にお伝えできればと思います。

それでは次回の記事も、よろしくお願いいたします！

著者：ショピ道 龍之介