Shopifyテーマ開発が変わる？Liquidテンプレートからblockとpartialを直接使える新機能を解説【2026年7月21日】

2026年7月21日、ShopifyはLiquidテーマの新しい開発方法として、{% block %}と{% partial %}という2つのタグを発表しました。

今回の変更をひとことで言うと、

ページの構成をLiquidテンプレートの中に直接書きやすくなり、ページの一部分だけを再読み込みする仕組みも作りやすくなる

というものです。

ただし、2026年7月22日時点では正式提供ではなく、「Liquid July '26 developer preview」という開発者向けプレビューです。

現在のShopifyテーマやHorizonが、すぐに使えなくなるという発表ではありません。

なお、これは商品データやAdmin APIの変更ではなく、主にオンラインストアの「テーマをどのように作るか」に関する変更です。

Shopify公式の発表


これまでのShopifyテーマは、ページ構造と表示コードが分かれていた

現在のOnline Store 2.0テーマでは、ページの構成をJSONテンプレートに保存し、実際のHTMLやLiquidはSectionファイルに記述する方法が一般的です。

例えば商品ページの場合は、

  • templates/product.json
  • sections/main-product.liquid
  • blocks/
  • snippets/

など、複数のファイルを確認しながらページ全体の構造を読み取る必要があります。

テーマエディタでSectionやBlockの並び順を変更すると、その情報はJSONテンプレート側に保存されます。

これは店舗運営者が管理画面からレイアウトを変更しやすい仕組みですが、開発者やAIコーディングエージェントから見ると、ページの全体像を確認するために複数のファイルを行き来する必要があります。

今回の新しい方式では、ページ構造をLiquidテンプレート内へ直接記述できるようになります。

{% block 'container', class: 'collection' %}

  <h1>{{ collection.title }}</h1>

  {% block 'product-card',
    block.settings.product: product
  %}
  {% endblock %}

{% endblock %}

テンプレートを上から読むだけで、

  1. 外側にコンテナがある
  2. コレクション名を表示する
  3. 商品カードを表示する

という構造が分かります。

Shopify公式も、この方式によって人間だけでなく「coding agents」がページ全体を読み取りやすくなると説明しています。

Developer preview概要

新機能① {% block %}とは？

{% block %}は、blocksフォルダにある再利用可能なBlockを、Liquidテンプレートから直接呼び出すためのタグです。


基本的な書き方

次のコードは、blocks/container.liquidを呼び出しています。

{% block 'container' %}

  <h1>ショップへようこそ</h1>

{% endblock %}

{% block 'container' %}と{% endblock %}の間に書いた内容は、Block側で{{ block.content }}を使って表示できます。

blocks/container.liquidは、次のようになります。

<div class="container">
  {{ block.content }}
</div>

{% schema %}
{
  "name": "コンテナ",
  "settings": []
}
{% endschema %}

表示結果は、概ね次のようなHTMLになります。

<div class="container">
  <h1>ショップへようこそ</h1>
</div>

Blockに値を渡すこともできる

{% render %}でSnippetに値を渡すように、Blockにも値を渡せます。

{% block 'container',
  tag: 'main',
  class: 'product-page'
%}

  <h1>{{ product.title }}</h1>

{% endblock %}

この例では、Blockへ次の2つの値を渡しています。

  • HTMLタグ：main
  • CSSクラス：product-page

Block側では次のように受け取れます。

{% doc %}
@param {string} [tag] - 使用するHTMLタグ
@param {string} [class] - 追加するCSSクラス
{% enddoc %}

{% assign tag = tag | default: 'div' %}

<{{ tag }} class="{{ class }}" {{ block.shopify_attributes }}>
  {{ block.content }}
</{{ tag }}>

{% schema %}
{
  "name": "コンテナ",
  "settings": []
}
{% endschema %}


Theme Block、Snippetとは何が違う？

新しい{% block %}は、すべてのSnippetや従来のBlockを置き換えるものではありません。

使い分けは次のようになります。

{% block %}

テンプレート側でページ構成を管理するときに使用します。

blocksフォルダのファイルを呼び出し、設定値や本文を渡せます。Blockにはテーマエディタ用のSchemaも持たせられます。

{% content_for 'blocks' %}

店舗運営者がテーマエディタからBlockを追加し、並び替えたい場合に使用します。

並び順などはJSONテンプレート側に保存されます。

{% render %}

snippetsフォルダのファイルを呼び出します。

テーマエディタ用の設定を必要としない、内部的な共通処理や繰り返し使用するLiquidコードに向いています。

つまり、

テンプレートが配置を決めるならblock、店舗運営者が配置を決めるならcontent_for、内部的な共通処理ならrender

という考え方です。

Shopify公式：Block tag

{% block %}の具体的な使用例

トップページに、再利用可能なキャンペーンバナーを表示する例です。

templates/index.liquid

{% block 'container',
  tag: 'main',
  class: 'home-page'
%}

  <h1>{{ shop.name }}</h1>

  {% block 'campaign-banner',
    block.settings.heading: '今週のおすすめ'
  %}

    <p>対象商品が期間限定価格になっています。</p>

  {% endblock %}

{% endblock %}

blocks/campaign-banner.liquid

<section
  class="campaign-banner"
  {{ block.shopify_attributes }}
>
  <h2>{{ block.settings.heading }}</h2>

  <div class="campaign-banner__content">
    {{ block.content }}
  </div>
</section>

{% schema %}
{
  "name": "キャンペーンバナー",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "見出し",
      "default": "おすすめ情報"
    }
  ]
}
{% endschema %}

このように、共通のデザインはBlock側へ置き、ページ固有の文章はテンプレート側に書けます。

新機能② {% partial %}とは？

{% partial %}は、ページ全体を再読み込みせず、指定した範囲だけをサーバーから取得して入れ替えるためのタグです。

例えばコレクションページで並び順を変更したときに、

  • ヘッダー
  • メニュー
  • 説明文
  • フッター

まで読み込み直す必要はありません。

商品一覧だけを新しい内容へ入れ替えられます。


{% partial %}の基本的な書き方

コレクションの商品一覧をproduct-gridという名前の更新領域にします。

{% partial 'product-grid' %}

  <div class="product-grid">

    {% for product in collection.products %}
      <article class="product-card">
        <a href="{{ product.url }}">
          <h2>{{ product.title }}</h2>
          <p>{{ product.price | money }}</p>
        </a>
      </article>
    {% endfor %}

  </div>

{% endpartial %}

この時点では、通常のLiquidと同じようにサーバー側でHTMLが生成されます。

その後、JavaScriptからproduct-gridを指定すると、この範囲だけ新しいHTMLへ入れ替えられます。

JavaScriptから商品一覧を更新する例

import { partials } from '@shopify/partial-rendering';

const sortSelect = document.querySelector('#sort-by');

sortSelect.addEventListener('change', async (event) => {
  const url = new URL(window.location.href);

  url.searchParams.set('sort_by', event.target.value);

  const update = await partials.fetch('product-grid', {
    url: url.toString(),
  });

  partials.apply(update);
});

流れは次のとおりです。

  1. お客様が並び順を選ぶ
  2. JavaScriptが新しいURLを作る
  3. Shopifyのサーバーへproduct-gridのHTMLを要求する
  4. Liquidが新しい商品一覧を生成する
  5. partials.apply()が現在の商品一覧と入れ替える

partialはSnippetのような「共通ファイル」ではありません。

ページ内のどの範囲を更新対象にするか、名前を付けるタグ

と考えると分かりやすいでしょう。

Shopify公式：Partial tag

Reactなどへ表示処理を移さなくても動的なページを作りやすくなる

これまでもSection Rendering APIを利用すれば、一部分だけを更新できました。

ただし、サーバーから返されたHTMLをどこへ挿入するか、JavaScript側で管理する必要がありました。複雑なサイトでは、Reactなどのクライアント側フレームワークを使う方法もあります。

新しい{% partial %}では、

  • HTMLの生成はLiquidとShopifyのサーバーが担当する
  • JavaScriptは必要なPartialを取得する
  • Partial名を使って正しい場所へ反映する

という役割分担になります。

JavaScriptが不要になるわけではありませんが、表示処理までクライアント側フレームワークへ移さなくても、動きのあるストアを作りやすくなります。

{% partial %}で作りやすくなる機能



コレクションの絞り込み

商品一覧だけでなく、

  • 該当商品数
  • 選択中の絞り込み条件
  • 商品一覧

を1回のリクエストでまとめて更新できます。

カートドロワー

商品をカートへ追加したあと、ページ全体を再読み込みせず、

  • カートアイコンの商品数
  • カート内の商品
  • 小計金額

などを更新できます。

検索結果

検索条件を変更した際に、検索フォームを残したまま結果部分だけを更新できます。

言語・通貨の変更

言語や通貨を切り替えたときは、引数なしのpartials.refresh()を使って複数のPartialを更新する方法も用意されています。

Partialを使えば、すべて自動で安全になるわけではない

部分更新では、通常のページ移動が発生しません。

partials.apply()は、フォーカス、選択中の文字、フォームの値、スクロール位置などの引き継ぎを行います。

一方、次の処理は開発者側で考える必要があります。

  • 古い通信結果が、後から新しい結果を上書きしないようにする
  • 読み込み中であることを表示する
  • スクリーンリーダーへ更新内容を伝える
  • 開いていたメニューなどの状態を復元する
  • サーバーから返された数量や金額を正しい値として扱う

「ページの一部だけを入れ替えられる便利なタグ」ではありますが、通信中の表示やアクセシビリティまで全部自動化されるわけではありません。

Theme CheckもLiquid-firstテーマに対応

新しい方式では、Liquidテンプレート内にページ構造が集まるため、1つのファイルが大きくなったり、Blockへ渡す値を間違えたりする可能性があります。

そこでTheme Check 3.28.0では、新しい検査ルールも追加されています。

講師は「AIが作ったコードも、公開前に検査しましょう」と説明する。

追加された主なチェック内容は次のとおりです。

  • Liquidの構文エラー
  • 条件分岐が複雑になりすぎていないか
  • Liquidの入れ子が深すぎないか
  • ファイルサイズが大きすぎないか
  • Schemaの設定項目が多すぎないか
  • Blockへ同じ引数を重複して渡していないか
  • 必須の引数が不足していないか
  • {% doc %}に書かれていない引数を渡していないか
  • 引数の型が{% doc %}の宣言と一致しているか
  • Schemaに存在しないBlock設定を指定していないか
  • {% schema %}や{% javascript %}を誤った場所で使用していないか

これは、AIコーディングエージェントがLiquidを生成することも前提にした「間違いを発見する仕組み」と考えられます。

Theme Check 3.28.0リリースノート

SectionやJSONテンプレートは廃止されるの？

今回の発表では、Section、テーマ設定、JSONテンプレートは今後も引き続きサポートされると明記されています。


今回追加されたのは、既存のテーマ構成を強制的に置き換えるものではありません。

  • 従来方式：店舗運営者がテーマエディタで配置を変更しやすい
  • Liquid-first方式：開発者やAIがコードから全体構成を読み取りやすい

という、それぞれ異なる利点があります。

Horizonテーマは、すぐに作り直す必要がある？

Horizonを含む現在のテーマを、今回の発表に合わせてすぐに作り直す必要はありません。

今回の機能は、まだ開発者向けプレビューです。

Shopify公式も、タグの動作やJavaScriptヘルパーは正式提供までに変更される可能性があると案内しています。

そのため現時点では、

  • 公開中のHorizonテーマを全面的に書き換えない
  • Sectionや既存Blockをそのまま活用する
  • 新機能は開発ストアや複製テーマで検証する
  • 正式提供後に採用範囲を判断する

という進め方が安全です。

特にHorizonでは、既存のSectionやBlockを使って再現できる部分まで、Liquid-first方式へ置き換える必要はありません。

新しいSkeleton Themeも公開

Shopifyは新しい構成を試すため、Skeleton Themeのリリース候補版も公開しています。

このテーマは、

  • sectionsフォルダを使用しない
  • JSONテンプレートを使用しない
  • templates/*.liquidからBlockを直接呼び出す
  • ページをBlock、Snippet、HTMLで構成する

という、かなり明確なLiquid-first構成です。

ただし、「今後すべてのShopifyテーマでSectionが使えなくなる」という意味ではありません。

このSkeleton Themeが、新しい方式を確認するために、あえてSectionを使用しない構成になっているということです。

Shopify Skeleton Theme RC

開発ストアで試す方法

この機能を試すには、Shopifyの開発ストアを作成し、Feature previewから「Liquid July '26 changes」を選択します。

その後、次のどちらかで検証します。

  • Skeleton Themeのリリース候補版を使用する
  • 自分の検証用テーマへ{% block %}と{% partial %}を追加する

CLIでプレビューするときは、誤ったストアへ接続しないよう、ストアURLを明示します。

shopify theme dev --store 開発ストア名.myshopify.com

公開中のテーマへ直接追加するのではなく、まず開発ストアまたは未公開の複製テーマで確認してください。

まとめ


今回の発表のポイントは、次のとおりです。

  • Liquidテンプレートにページ構造を直接書ける
  • {% block %}でBlockをテンプレートから呼び出せる
  • 引数、Schema設定、本文をBlockへ渡せる
  • {% partial %}で更新する範囲に名前を付けられる
  • JavaScriptから指定範囲だけ再取得・更新できる
  • Reactなどへすべての表示処理を移さなくても動的な機能を作りやすい
  • Theme CheckでBlockの引数やSchemaの間違いを検査できる
  • 既存のSectionやJSONテンプレートは引き続き使用できる
  • 現時点では開発者向けプレビューであり、仕様変更の可能性がある

これは単なるLiquidタグの追加ではありません。

Shopifyが、人間とAIコーディングエージェントの両方にとって、読みやすく編集しやすいテーマ構成を用意し始めた変更だと考えられます。

一方、店舗運営者がテーマエディタから自由にSectionを追加・移動できる現在の方式にも大きな利点があります。

今後は、

店舗運営者がテーマエディタで管理する部分と、開発者がLiquidで構成を固定する部分を、どのように使い分けるか

がテーマ設計の重要な判断になりそうです。
B!