先日Shopify Editions | Winter ’25 が発表されましたね。その中で新機能として「Theme Block」が追加されました。Theme Blockを使うことで、再利用可能なコンポーネントを作成し、テーマ内で簡単に挿入できるようになります。本記事では、Theme Blockの基本的な使い方からコード例までを詳しく解説します。
Shopify Editions | Winter ’25についてはブログ【Shopify】Shopify Editions | Winter ’25公開！最新アップデート情報をチェックでも詳しく解説していますので、併せてご覧ください！
Theme Blockとは
Theme BlockはShopifyの新機能で、再利用可能なコンポーネントを作成・挿入するための仕組みです。従来のセクションやローカルブロック（Static Block）と異なり、Theme Blockは複数のセクションにまたがって使いまわすことができ、コンポーネントの再利用性が大幅に向上します。これにより、同じUIパターンや機能を複数箇所で簡単に適用でき、メンテナンス性・拡張性が高まります。
今までとの違い
これまではセクション内でStaticなブロックを定義する必要があり、同一の機能を別のセクションで再利用するには、同じロジックを複数箇所で記述する必要がありました。しかし、Theme Blockを使うことで、一度定義したコンポーネントを任意のセクションへ挿入可能になり、同じデザインや機能をストア全体で共有できます。結果として、UIの一貫性を保ちやすくなり、管理者（マーチャント）にとってもテーマカスタマイズが容易になります。
実装手順
Quick Startドキュメントに従って、Theme Blockを作成する手順を解説します。
ざっクリ下記の手順になります。
- Theme Blockを作成
- Theme Blockを利用できるセクションを作成
- テーマカスタマイズでページにセクションを追加し、Theme Blockを配置
Theme Blockを作成
Theme Blockを作成するには、まずテーマエディタを開きblocksディレクトリを作成し、その中にTheme Blockのファイルを作成します。ここではblocksディレクトリ内にtext.liquidという名前にします。
作成後、以下のコードを記述します
{% stylesheet %}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
{% endstylesheet %}
<div class="text-block text-{{ block.settings.alignment }}">
{{ block.settings.text }}
</div>
{% schema %}
{
"name": "Text",
"settings": [
{
"type": "richtext",
"id": "text",
"label": "Text"
},
{
"type": "text_alignment",
"id": "alignment",
"label": "Alignment"
},
],
"presets": [
{ "name": "Text" },
{
"name": "Content",
"settings": {
"text": "<p>Hello, world!</p>"
}
}
]
}
{% endschema %}
こちらのコードでは、richtextに書かれた内容を表示するブロックを作成しています。また、text_alignmentによってテキストの配置を変更できるようにCSSを設定しています。
html内で {{ block.settings.text }} のように記述することで、Theme Blockの設定項目を表示することができます。
presetsは、Theme Blockの初期設定を定義するための設定です。ここでは、TextとContentの2つのプリセットを定義しています。 Contentプリセットでは、 Hello, world! というテキストが初期設定として表示されます。あとで管理画面からどう見えるのか確認してみましょう。
Theme Blockを利用できるセクションを作成
次に、セクションを作成します。セクションは、Theme Blockを配置するためのコンテナとなります。ここでは、sectionsディレクトリ内にcustom-section.liquidという名前でファイルを作成します。
作成後、以下のコードを記述します
<div class="custom-section color-{{ section.settings.color_scheme }}">
{% content_for 'blocks' %}
</div>
{% schema %}
{
"name": "Custom section",
"blocks": [{ "type": "@theme" }, { "type": "@app" }],
"settings": [
{
"type": "header",
"content": "Color"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"default": "scheme-1"
}
],
"presets": [
{
"name": "Custom section"
},
{
"name": "Heading and text",
"blocks": [
{
"type": "group",
"settings": {
"color_scheme": "scheme-3"
},
"blocks": [
{
"type": "text",
"settings": {
"text": "<h1>Image with text</h1>"
}
},
{
"type": "text",
"settings": {
"text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post.</p>"
}
}
]
}
]
}
]
}
{% endschema %}
こちらのセクションスキーマでは以下のような設定がされています。
まず、html内で{% content_for 'blocks' %}と記述することで、Theme Blockをレンダリングするためのコンテナを作成しています。そしてblocksに { "type": "@theme" } を設定することで、Theme Blockをセクション内で利用できるようにしています。
ちなみに@appは theme extensionアプリを埋め込めるようにするための設定です。
また、text.liquid同様settingsにはcolor_schemeという設定項目を追加しており、{{ section.settings.color_scheme }}で設定された値を取得しています。
presetsでは、Custom sectionとHeading and textの2つのプリセットを定義しています。Custom sectionは特に設定しておらず、Heading and textプリセットではTextブロックを2つ配置しています。
ここで注目すべきはBlockの中にBlockを配置している点です。このように、ブロックはネストして配置することができます。ネストができるので例えばECサイトで商品の詳細ページを作成する際に、商品画像、商品名、価格、説明文などのコンポーネントをそれぞれBlockとして作成し、セクション内でそれらをグループ化するレイアウトが作成できます。
こちらもあとで管理画面からどう見えるのか確認してみましょう。
クイックスタートには書かれていないのですが、テーマエディタで作業している場合はファイルを保存しようとすると「groupというTheme Blockがないよ」といったエラーが出ます。ですのでドキュメントに沿ってgroup.liquidを作成しておきましょう。似たようなコードなので説明は省略します。
<div
class="group-block color-{{ block.settings.color_scheme }}"
>
{% content_for 'blocks' %}
</div>
{% schema %}
{
"name": "Group",
"blocks": [{ "type": "@theme" }, { "type": "@app" }],
"settings": [
{
"type": "header",
"content": "Color"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"default": "scheme-1"
}
],
"presets": [
{
"name": "Group"
},
{
"name": "Column",
"settings": {
"color_scheme": "scheme-3"
},
"blocks": [
{
"type": "text",
"settings": {
"text": "<h3>Hello, world!</h3>"
}
},
{
"type": "text",
"settings": {
"text": "<p>How's it going?<\/p>"
}
}
]
}
]
}
{% endschema %}
作成したら、custom-section.liquidも保存しましょう。
テーマカスタマイズでページにセクションを追加し、Theme Blockを配置
必要なファイルが揃ったので、ページにセクションを追加し、Theme Blockを配置してみましょう。
テーマのカスタマイズ画面を開き、商品ページに移動します。そして「セクションを追加」をクリックします。すると一覧に先ほどプリセットを設定したのでCustom sectionとHeading and textの２つが表示されるはずです。
プレビューを見ると、Heading and textの方は値を設定しているのでその内容が表示されていることが確認できます。
ここでCustom sectionを選択して追加します。
続いて「ブロックを追加」をクリックします。すると先ほど作成した２つのTheme Blockが表示されるはずです。そして２つそれぞれにプリセットを設定しているので、合計４つのブロックが表示されるはずです。ここではTextを選択して追加します。
追加した直後は何も表示されません。それもそのはず、Textブロックはrichtextによって表示されるため、設定を行わないと何も表示されません。画面右側にあるブロック設定からTextを選択し、Textを入力してみましょう。
サンプルと入力したらきちんと表示されることが確認できました。
Alignmentも反映されます。
せっかくなので初期値が入っているプリセットを選択してみましょう。Heading and textセクションを追加します。
最初からカラースキーマ3のテキスト２つブロックグループが表示されていることが確認できました。
settingsは自由に作れるので例えば一押し商品一覧なども作成できます。以下はそのコードとプレビューです。 Input settingsを参考にして一押し商品一覧を用意してみました。
{% assign product = block.settings.feature_product %}
<div>
<h2>{{ product.title }}</h2>
{{ product | image_url: width: 300 | image_tag }}
<p>{{ product.description }}</p>
{{ block.settings.reason }}
<p>{{ product.price | money }}</p>
<a href="{{ product.url }}">詳細を見る</a>
</div>
{% schema %}
{
"name": "Featured Product",
"settings": [
{
"type": "header",
"content": "イチオシ商品"
},
{
"type": "product",
"id": "feature_product",
"label": "イチオシ商品を選択"
},
{
"type": "richtext",
"id": "reason",
"label": "イチオシのワケ"
}
],
"presets": [
{
"name": "Featured Product"
}
]
}
{% endschema %}
Theme BlockとSnippetの違い
Theme BlockとSnippet は、いずれもコード再利用を促す機能ですが、その用途や特性が異なります。
Theme Blockの特徴
- テーマエディタで設定項目を表示できる
- マーチャント（商人）が各インスタンスをカスタマイズ可能
- 親セクションおよびグローバルオブジェクトへアクセス可能
- 親コードから変数を直接受け取ることは不可
Snippetの特徴
- マーチャントによるUI上でのカスタマイズを想定せず、繰り返し利用されるマークアップを抽象化
- 親コードから変数を受け取れるため、柔軟なテンプレートロジックを記述可能
- テーマエディタには表示されず、あくまで開発者がコードレベルで活用
組み合わせ方の例
- 製品カードなどの複合的な要素では、Theme Blockで全体構造やカスタマイズ可能な設定を用意
- 内部ロジックや共通部分をSnippetで抽象化することで、維持管理しやすい分離構造を実現
Theme Blockの注意点
便利なTheme Blockですが、Staticなローカルブロックと併用することはできません。Staticなローカルブロックはセクション内でしか利用できませんが、Theme Blockはセクションをまたいで利用できるため、両者を併用することはできません。そのため、Theme Blockを利用する場合は、Staticなローカルブロックを使わないようにしましょう。
まとめ
ShopifyのTheme Blockを活用すれば、テーマ内でのコンポーネント再利用が容易になり、メンテナンス性や拡張性が大幅に向上します。セクション間で統一したUIパターンを手軽に共有でき、マーチャントはテーマエディタから直感的にカスタマイズ可能です。また、Input SettingsやTargeting機能を組み合わせれば、より高度なコンポーネント構築も可能になります。
Theme Blockは、Shopifyテーマ開発の新たな標準となりうる機能です。より洗練されたUXを提供しましょう。