Liquid July '26 developer preview で 2 つのタグが追加。ページ構造を Liquid テンプレートの中に直接書けるようになり、開発者もコーディングエージェントも「1 か所」を読んで直せる。既存のセクション／テーマ設定／JSON テンプレートはそのまま動く。
{% block %}再利用可能なテーマブロックを、テンプレートから直接描画する。ブロック名を指定し、入力（inputs）を渡し、body コンテンツを与える。書き味は {% render %} とほぼ同じ。
{% partial %}サーバーレンダリングされた HTML の「名前付き領域」を定義する。JavaScript から、ページ全体をリロードせずにその領域だけを更新できる。
呼び出したいテーマブロックを名前で指定する。
そのブロックが受け取る入力値を渡す。
中身のコンテンツも与えられる。{% render %} とよく似た感覚で書ける。
| 観点 | これまでのテーマアーキテクチャ | 今回の developer preview |
|---|---|---|
| セクション | そのまま利用 | 継続して動作 |
| テーマ設定 | そのまま利用 | 継続して動作 |
| JSON テンプレート | そのまま利用 | 継続して動作 |
| ページ構成の場所 | JSON テンプレート＋セクション等に分散 | 追加 Liquid テンプレートに直接置ける |
| 位置づけ | — | 既存アーキテクチャと並存する Liquid-first コンポジションモデル |
プレビューでは Liquid-first テーマ向けの Theme Check ルールも追加される。検出対象として明示されているのは次の 5 つ。
Liquid の syntax error を検出。
複雑になりすぎたテンプレートを警告。
サイズが大きすぎるファイルを検出。
schema の構造が妥当でないケースを検出。
ブロックに渡している引数、schema の定義、{% doc %} 宣言の 3 者がズレているとき検出する。「ドキュメントと実装の乖離」が lint で落ちるのがこのルールの肝。
Liquid July '26 developer preview を有効にした development store を作成する。
skeleton theme の release candidate を出発点にする。
既存の自前テーマに新しいタグを足して試すこともできる。
ページ構造が Liquid テンプレート内に置けるので、開発者もコーディングエージェントも 1 か所を読んで編集できると明記されている。AI に触らせる前提の設計思想が入っている。
{% partial %} により、レンダリングをクライアントサイドフレームワークへ移さずに動的なストアフロント体験を追加できる。サーバー描画のままインタラクションを足す路線。
セクション・テーマ設定・JSON テンプレートは継続して動く。全面移行を迫られないので、新規ページや一部機能から段階的に試せる。
Theme Check に Liquid-first 向けルールが追加。特にブロック引数／schema／{% doc %} の不整合検出は、テンプレートに構造を書く方式で起きやすい事故を先回りして潰す設計。
元記事が案内しているのは developer preview overview / {% block %} リファレンス / {% partial %} リファレンス の 3 点と、Theme Check 3.28.0 リリースノート。構文の詳細・制約・パフォーマンス特性は元記事に記載なしなので、提案前に必ず開発ストアで実物を確認すること。
{% block %} で既存のテーマブロックを並べてページ構成をその中に書き切る。{% partial %} で名前付き領域として定義し、JavaScript からその領域だけを再取得・差し替える。{% doc %} の不整合）を CI に組み込む。